一款很不错的bootstrap日历工具，仿google日历插件

先上效果图

由于在做一个会员活动的页面，我们采用这样的显示可以很直观的展示活动日程安排，访客点击具体日期可以直接显示活动详情，并可以带有活动详情链接去跳转到活动详情页面。

我们页面全部才有bootstrap框架来设计，因此要使用此插件夤bootstrap支持。

上代码

        <div class="pull-right form-inline">
            <div class="btn-group">
                <button class="btn btn-primary" data-calendar-nav="prev"><< 前一月</button>
                <button class="btn" data-calendar-nav="today">本月</button>
                <button class="btn btn-primary" data-calendar-nav="next">后一月 >></button>
            </div>
            <div class="btn-group">
                <button class="btn btn-warning" data-calendar-view="year">年</button>
                <button class="btn btn-warning active" data-calendar-view="month">月</button>
                <button class="btn btn-warning" data-calendar-view="week">日</button>
                <button class="btn btn-warning" data-calendar-view="day">天</button>
            </div>
        </div>

        <h3></h3>
        <small>To see example with events navigate to march 2013</small>
    </div>   
   
    <div class="row">
    <div class="span9">
        <div id="calendar"></div>
    </div>
    <div class="span3">

    <h4>Events</h4>
    <small>This list is populated with events dynamically</small>   
    <ul id="eventlist" class="nav nav-list"></ul>
    </div>
    </div>
   
    <div class="modal hide fade" id="events-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Event</h3>
        </div>
        <div class="modal-body" style="height: 400px">
        </div>
        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
    </div>
       

js代码

<script type="text/javascript" src="__TMPL__Public/js/underscore-min.js"></script>
<script type="text/javascript" src="__TMPL__Public/js/language/zh-CN.js"></script>
<script type="text/javascript" src="__TMPL__Public/js/calendar.js"></script>
<script type="text/javascript">
(function($) {
    "use strict";
    var options = {
        events_source: '{:U('article/huodong')}',
        view: 'month',
        tmpl_path: 'tmpls/',
        tmpl_cache: false,
        day: '<php>echo date('Y-m-d');</php>',
        model:'#events-modal',
        onAfterEventsLoad: function(events) {
            if(!events) {
                return;
            }
            var list = $('#eventlist');
            list.html('');

            $.each(events, function(key, val) {
                $(document.createElement('li'))
                    .html('<a href="' + val.url + '">' + val.title + '</a>')
                    .appendTo(list);
            });
        },
        onAfterViewLoad: function(view) {
            $('.page-header h3').text(this.getTitle());
            $('.btn-group button').removeClass('active');
            $('button[data-calendar-view="' + view + '"]').addClass('active');
        },
        classes: {
            months: {
                general: 'label'
            }
        }
    };

    var calendar = $('#calendar').calendar(options);
    calendar.setLanguage('zh-CN');
    calendar.view();

    $('.btn-group button[data-calendar-nav]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.navigate($this.data('calendar-nav'));
        });
    });
    $('.btn-group button[data-calendar-view]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.view($this.data('calendar-view'));
        });
    });

    $('#first_day').change(function(){
        var value = $(this).val();
        value = value.length ? parseInt(value) : null;
        calendar.setOptions({first_day: value});
        calendar.view();
    });

    $('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
        //e.preventDefault();
        //e.stopPropagation();
    });
}(jQuery));
</script>