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   //
    });
}