fullcalendar 使用教程

$('#calendar')
            .fullCalendar(
                    {
                        header : {
                            left : 'today prev,next',
                            center : 'title',
                            right : 'month,basicWeek'
                        },
                        buttonText : {
                            month : '月视图',
                            week : '周',
                            day : '日视图'
                        },
                        defaultDate : date,
                        eventPhase : 5,
                        editable : false,// 可以拖动
                        selectable : true,
                        eventLimit : true,

 events:function(start, end, callback){

    //prev上一月, next下一月等事件时调用

.fullCalendar( 'removeEvents' [, idOrFilter ] )

    }

                          eventOrder :'seq', 

// 注意：这里有两种实现方法，下面是一种，还有一种 是通过url，如events:'/data.json'
                        // events : [ {
                        // title : 'All Day Event',
                        // start : '2016-05-01'
                        // }, {
                        // title : 'Long Event',
                        // start : '2016-05-07',
                        // end : '2016-05-10'
                        // }, {
                        // id : 999,
                        // title : 'Repeating Event',
                        // start : '2016-05-09'
                        // }, {
                        // id : 999,
                        // title : 'Repeating Event',
                        // start : '2016-05-16'
                        // }, {
                        // title : 'Conference',
                        // start : '2016-05-11',
                        // end : '2016-05-13'
                        // }, {
                        // title : 'Meeting',
                        // start : '2016-05-12',
                        // end : '2016-05-12'
                        // }, {
                        // title : 'Lunch',
                        // start : '2016-05-12'
                        // }, {
                        // title : 'Meeting',
                        // start : '2016-05-12'
                        // }, {
                        // title : 'Happy Hour',
                        // start : '2016-05-12'
                        // }, {
                        // title : 'Dinner',
                        // start : '2016-05-12'
                        // }, {
                        // title : 'Birthday Party',
                        // start : '2016-05-13'
                        // }, {
                        // title : 'Click for Google',
                        // url : 'http://google.com/',
                        // start : '2016-05-28'
                        // } ],
                        dayClick : function(date, allDay, jsEvent, view) {
                            var selDate = date.format();// 获取当前点击日期
                            $("#datetimepicker").val(selDate);
                            $("#taskModal").modal();
                        },
                        eventClick : function(calEvent, jsEvent, view) {
                            var today = calEvent.start.format();
                            switch (calEvent.data.type) {
                            case 'video':
                                $(".view-audio").hide();
                                $(".view-picture").hide();
                                $(".view-video").show();
                                myPlayer.play();
                                $("#viewModal").modal();
                                break;
                            case 'audio':
                                $(".view-video").hide()
                                $(".view-picture").hide();
                                $(".view-audio").show();
                                music.play();
                                $("#viewModal").modal();
                                break;
                            case 'picture':
                                $(".view-video").hide()
                                $(".view-audio").hide();
                                $(".view-picture").show();
                                $('.carousel-inner').empty();
                                var html = "";
                                var count = 0;
                                for (var i = 0; i < calEvent.source.events.length; i++) {
                                    var type = calEvent.source.events[i].data.type;
                                    var currentDay = calEvent.source.events[i].start.format();
                                    if (type == 'picture' && today == currentDay) {
                                        if (count == 0) {
                                            html += '<div class="item active"><img src="'
                                                    + calEvent.source.events[i].data.img_url
                                                    + '"></div>';
                                        } else {
                                            html += '<div class="item"><img src="'
                                                    + calEvent.source.events[i].data.img_url
                                                    + '"></div>';
                                        }
                                        count++;
                                    }
                                }
                                if (count == 1) {
                                    $('.carousel-control').hide()
                                } else {
                                    $('.carousel-control').show()
                                }
                                $('.carousel-inner').append(html)
                                $("#viewModal").modal();
                                $('#myCarousel').carousel({
                                    pause : true,
                                    interval : false
                                });
                                break;
                            case 'course':
                                $(this).attr('target', '_blank')
                                break;
                            case 'other':
                                break;
                            }
                        }
                    });

$(".body-left .file-list").each(
            function(index) {
                var fileName = $(this).find('.fileName').text();
                var dataType = $(this).find('.fileName').attr('data-type');
                if (!dataType)
                    return;
                var eventData = {
                    title : fileName,
                    start : datetimepicker,
                    backgroundColor : 'transparent',
                    textColor : '#03A9F4',
                    borderColor : '#fff',
                    seq: Math.round(Math.random() * 9 + 1)
                }
                switch (dataType) {
                case 'video':
                    eventData.className = 'icon-video-sm';
                    eventData.data = {
                        type : 'video'
                    };
                    break;
                case 'audio':
                    eventData.className = 'icon-audio-sm';// 这里可以设置此action的样式,
                    eventData.data = {
                        type : 'audio'
                    };
                    break;
                case 'picture':
                    eventData.className = 'icon-picture-sm';// 这里可以设置此action的样式,
                    eventData.data = {
                        type : 'picture',
                        img_url : '/resources/img/myCalendar/'
                                + Math.round(Math.random() * 5 + 1) + '.png'
                    };
                    break;
                case 'course':
                    eventData.className = 'icon-course-sm';// 这里可以设置此action的样式,
                    eventData.data = {
                        type : 'course'
                    };
                    eventData.url = 'http://www.baidu.com';
                    break;
                case 'other':
                    eventData.className = 'icon-other-sm';// 这里可以设置此action的样式,
                    eventData.data = {
                        type : 'other'
                    };
                    break;
                }

                $('#calendar').fullCalendar('renderEvent', eventData, true);
            })