Fullcalendar的使用（SpringMVC ajax）

1.目的

以日历的实现显示各种事件(event)

fullcalendar官网

 

2.步骤

2.1 引入资源文件

 

2.2 html代码

你只需要一个div ，把日历放到这个div里就行了， 当然样式需要用各种class定义

  <div id="studentCalendar" class="vertical-box-column calendar"></div>

 

2.3 js代码

通过ajax请求动态获取数据

   //begin 初始化日历
        initCalendar : function(){
            var prevOrNext="now";
            /* initialize the calendar
            -----------------------------------------------------------------*/
            $('#studentCalendar').fullCalendar({
                locale: "zh-cn",
                header: {
                    left: 'month,agendaWeek,agendaDay',
                    center: 'title',
                    right: 'prev,today,next'
                },
                select: function (start, end) {
                    // 隐藏操作按钮
                    planExecuteIndex.hideBtn()
                },
                selectable: true,
                editable: true,
                selectHelper: true,
                eventLimit: true,
                droppable: false, // this allows things to be dropped onto the calendar

                // 日程数据
                events: function (start, end, timezone, callback) {
                    var beginDate=start;
                    $("#studentCalendar").fullCalendar('removeEvents');
                    $.ajax({
                        url: 'teachContent/showCourseOfStudentAsCalendar?firstDayDate='+beginDate,
                        dataType: 'json',
                        type: 'post',
                        success: function (teachContent) {
                            // 获取当前月的数据
                            var events = [];
                            if (teachContent != null) {
                                var len = teachContent.length;
                                for (var i = 0; i < len; i++) {
                                    var ifBelongTOMyself = 0;
                                    // 背景颜色
                                    var color = "";
                                    // 课程状态
                                    var ifSigned = teachContent[i].ifStudentSignedIn;
                                    var status="unsigned";
                                    if (ifSigned ==null || ifSigned=="") {
                                        //未上课
                                        color = COLOR_RED_TRANSPARENT_9;
                                    } else  {
                                        //已上课COLOR_GREEN_TRANSPARENT_9
                                        status="signed";
                                        color = COLOR_GREEN_TRANSPARENT_9;
                                    }
                                    var scheduleDate = planExecuteIndex.timeFormate(teachContent[i].classTime);
                                    events.push({
                                        id: teachContent[i].contentId,
                                        title: teachContent[i].contentName,
                                        start: scheduleDate,
                                        color: color,
                                        status: status,
                                    })
                                    ;
                                }
                            }
                            callback(events);
                        }
                    });
                },
            });
        },//end 初始化日历