How to implement recurring event with all day set to true?

问题

I am facing an issue while implementing fullcalendar. I used fullcalendar plugin for allowing the user to add task and events and with the respective option, all day, recurring every week, every day, every month and every year.

For the above-mentioned functionality, I referred two SO post

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

While creating an all-day event with recurring every week I am facing an issue which was addressed in Issue #4173 for which I have created a demo here I also checked v4 and I found it will work for me a demo in v4 here, but I have some other concern here, I am working on a live website and there I can't revamp and opt to implement v4 it is a complex system need to look into all aspect before opting to revamp so is there any hack to implement the same in v3 is there anything which I can manually edit in the locally stored file or patch it for fixing this?

$(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>

Thank you

回答1:

This issue was highlighted twice in v3 with tickets #4173 and #4399 and now it is fixed in v4 using a separate plugin for recurrence RRule. In v4 you can replicate the following event like this

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

here is the fiddle

来源：https://stackoverflow.com/questions/53608057/how-to-implement-recurring-event-with-all-day-set-to-true

标签

javascript

jquery

fullcalendar