Question

具有allDay已关闭事件的Fullcalendar调度程序

如果有一种方法，当有一个allDay事件时，我可以通过某种块屏幕或视图更改或更换整个视图。好处是它会锁定用户的编辑，但它（可以说）是一个更好的视图，对于一整天的活动，而不是只显示顶部的东西。因此，我们不会在第一张图片中看到，而是从第二张图片中获取视图。

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

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

<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);
    },
});

思考？这样的事情甚至可能吗？

提前致谢。

Answer 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>

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

具有allDay关闭事件的Fullcalendar调度程序

1 个答案: