Question

我使用eventOverlap: false,和selectOverlap: false,来阻止用户重叠事件。但是，我试图阻止用户重叠现有事件。

在我的完整日历中，用户可以单击某个事件，这会打开一个弹出对话框，并允许用户更新所选事件的日期/时间。但是，用户可以选择已预订活动的日期/时间。因此，我想对“保存”按钮进行验证，该按钮在进行任何更改之前检查更新的日期/时间是否有事件。这两个屏幕截图以图形方式显示此问题。 1. Shows that event time is being updated。 2. Shows the event is overlapping after it has been updated

var events = []; //global array where all the events are stored

function FetchEventAndRenderCalendar() {
//fetch info from database and add it to the events array
events = [];
$.ajax({
    type: "GET",
    url: "/SessionScheduler/GetEvents",
    success: function (data) {
    $.each(data, function (i, v) {    
         events.push({
             id: v.Id,
             title: v.Title,
             description: v.Description,
             start: moment(v.StartDate),
             end: moment(v.EndDate),
             tutorName: v.TutorName,
             color: v.ThemeColour
            });
      })
     //then display the calendar with the events
      GenerateCalender(events);
   },
   error: function (error) {
       alert('failed');
     }
  })
}

这是我想要进行验证检查的保存按钮。 I have looked at this solution but this didn't work for me

$('#btnSave').click(function () {
                    //validation
                    var selectedStartDate = moment(document.getElementById('txtStart').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
                    var selectedEndDate = moment(document.getElementById('txtEnd').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
                    if (selectedStartDate > selectedEndDate) {
                        alert('Invalid end date');
                        return;
                    }

                    if (selectedStartDate.getTime() == selectedEndDate.getTime()) {
                        alert('Start/End dates can not be the same');
                        return;
                    }

                    var data = {
                        Id: $('#hdEventID').val(),
                        Title: $('#txtTitle').val(),
                        StartDate: $('#txtStart').val(),
                        EndDate: $('#txtEnd').val(),
                        Description: $('#txtDescription').val(),
                        TutorName: $('#txtTutorName').val(),
                        ThemeColour: $('#ddThemeColour').val()
                    }
                    SaveEvent(data);
                })

SaveEvent功能：保存数据

        function SaveEvent(data) {
            if (selectedEvent != null && confirm("Are you sure?")) {
                $.ajax({
                    type: "POST",
                    url: '/SessionScheduler/SaveEvent',
                    data: data,
                    success: function (data) {
                        if (data.status) {
                            //refresh the calendar if the status is true else its failed
                            FetchEventAndRenderCalendar();
                            $('#myModalSave').modal('hide'); //hide modal dialog pop window
                        }
                    },
                    error: function () {
                        alert('Failed');
                    }
                })
            }
        }

Answer 1

我对这个问题进行了一些搜索。

每次，他们从FC内存中获取所有事件，并迭代它们，以搜索冲突时间。

不幸的是，没有简单的解决方案。

我的建议：

您应该在每次修改之前进行ajax调用，服务器检查冲突（如果您将事件存储在服务器端）
如果您的服务器没有存储您的事件，那么您必须迭代客户端中的所有事件，以便发现冲突。

Answer 2

此功能将检查传递的事件是否与日历上当前显示的任何其他事件重叠。

请注意，这取决于具有唯一id属性的事件，因此它不会自行检查。它本质上也不能检查当前未在日历上显示的任何事件，因为fullCalendar不会从其clientEvents方法返回那些事件。在接受对数据库的修改之前，您应该再次在服务器端进行检查。

//check whether or not the calendar event passed in overlaps with an existing event in the current (client-side) calendar data
//the first parameter should be the event which is being tested
//the second parameter should be a jQuery object wrapping the calendar HTML element
function isCalendarEventOverlapping(event) 
{
    var evts = cal.fullCalendar('clientEvents');

    for (i in evts) 
    {
        if (evts[i].id != event.id)
        {
            if (event.start.isBefore(evts[i].end) && event.end.isAfter(evts[i].start))
            {
                return true;
            }
        }
    }
    return false;
}

在完整日历中更新现有事件时如何防止事件重叠？

2 个答案: