针对重复事件的基于条件的事件呈现

时间:2017-09-20 15:08:59

标签: fullcalendar

我们需要根据特定日期的其他事件来操纵事件呈现。那么有没有可用于获取一天所有事件的选项,以便我们可以根据事件数据中的条件合并所有事件或仅使用第一个事件或仅使用第二个事件特定日期(意味着合并所有事件或排除第一个事件&包括第二个事件,或包括第一个事件&排除第二个事件)。我们看起来像是一天渲染,但回调具有该日期的事件数据。

请参阅下面的重复行为描述的示例事件

[{
    "title": "Recurring on all days",
    "dow": [0, 1, 2, 3, 4, 5, 6 ],
    "ranges": {
      "start": "2017-09-18",
      "end": "2017-09-25"
    },
    "recurringBehaviourType": 1,
    "recurringBehaviour": "Merge this event with future conflicting events. This is working fine=> oe. this #event1 merges with #event2.",
    "color": "Blue",
    "start": "08:00",
    "end": "17:00"
  },
  {
    "title": "Non Recurring [Day Schedule]",
    "ranges": {
      "start": "2017-09-23",
      "end": "2017-09-23"
    },
    "color": "Red",
    "start": "08:00",
    "end": "17:00"
  },
  {
    "title": "Recurring on all days",
    "dow": [0, 1, 2, 3, 4, 5, 6 ],
    "recurringBehaviourType": 2,
    "recurringBehaviour": "Use this event instead of future conflicting events. ie. #event4 no need to merge with this #event3. Here need to ignore #event4.",
    "ranges": {
      "start": "2017-09-01",
      "end": "2017-09-08"
    },
    "color": "Blue",
    "start": "08:00",
    "end": "17:00"
  },
  {
    "title": "Non Recurring [Day Schedule]",
    "ranges": {
      "start": "2017-09-06",
      "end": "2017-09-06"
    },
    "color": "Red",
    "start": "08:00",
    "end": "17:00"
  },
  {
    "title": "Recurring on all days",
    "dow": [0, 1, 2, 3, 4, 5, 6 ],
    "ranges": {
      "start": "2017-09-10",
      "end": "2017-09-16"
    },
    "recurringBehaviourType": 3,
    "recurringBehaviour": "Use future conflicting events instead of this eventie. ie. This #event5 no need to merge with #event6. Here need to ignore this #event5.",
    "color": "Blue",
    "start": "08:00",
    "end": "17:00"
  },
  {
    "title": "Non Recurring [Day Schedule]",
    "ranges": {
      "start": "2017-09-12",
      "end": "2017-09-12"
    },
    "color": "Red",
    "start": "08:00",
    "end": "17:00"
  },
 ]

我们很想知道是否有解决方案来满足我们的要求。

1 个答案:

答案 0 :(得分:2)

您可以使用eventRender()回调向活动添加CSS类或数据属性,包括CSS,以便在您不想显示它们时隐藏它们。

然后,一旦使用您的类/数据属性呈现所有事件,您就可以使用eventAfterAllRender()回调来使用这些类/数据属性查找和检查它们。然后,您可以更新事件' CSS,或添加和显示新元素。

Here's an example使用JS来显示任何特定日期的事件总数,而不是实际事件。它应该让你开始。