具有 allDay 关闭事件的全日历调度程序答案

【问题标题】：Fullcalendar scheduler with allDay closed events具有 allDay 关闭事件的全日历调度程序
【发布时间】：2017-06-20 12:51:07
【问题描述】：

具有全天关闭事件的全日历调度程序

很好奇，如果有一种方法，当有一个全天事件时，我可以用某种 block 屏幕或视图更改或交换整个视图。好处是它会锁定用户的编辑，而且它（可以说）是一个更好的全天活动视图，而不是仅仅在顶部显示一些东西。因此，我们会从第二张图片中获得视图，而不是我们在第一张图片中看到的内容。

第三张图片只是一个常规视图，供参考。

这是我的调度程序视图中的代码：

<div class="tab-pane" id="tabSchedule">
  <div id="roomCalendar" class="calendar" ng-model="eventSources"></div>
</div>

这是我的日历配置：

$('#roomCalendar').fullCalendar({
    defaultView: 'agendaDay',
    eventClick: $scope.eventClick,
    editable: true,
    eventOverlap: false,
    selectable: true,
    selectHelper: true,
    select: $scope.dayClick,
    slotDuration : '00:15:00',
    slotEventOverlap: false,
    allDaySlot: true,
    resources: [{ id: 'room1', title: 'room1', eventColor: "#71A3C1"},
      { id: 'room2', title: 'room2', eventColor: "#45A43D" },
      { id: 'room3', title: 'room3', eventColor: "#FABE3A" },
      { id: 'room4', title: 'room4', eventColor: "#F8303E" }],
    events: function (start, end, timezone, callback) {
      callback($scope.eventSources);
    },
});

想法？这样的事情有可能吗？

提前致谢。

【问题讨论】：

标签： jquery angularjs fullcalendar fullcalendar-scheduler

【解决方案1】：

我找到了一个可以完成我所追求的工作的解决方法。仍在进行中...但我正在使用 eventAfterRender 到达那里并检查活动的 allDay 状态。

eventAfterRender: function (event, element, view) {
    if (event.allDay !== false) {
        $scope.closedDayEventOverlay(event);
    }
}
.....

为了在没有任何事件的日子清除覆盖，我们使用相同的函数但传递一个空事件。

events: function (start, end, timezone, callback) {
    $scope.closedDayEventOverlay(null);
    callback($scope.eventSources);
},
.....

然后显示/隐藏叠加层：

$scope.closedDayEventOverlay = function (event) {
    if (event && event.allDay) {
        $("#closedDayEventOverlay").css('display', 'block');
        $("#closedDayEventDetails").text(event.title);
    } else {
        $("#closedDayEventOverlay").css('display', 'none');
    }
};

还有观点：

<div class="tab-pane" id="tabSchedule">
  <div id="closedDayEventOverlay">
    <div id="closedDayEvent">
      <div id="closedDayEventTitle">Closed:</div>
      <div id="closedDayEventDetails"></div>
  </div>
  <div id="roomCalendar" class="calendar" ng-model="eventSources"></div>
</div>

这是最终结果。显然需要应用一些样式和定位，但我认为应该这样做。无论如何，如果其他人有其他/更好的解决方案，我很乐意听到。

【讨论】：