javascript - FullCalendar:我可以获得与 EventClick 坐标相关的开始时间吗？

Question

我正在使用 FullCalendar 编写约会安排模块。因此，主要目标是利用两种类型的事件:

• 约会——实际安排的约会
• Ava​​ilable -- 对于一个可用的时间段

我修改了 FullCalendar，使 Appointment 类型事件呈现某种颜色，而 Available 类型事件呈现另一种颜色。

主要目标是让某人能够
- 查看可用的时间段
- 选择全部或部分时间段来安排约会类型的事件
- 禁止重叠约会的能力
- 用户在可用时间段外点击时什么都不做

首先呈现 Available 事件，然后最后呈现 Appointment 类型事件。
我修改了 fullcalendar，以便重叠事件不会并排显示 - 而是约会事件​​位于可用事件之上。

在 eventClick 内部，我首先检查事件类型。如果它是约会事件​​，那么我只想编辑选定的约会事件。

如果它是可用事件，那么我想创建一个新的约会类型事件。

如果只是dayClick事件，则忽略

最初，我会调用函数:Select 上的 CreateEvent
并调用 UpdateClick on eventClick
像这样:

select : CreateEvent,
eventClick : UpdateClick,

这些函数会弹出一个对话框，他们可以在其中添加或编辑事件。
因为我只希望他们能够在现有的可用事件槽中安排约会，所以我想也许我可以像下面这样调用相同的过程:

eventClick: function(calEvent, jsEvent, view) {

if (calEvent.type=='AVAILABLE') {
 CreateEvent;      // schedule new appt.
} else if (calEvent.type=='APPOINTMENT') {

 UpdateClick;   // edit existing appt.
}

该代码的问题在于例程:CreateEvent 需要开始和结束时间。

    function CreateEvent(start, end, allDay) {
 $('#calendar').fullCalendar('unselect');
 var id = $(formStart + formEnd);

 $(id).dialog( {
  title : 'Create',
  modal : true,
  autoOpen : true,
  width : "340px",
  resizable : false,
  close : function(event, ui) {
   $(id).html('');
  },
  buttons : {
   "Ok" : function() {
    title = document.getElementById('titleId').value;

    $(id).dialog("close");
    ev = {
     title : title,
     start : start.getTime() / 1000,
     end : end.getTime() / 1000,
     allDay : allDay
    };
    if (!title) {
     return;
    }
    serverSave(ev);
   },
   "Cancel" : function() {
    $(id).dialog("close");
   }
  }
 });}

我不想使用 Event Start 和 Event End，因为那将是完整的可用时间段。在安排约会时，他们只能使用部分可用时间段。

那么，你知道如何将实际的鼠标指针Y坐标转换为约会的开始时间吗？

和/或

您是否看到使用 FullCalendar 处理此类约会安排的更简单方法？

谢谢

Answer 1

我知道 jsEvent 包含很多信息，包括日历槽内点击事件的坐标。 (参见 eventClick documentation about PageX & pageY)其中讨论了坐标。

想到的另一个解决方案是切换到日 View ，这样可以更轻松地选择/查看可用时间。这种切换甚至可以通过模式类型的弹出窗口来处理。

希望对您有所帮助。