JQuery自定義日曆控件 clndr

1，先引入自定義樣式文件。<link rel="stylesheet" href="/css/clndr.css">

2，添加js文件，順序前後以下：

 

<div class="container">   <div class="CalendarControl"></div>    

<script src="/js/jquery.min.js"></script>

<script src="/js/clndr/underscore-min.js"></script> <script src="/js/clndr/moment.min.js"></script> <script src="/js/clndr/clndr.js" charset="GBK"></script>

</div>

 

引入clndr.js 時注意 添加語音。。charset="GBK" 不然會出現亂碼。

3，初始化：

var myCalendar = $('.CalendarControl').clndr({
        events: source,
        weekOffset: 1,  //默認從0開始。
        daysOfTheWeek: ['日', '一', '二', '三', '四', '五', '六'],   //中文顯示
        clickEvents: {   //單機事件
            click: function (target) {
                var thisYear = moment(target.date._d).format('YYYY');
       var thisMonth = moment(target.date._d).format('MM');
    var thisDay=moment(target.date._d).format('DD');
            },
            today: function () {  
            },
            nextMonth: function (month) {  //點擊下個月事件
             var thisYear = moment(month).format('YYYY');
       var thisMonth = moment(month).format('MM');
                $.ajax({
                    type: "POST",
                    dataType: "text",
                    url: '/_Layouts/15/ZhGC/CalendarHandler.aspx',      //提交到通常處理程序請求數據
                    data: "Type=GetCalendarEvent&Year=" + thisYear + "&Month=" + thisMonth,          //提交兩個參數
                    success: function (result) {
                        source = eval("(" + result + ")");
                        myCalendar.setEvents(source);  //綁定事件在頁面上顯示。（經過控制樣式顯示當前月全部事件）
                    }
                });
            },
            previousMonth: function (month) {
             var thisYear = moment(month).format('YYYY');
       var thisMonth = moment(month).format('MM');
                $.ajax({
                    type: "POST",
                    dataType: "text",
                    url: '/_Layouts/15/ZhGC/CalendarHandler.aspx',      //提交到通常處理程序請求數據
                    data: "Type=GetCalendarEvent&Year=" + thisYear + "&Month=" + thisMonth,          //提交兩個參數：pageIndex(頁面索引)，pageSize(顯示條數)
                    success: function (result) {
                        source = eval("(" + result + ")");
                        myCalendar.setEvents(source);
                    }
                });
            },
            nextYear: function () {
            },
            previousYear: function () {
            }
        },
        showAdjacentMonths: true,
        adjacentDaysChangeMonth: false   //
    });
}