Fullcalendar经常性事件限制(使用dow)

时间:2015-07-10 20:32:23

标签: fullcalendar

我一直在尝试在fullcalendar中制作重复活动,我真的觉得道格功能很有帮助,但我真的想为它添加日期范围。

换句话说,道:[1]会为每个星期一重复一个任务,问题是,我想让它只在我设定的日期范围内可见。

3 个答案:

答案 0 :(得分:3)

您无法使用dow设置范围,您必须执行一些自定义功能。

让我们假设您从数据库中获取了包含多个事件对象的事件数据。每个event对象都有start日期end日期属性以及包含日期范围的tofrom属性,isRecurring是一个布尔属性,我们会在重复发生的事件中添加true,否则会false

请记住,定期事件需要开始和结束时间没有日期,您只需要给它们时间段,例如 start = "16:00" and end = "20:00"您可以使用我在初始化时所做的时刻js来提取时间我的事件对象

                {
                  title:'Recurring Event',
                  start: moment.utc(event.start).format('HH:mm'),
                  end: moment.utc(event.end).format('HH:mm'),
                  isRecurrring: event.isRecurring,
                  ranges: [{
                      start: moment(event.from),
                      end: moment(event.to),
                    }],
                }

我使用了moment.utc()来忽略时区。

现在在初始化fullCalendar时覆盖eventRender函数。您的eventRender功能将是

eventRender: function(event, element, view){
    if (event.isRecurrring) {
      return (event.ranges.filter(function(range){
        return (moment(event.start).isBefore(range.end) &&
        moment(event.end).isAfter(range.start));
      }).length) > 0;
    }
  }

答案 1 :(得分:0)

你可以用这个例子来设定范围:

repeatingEvents.push({
        title: "From: " + inputDateStart + " To: " + inputDateFinish,
        start: vm.timeStart,
        end: vm.timeFinish,
        dow: listDay,
        ranges: [{
            start: dateStart,
            end: dateFinish
        }]
    })

    $("#calendar").fullCalendar("refetchEvents");

所以你可以同时使用" dow"和"范围"。希望对你有帮助!

答案 2 :(得分:0)

function createCalendar() {
        vm.uiConfig = timeProfileFactory.getCalendarConfig();
        vm.uiConfig.calendar.eventClick = eventClick;
        vm.uiConfig.calendar.eventDrop = alertOnDrop;
        vm.uiConfig.calendar.eventResize = alertOnResize;
        vm.uiConfig.calendar.eventRender = eventRender;
        vm.uiConfig.calendar.select = selectSlot;
        vm.uiConfig.calendar.header.center = "title";

        vm.events = function(start, end, timezone, callback) {
            callback(repeatingEvents);
        }
        vm.eventSources = [vm.events];
    };

function selectSlot(start, end, jsEvent, view) {
        var allDay = !start.hasTime() && !end.hasTime();
        var offset = ((new Date()).getTimezoneOffset())/60;
        var dateStart = (new Date(start)).setHours(0, 0, 0, 0);      
        dateStart = new Date(dateStart);
        dateStart.setHours(dateStart.getHours() - offset);
        dateStart = dateStart.toISOString();

        var timeStart = (new Date(start)).toISOString();
        var timeEnd = (new Date(end)).toISOString();
        timeStart = timeStart.split('T')[0];
        timeEnd = timeEnd.split('T')[0];

        var length = repeatingEvents.length;
        if(positionEvent == -1 || repeatingEvents.length == 0) {
            positionEvent = 0;
        } else {
            positionEvent = repeatingEvents[length - 1].position + 1;
        }

        repeatingEvents.push({
            title: "From: " + start.format("DD/MM/YYYY"),
            start: start.format("HH:mm"),
            end: end.format("HH:mm"),
            dow: [new Date(start).getDay()],
            ranges: [{
                start: dateStart,
                end: null
            }],
            position: positionEvent,
            allDay: false
        });

        length++;
        if(repeatingEvents[length - 1].end == "00:00") {
            repeatingEvents[length - 1].end = "24:00";
        }
        if(allDay) {
            repeatingEvents[length - 1].allDay = true;
            repeatingEvents[length - 1].start = null;
            repeatingEvents[length - 1].end = null;
        }
        $("#calendar").fullCalendar("refetchEvents");
    };

function eventClick(event, date, jsEvent, view) {
        isOpenDialog = true;
        for(var i = 0; i < repeatingEvents.length; i++) {
            if(repeatingEvents[i].position == event.position && isOpenDialog) {
                selectIndex = i;
                vm.timeStart = repeatingEvents[i].start;
                vm.timeFinish = repeatingEvents[i].end;
                vm.dateStart = repeatingEvents[i].title.split(' ')[1];

                if(repeatingEvents[i].ranges[0].end == null) {
                    vm.dateFinish = "";
                    vm.radioValue = "never";
                } else {
                    vm.dateFinish = repeatingEvents[i].title.split(' ')[3];
                    vm.radioValue = "on";
                }

                angular.forEach(vm.checkDays, function(item) {
                    item.checked = false;
                });

                angular.forEach(event.dow, function(index) {
                    vm.checkDays[index].checked = true;
                })

                openDialog();    
                break;
            }
        }
    };

function alertOnResize(event, delta, revertFunc, jsEvent, ui, view) {
        for(var i in repeatingEvents) {
            if(repeatingEvents[i].position == event.position) {
                var timeFinish = event.end.format("HH:mm");
                if(timeFinish == "00:00") {
                    timeFinish = "24:00";
                }
                repeatingEvents[i].end = timeFinish;
                break;
            }
        }
        $("#calendar").fullCalendar("refetchEvents");
    };

function alertOnDrop(event, delta, revertFunc, jsEvent, ui, view) {
        for(var i in repeatingEvents) {
            if(repeatingEvents[i].position == event.position) {
                if(repeatingEvents[i].allDay || event.allDay) {
                    revertFunc();
                } else {
                    var timeStart = event.start.format("HH:mm");
                    var timeFinish = event.end.format("HH:mm");
                    var dateStart = repeatingEvents[i].ranges[0].start;
                    var dateFinish = repeatingEvents[i].ranges[0].end;
                    var oldTimeStart = repeatingEvents[i].start.split(':')[0]*3600 + repeatingEvents[i].start.split(':')[1]*60;
                    var newTimeStart = timeStart.split(':')[0]*3600 + timeStart.split(':')[1]*60;
                    var deltaHour = newTimeStart - oldTimeStart;
                    var deltaDay = (delta/1000 - deltaHour)/86400;
                    dateStart = new Date(dateStart);
                    dateStart.setDate(dateStart.getDate() + deltaDay);
                    dateStart = dateStart.toISOString();
                    var title;

                    if(dateFinish != null) {
                        dateFinish = new Date(dateFinish);
                        dateFinish.setDate(dateFinish.getDate() + deltaDay);
                        dateFinish = dateFinish.toISOString();
                        title = "From: " + moment(dateStart).format("DD/MM/YYYY") + " To: " + moment(dateFinish).format("DD/MM/YYYY");
                    } else {
                        title = "From: " + moment(dateStart).format("DD/MM/YYYY");
                    }

                    for(var j in event.dow) {
                        repeatingEvents[i].dow[j] = parseInt(repeatingEvents[i].dow[j]) + deltaDay;
                        if(repeatingEvents[i].dow[j] > 6) {
                            repeatingEvents[i].dow.splice(j, 1);
                        }
                    }

                    repeatingEvents[i].start = timeStart;
                    repeatingEvents[i].end = timeFinish;
                    repeatingEvents[i].ranges[0].start = dateStart;
                    repeatingEvents[i].ranges[0].end = dateFinish;
                    repeatingEvents[i].title = title;

                    if(timeFinish == "00:00") {
                        repeatingEvents[i].end = "24:00";
                    }
                    $("#calendar").fullCalendar("refetchEvents");
                }
                break;
            }
        }
    };

function eventRender(event, element, view) {
        var removeEvent = $("<i class='removeEvent icons8-delete pull-right'></i>");
        removeEvent.on("click", function() {
            isOpenDialog = false;
            vm.removeEvent(event);
        });
        element.find(".fc-content").prepend(removeEvent);

        var result;
        if(event.ranges[0].end == null) {
            result = (event.ranges.filter(function(range) {
                var startConvert = (new Date(event.start)).toISOString();
                return (event.start.isAfter(range.start) || startConvert == range.start);
            }).length) > 0;
        } else {
            result = (event.ranges.filter(function(range) {
                return (event.start.isBefore(range.end) && event.end.isAfter(range.start));
            }).length) > 0;
        }
        return result;
    };