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 += '
calEvent.source.events[i].data.img_url + '">
'; } else { html += '
calEvent.source.events[i].data.img_url + '">
'; } 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); })

fullcalendar 使用教程_第1张图片

fullcalendar 使用教程_第2张图片

 

fullcalendar 使用教程_第3张图片

你可能感兴趣的:(fullcalendar 使用教程)