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日结束。

然后我们需要修改现有＆＃34; eventRender＆＃34;中的代码。回调以考虑这些额外信息并使用它来决定是否在任何特定日期将事件放入日历中：

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/）中显示事件

1 个答案: