在Fullcalendar中创建多日活动

时间:2017-09-18 11:50:49

标签: javascript jquery fullcalendar

我正在尝试使用fullcalendar创建日历应用程序。但我有一个具体的问题。

我想创建一个持续5天的事件 - 例如 - 。当我点击并拖动新创建的事件时,fullcalendar会给我这样的内容:

鼠标点击于08月10日08:00开始,鼠标点击于10月12日12:00结束。活动包括10月8日08:00至10月12日12:00之间的所有时间。这意味着我必须参加一个持续96小时的活动。你不能指望我参加五天的会议,对吧?

所以,我真正想要的是活动应该从08:00开始,并在所有五天的12:00结束。这意味着事件应该如下所示:

我是通过逐个创建所有事件来实现的。但是在我的应用程序中,由于各种原因,我禁用了一次添加两个或更多事件。此外,我希望我的客户能够立即创建类似的事件。

有没有办法在fullcalendar中执行此操作?

这是我的代码:

function initCalendar {
    if (!jQuery().fullCalendar) {
        return;
    }

    var date = new Date(),
        started,
        ended

    var header = {};

    var calendar = $('#calendar').fullCalendar({
        allDaySlot: false,
        eventOverlap: false,
        selectOvetlap: false,
        header: header,
        selectable: true,
        selectHelper: true,
        defaultView: 'agendaWeek',

        select: function (start, end, allDay) {
            $('#fc_create').click();
            var dateStart = start; 
            var dateEnd = end;

            $(".antosubmit").on("click", function() {
                var title = $("#reservation-title").val();

                if (title) {
                    var event = {
                        //minTime: "08:00:00"
                        //maxTime: "21:00:00"
                        editable: true,
                        title: title,
                        start: dateStart,
                        end: dateEnd,
                        allDay: false
                    }

                    calendar.fullCalendar('renderEvent', event, true);
                    calendar.fullCalendar('unselect');
                    #('.antoclose').click();

                    return false;
                }
                else {
                    ////alert here
                }
            })
        },

        eventClick: function (calEvent, jsEvent, view)
        {
            var selectedEditable = calEvent.editable;

            if (selectedEditable) {
                $('fc_create').click();
                $("#reservation-title").val(calEvent.title);

                $(.antoUpdate).on("click", function() {
                    var title = $("#reservation-title").val();

                    if (title) {
                        calEvent.title = $("#reservation-title").val();
                        #('.antoclose').click();
                    }
                    else {
                        ////alert here
                    }
                });
            }
            else
            {
                $('fc_edit').click();
                $("#title2").val(calEvent.title);
            }

            calendar.fullCalendar('unselect');
        },

        events: [{
            ////add events here...
        }]
    })
}

0 个答案:

没有答案