FullCallendar使用

最新推荐文章于 2024-05-17 15:12:07 发布

CdAwm

最新推荐文章于 2024-05-17 15:12:07 发布

阅读量724

点赞数

分类专栏： asp.net学习之路前端 asp.net学习之路---MVC 文章标签： fullcalendar

本文链接：https://blog.csdn.net/qq_24266485/article/details/80841913

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

asp.net学习之路---MVC

6 篇文章 0 订阅

订阅专栏

asp.net学习之路

4 篇文章 0 订阅

订阅专栏

记录下FullCalendar使用：

1、定义一个div

<div id="m_calendar"></div>

当然在这一步之前，你应该引入fullcalendar的js文件，然后为div设置一个id或者class等等，等会儿用它来挂载。

2、JS代码

//数据源
var ScheduleSource = {
    //自定义
    events: function (start, end, timezone, callback) {
        var startDate = GMTToStr(start._d);
        var endDate = GMTToStr(end._d);
        $.post('/Schedule/getScheduleListByType', { startDate: startDate, enddate: endDate, type: 'Schedule' }, function (result) {
            var events = []
            $.each(result, function (i, t) {
                var endstr, startstr;
                if (t.end.substring(11, t.start.length) == "00:00:00") {
                    endstr = t.end.substring(0, 10);
                } else {
                    endstr = t.end.substring(0, 10) + "T" + t.end.substring(11, t.end.length)
                }
                if (t.start.substring(11, t.start.length) == "00:00:00") {
                    startstr = t.start.substring(0, 10);
                } else {
                    startstr = t.start.substring(0, 10) + "T" + t.start.substring(11, t.start.length);
                }
                events.push({
                    title: t.title,
                    start: startstr,
                    end: endstr,
                    description: t.description == null ? "暂无备注" : t.description,
                    id: t.url,
                    type: "日程"
                    //color: StatusColor(t.status),
                    //backgroundColor: 'white'
                });
            });
            callback(events);
        });
    },
    //className: "m-fc-event--danger",
    color: '#9ea7ed',
    backgroundColor: '#FFB5B5',//定义不同数据对应的背景色
    textColor: 'white'
}

var TaskSource = {
    //任务
    events: function (start, end, timezone, callback) {
        var startDate = GMTToStr(start._d);
        var endDate = GMTToStr(end._d);
        $.post('/Schedule/getScheduleListByType', { startDate: startDate, enddate: endDate, type: 'Task' }, function (result) {
            var events = []
            $.each(result, function (i, t) {
                events.push({
                    title: t.title,
                    start: t.start.substring(0, 10),
                    end: t.end.substring(0, 10),
                    description: t.description == null ? "任务描述内容为空" : "任务描述：" + t.description,
                    //url: "/bistask/TaskDetail/" + t.url,
                    id: t.url,
                    type: "任务"
                    //color: StatusColor(t.status),
                    //backgroundColor: 'white'
                });
            });
            callback(events);
        });
    },
    //className: "m-fc-event--danger",
    color: '#d1d5f1',
    backgroundColor: '#ACD6FF',//定义不同数据对应的背景色
    textColor: 'white'
}

var MeetingSource = { 
    //会议
    events: function (start, end, timezone, callback) {
        var startDate = GMTToStr(start._d);
        var endDate = GMTToStr(end._d);
        $.post('/Schedule/getScheduleListByType', { startDate: startDate, enddate: endDate, type: 'Meeting' }, function (result) {

            var events = []
            $.each(result, function (i, t) {
                events.push({
                    title: t.title,
                    start: t.start.substring(0, 10) + "T" + t.start.substring(11, t.start.length),
                    end: t.end.substring(0, 10) + "T" + t.end.substring(11, t.start.length),
                    description: t.description == null ? "" : t.description,
                    id: t.url,
                    type: "会议"
                    //url: "/bistask/TaskDetail/" + t.url,
                    //color: StatusColor(t.status),
                    //backgroundColor: 'white'
                });
            });
            callback(events);
        });
    },
    className: "m-fc-event--danger",
    color: '#9ea7ed',     // an option! #c4caf7
    backgroundColor: '#C1FFE4',
    textColor: 'white' // an option!
}


var CalendarBackgroundEvents = {
    init: function () {
        //var e = moment().startOf("day"),
        //t = e.format("YYYY-MM"),
        //i = e.clone().subtract(1, "day").format("YYYY-MM-DD"),
        //r = e.format("YYYY-MM-DD"),
        //o = e.clone().add(1, "day").format("YYYY-MM-DD");
        $("#m_calendar").fullCalendar({
            header: {
                left: "prev,next today",
                center: "title",
                right: "month,agendaWeek,agendaDay,listWeek"
            },
            firstDay: 1,           //视图从每周几开始，默认0为周日，1为周1，2为周2，依此类推
            noEventsMessage: "暂无数据",   //listview视图下，无数据时显示提示
            buttonText: { today: '今天', month: '月', week: '周', day: '日', listWeek: '列表' },  //对应顶部操作按钮的名称自定义
            monthNames: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"], //月份自定义命名
            monthNamesShort: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"], //月份缩略命名（英语比较实用：全称January可设置缩略为Jan）
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],       //同理monthNames
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  //同理monthNamesShort
            weekNumberTitle: "周",         //周的国际化,默认为"W"
            //displayEventTime : false,       //每一个日程块中是否显示时间，默认true显示
            //displayEventEnd : true,         //是否显示日程块中的“结束时间”，默认true，如果false则只显示开始时间
            eventLimitText: "更多",       //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）
            dayPopoverFormat: "dddd , YYYY 年 MMMM D 日", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用
            navLinks: true,                // “xx周”是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。本地测试：没什么效果
            //eventMouseover: function (calEvent, jsEvent, view) {//鼠标在日程区块上时触发
            //    $(this).css('background-color', 'gray');
            //},
            //eventMouseout: function (calEvent, jsEvent, view) {//鼠标从日程区块离开时触发
            //    $(this).css('background-color', '');
            //},
            allDayText: "全天",            //自定义全天视图的名称 
            editable: !1, //支持Event日程拖动修改，默认false  
            eventLimit: 3,//数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数  
            navLinks: !0,//“xx周”是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。本地测试：没什么效果  
            //businessHours: !0,//设置哪些时间段重点标记颜色  
            //多数据源支持:场景可能是从多种模块取数据，比如从会议取会议日程、从计划取计划日程，而且要求会议、计划日程颜色显示不一样，那么就可以用这种
            eventSources: [
                    ScheduleSource,TaskSource,MeetingSource
            ],
            eventRender: function (e, t) {
                 t.hasClass("fc-day-grid-event") ? (t.data("content", e.description), t.data("placement", "top"), mApp.initPopover(t)) : t.hasClass("fc-time-grid-event") ? t.find(".fc-title").append('<div class="fc-description">' + e.description + "</div>") : 0 !== t.find(".fc-list-item-title").lenght && t.find(".fc-list-item-title").append('<div class="fc-description">' + e.description + "</div>")
                //t.find('.fc-title').append("<br/>" + e.description);
            },
            eventClick: function(calEvent, jsEvent, view) {
                if (calEvent.type == "任务") {
                    TaskDesc(calEvent.id);//自己定义的一个方法，是一个弹框来显示详情的，下面也是
                }
                else if (calEvent.type == "会议") {
                    meetingid = calEvent.id;
                    loadMeetingDetails();
                }
                else if (calEvent.type == "日程") {
                    ScheduleDesc(calEvent.id);
                }
            }
        })
    }
};
jQuery(document).ready(function () {
    CalendarBackgroundEvents.init()
    $(".btn.btn-danger.m-btn.m-btn--custom.m-btn--icon.m-btn--air").css("text-decoration", "none")
    $('.icheck_input').each(function () {
        var self = $(this),s
        label = self.next(),
        label_text = label.text();
        label.remove();
        self.on('ifChecked ifUnchecked', function (event) {
            if (event.type == "ifUnchecked") {
                filterRemove(self.attr("ltxt"))
                self.parent().css("background", "#f4516c")
            }
            if (event.type == "ifChecked") {
                filterAdd(self.attr("ltxt"));
                self.parent().css("background", "#2489c5")
            }
        }).iCheck({
            checkboxClass: 'icheck_line-blue',
            radioClass: 'icheck_line-blue',
            insert: '<div class="icheck_line-icon"></div>' + label_text
        });
    });
}); 
//数据加载、删除
function filterAdd(lableTxt) {
    var index = layer.load()
    lableTxt = lableTxt.replace(/\s/g, "")
    var source
    if (lableTxt == "任务") {
        source = TaskSource;
    }
    else if (lableTxt == "会议") {
        source = MeetingSource;
    }
    else if (lableTxt == "自定义") {
        source = ScheduleSource;
    }
    $("#m_calendar").fullCalendar('addEventSource', source)
    layer.close(index)
}
function filterRemove(lableTxt) {
    var index = layer.load()
    lableTxt = lableTxt.replace(/\s/g, "")
    var source
    if (lableTxt == "任务") {
        source = TaskSource;
    }
    else if (lableTxt == "会议") {
        source = MeetingSource;
    }
    else if (lableTxt == "自定义") {
        source = ScheduleSource;
    }
    $('#m_calendar').fullCalendar('removeEventSource', source)
    layer.close(index)
}

filterAdd 和 filterRemove是用来动态加载数据和移除数据的。因为该demo使用的是多数据源的形式，所以此处添加了者两个方法来操作数据，实现就查看任务或者会议等操作。当然对于这两个方法，会有相应的按钮事件来触发。

如果使用的但数据源的方式，其实也可以这样实现，只是说eventSources中包含的只是一个数据源而已。实在不想这样的，可以使用如下的方法：

将eventSources改为events，写法如下：

 events:  function(start, end ,  callback){
                //start:开始日期
                //end :结束日期
                    $.ajax({
                        type : "post",
                        url : "XXX",
                        success : function(data) {
                            var events = [];            
                                events.push({
                                    //你的东西
                                });
                            });
                            callback(events);
                        }
                    });
            },

对了，上面得到日期可能是一个GMT格式的时间，如果你需要的话可以用一下方法转成你需要的格式：

function GMTToStr(time) {
    let date = new Date(time)
    let Str=date.getFullYear() + '-' +
    (date.getMonth() + 1) + '-' + 
    date.getDate() + ' '  
    //+ date.getHours() + ':' +
    //date.getMinutes() + ':' + 
    //date.getSeconds()
    return Str
}

OK，主要还是贴不了图...................，将就看吧。

CdAwm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FullCallendar使用

记录下FullCalendar使用：1、定义一个div&lt;div id="m_calendar"&gt;&lt;/div&gt;当然在这一步之前，你应该引入fullcalendar的js文件，然后为div设置一个id或者class等等，等会儿用它来挂载。2、JS代码//数据源var ScheduleSource = { //自定义 events: function (star...
复制链接

扫一扫

专栏目录