使用fullCalendar实现展示四周的计划,类似闹钟

柔情只为你懂 2022-04-16 01:43 198阅读 0赞

利用fullCalendar中的日程事件可以实现，自定义视图

## 1、自定义视图 ##

显示四周计划

$(selectors.calendar).fullCalendar({
            defaultView: 'agendaFourWeek',
            customButtons: {
                addPlan: {
                    text: '添加计划',
                    click: function() {
                        $("div[name='unShow']").hide();
                        $(selectors.modify).css('display','none');
                        $(selectors.delete).css('display','none');
                        $(selectors.save).css('display','inline-block');
                        clear();
                        $(selectors.modal).modal("show");
                    }
                }
            },
            header: {
                left:   'title',
                center: '',
                right:"today,prev,next,addPlan"
            },
            height:545,
            slotLabelFormat:'H:mm',
            slotDuration:'01:00:00',
            scrollTime :'00:00:00',
            allDaySlot:false,
            slotEventOverlap:false,
            titleFormat:'YYYY年MM月',
            dayNamesShort:['日','一','二','三','四','五','六'],
            views: {
                agendaFourWeek: {
                    type: 'agendaWeek',
                    duration: { weeks: 4 },
                }
            },
            events:getEventsData,
            eventAfterRender:function(event, element, view){
                //element[0].style.left="0%";
                //element[0].style.right="0%";
                $(element.context.childNodes).hide();
    
            },
            eventClick:function(event, jsEvent, view){
                $("div[name='unShow']").show();
                $("div[name='unShow2']").hide();
                getEditModal(event);
                var currentTime=new Date();
                $(selectors.save).css('display','none');
                if(currentTime>new Date(event.start)){
                    $(selectors.modify).css('display','none');
                    $(selectors.delete).css('display','none');
                }else{
                    $(selectors.modify).css('display','inline-block');
                    $(selectors.delete).css('display','inline-block');
                }
                $(selectors.modal).modal("show");
            },
    
        });
    
     /**
         * 获取计划
         */
        var begintime,endtime;
        function getEventsData(start, end, timezone, callback){
            console.log($.fullCalendar.formatDate(start,'YYYY-MM-DD'));
            begintime=start;
            endtime=end;
            var send={
                start:$.fullCalendar.formatDate(start,'YYYY-MM-DD'),
                end:$.fullCalendar.formatDate(end,'YYYY-MM-DD'),
                nodeId:activeNodeId
            };
            console.log(send)
            var done = function (data) {
                console.log(data);
                error.listen(data.code, data.msg, "加载计划失败！")
                    .not(function () {
                        var plans=data.result.planList;
                        if(data.code==1) {
                            $(selectors.table).bootstrapTable("refreshOptions", {data: plans || []});
                        } else {
                            $(selectors.table).bootstrapTable("refreshOptions", {data:[]});
                        }
                        var events = [];
                        for(var i=0;i<plans.length;i++){
                            if(plans[i].state){
                                var plan=plans[i];
                                events=changePlan(events,plan)
    
                            }
                        }
                        callback(events);
                        //console.log("events",events);
                    });
            };
            var failed = function (e) {
                error.listen(e.status, "获取计划，请重试！");
            };
            Plan.planList(send).then(done,failed);
        };

## 2、事件处理 ##

闹钟会有重复事件，如何在fullcalendar中展示的：代码只有一部分，仅是参考

利用js逻辑个个处理：

比如自定义时间：先获取时间段得到两个时间之间的日期，再根据自定义重复的时间添加日程；