如何根据每月、每周和每天的同一时间在日历 (https://fullcalendar.io/) 中显示事件

Question

我无法根据用户要求按每日、每周和每月显示日历事件。

在数据库 "repeating_options" 字段中，这意味着： 0：每日事件 1：每周活动 2: 每月活动

我们只有日期字段，这意味着从这个特定日期开始事件并显示无限年的事件，或者您可以考虑像 (31-12-2050) 这样的结束日期。

当我们使用这段代码实现时：

$('#calendar').fullCalendar({
    header: {
        left: 'agendaDay,agendaWeek,month',
        center: '',
        right: 'prev,title,next'
    },
    locale : lang_value,
    eventClick: function (event, jsEvent, view) {
       view_appointment_info(event.id);
    },
    eventRender: function(event, element, view){
        return (event.ranges.filter(function(range){
            return (event.start.isBefore(range.end) &&
                    event.end.isAfter(range.start));
        }).length)>0;
    },
});

当我使用 "eventRender" 时，每日和每周事件工作正常但每月不工作。每月事件显示每日基准，而不是每月显示一次。

样本JSON事件数据：

[
  {
    "dow":[0,1,2,3,4,5,6],
    "ranges":[{"start":"2018-01-20","end‌":"2050-12-31"}],
    "id‌":"1",
    "title":"Repea‌t Daily",
    "start":"15:54:00",
    "end":"16:24:00",
    "type":"",
    "color"‌:"#f6cacb"
  },
  {
    "dow":[‌"3"],
    "ranges":[{"sta‌rt":"2017-12-20","en‌d":"2050-12-31"}],
    "i‌d":"2",
    "title":"Repe‌at Weekly",
    "start":"17:05:00",
    "end":"17:35:00",
    "type":"","color‌":"#e73e97"
  },
  {
    "repea‌t":1,
    "ranges":[{"sta‌rt":"2018-01-01","en‌d":"2050-12-31"}],
    "i‌d":"3",
    "title":"Repe‌at Monthly",
    "start":"21:16:00",
    "end":"21:46:00",
    "type":"",
    "colo‌r":""
  }
]

那么你能建议我如何解决这个问题吗？

Answer 1

现在我们有一个约定的格式（根据评论）为每月重复事件提供足够的信息，我们可以编写一些代码来使日历显示每月事件。

为了未来读者的利益，我将在这里解释约定的格式。对于月度事件，除了已经自定义的 ranges 属性（已用于确定重复周期的开始和结束）之外，我们将添加两个额外的自定义属性：

1) "frequency": "m" - 这表示该事件应每月重复一次。

2) "dom": [1, 3, 5] - 该数组将包含重复事件的月中的第几天。在此示例中，事件将在每月的第 1 天、第 3 天和第 5 天重复，前提是这些日子在 ranges

中定义的日期范围内

所以每月重复一次的事件将如下所示：

{
  "dom": [5], //new property
  "frequency": "m", //new property
  "ranges": [{
    "start": "2018-01-05",
    "end": "2050-12-31"
  }],
  "id": "3",
  "title": "Repeat Monthly",
  "start": "21:16:00",
  "end": "21:46:00",
  "type": "",
  "color": ""
}

此活动设计为每月 5 日在 21:16 和 21:46 之间重复。此模式将从 2018 年 1 月 5 日开始，到 2050 年 12 月 31 日结束。

然后，我们需要修改现有 "eventRender" 回调中的代码，以考虑到这些额外信息，并使用它来决定是否在任何给定日期将事件添加到日历中：

eventRender: function(event, element, view) {
  //check if this instance of the event (one per day is generated for events with only time in their start/end properties) is within any of the ranges defined for it:
  if ((event.ranges.filter(function(range) {
      return (event.start.isBefore(range.end) &&
        event.end.isAfter(range.start));
    }).length) > 0) {
    if (event.frequency == "m") { //check whether repetition is monthly
      return ($.inArray(event.start.date(), event.dom) > -1); //show the event if the date of the month is in the defined days of the month for this event
    } else {

      return true;
    }
  } else {
    return false;
  };
},

N.B。原始代码已经通过 ranges 和 dow 属性处理每日和每周重复，只是缺少每月重复的数据和功能。

有关工作演示，请参阅 http://jsfiddle.net/sbxpv25p/173/。

如何根据每月、每周和每天的同一时间在日历 (https://fullcalendar.io/) 中显示事件

How to display events in Calendar (https://fullcalendar.io/) base on monthly, weekly and daily same time

jquery

fullcalendar

fullcalendar-scheduler