如何将整天设置为true的重复活动?

时间:2018-12-04 07:48:47

标签: javascript jquery fullcalendar

在实现全日历时,我遇到了一个问题。我使用fullcalendar插件来允许用户全天,每周,每天,每月和每年重复添加任务和事件以及相应的选项。

对于上述功能,我提到了两个SO post

  1. Recurring Events in Full Calendar (For repeating weekly)
  2. Repeat full calendar events daily, monthly and yearly.

在创建一个每周重复的全天活动时,我遇到了Issue #4173中已解决的问题,为此我创建了一个演示here 我还检查了v4,发现它可以在v4 here中为我演示,但是我在这里还有其他问题,我在一个在线网站上工作,在那里我无法修改并选择实现v4是一个复杂的系统,需要在选择进行改版之前从各个方面进行研究,所以在v3中是否有实现相同目的的黑客,我可以在本地存储的文件中手动对其进行编辑或修补以解决此问题吗?

$(function() {
  let defaultEvents = [{
    id: 230,
    title: 'all day with every week (range)',
    start: '00:00:00',
    end: '23:59:59',
    dow: [2],
    allDay: true,
    ranges: [{
      start: "2018-12-10",
      end: "2018-12-26"
    }]
  }, ];
  $('#calendar').fullCalendar({
    defaultView: 'month',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaWeek,agendaDay'
    },
    eventSources: [defaultEvents],
    eventRender: function(event, element, view) {
      if (event.ranges) {
        console.log(event.ranges)
        return (event.ranges.filter(function(range) {
          return (event.start.isBefore(range.end) &&
            event.end.isAfter(range.start));
        }).length) > 0;
      }
    }
  });

});
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>

<div id='calendar'></div>

谢谢

1 个答案:

答案 0 :(得分:2)

此问题在v3中已用票证#4173#4399两次突出显示,现在已在v4中使用单独的循环规则插件进行了修复。在v4中,您可以像这样复制以下事件

{
       title: 'event with every week (all day)',
       allDay: true,
       rrule: {
          freq: 'weekly',
          dtstart: '2019-04-05',
          until: '2021-04-05'
       },
}

这是fiddle