FullCalendar recurring events create duplicates

杀马特。学长 韩版系。学妹 提交于 2020-02-24 12:17:07

问题


I am implementing a calendar for my new website I retrieve events from a BackEnd application and show result in a modal using fullcalendar. I also use recurring feature from fullcalendar (https://fullcalendar.io/docs/recurring-events) to facilitate the use of my calendar.

Here something strange happened, When the user creates a recurring event on Sunday it is created twice with different dates whereas it works like a charm on the other days.

Here is a simplify version of my code :

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

<div class="modal fade" id="add-event">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>New Event</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="Eventname">Event Name</label>
            <input type="text" class="form-control" id="event-name" placeholder="Enter event name">
          </div>
          <div class="form-group">
            <div class='input-group date' id='event-start' style="margin-top: 15px">
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
            <div class='input-group date' id='event-end' style="margin-top: 15px">
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
          <div class="checkbox">
            <label><input id="event-repeat"type="checkbox" value="" checked>Repeat Event ?</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="button-delete" type="button" class="btn btn-success btn-lg" onclick="AddEvent()">OK</button>
        <button type="button" class="btn btn-danger btn-lg dismiss" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div> 

and javascript :

var configCalendar;

var calendarEl = document.getElementById('calendar');
configCalendar = new FullCalendar.Calendar(calendarEl, {
  editable:true,
  height: 'parent',
  contentHeight:'100%',
  handleWindwoResize:true,
  plugins: ['interaction','dayGrid','timeGrid', 'list'],
  defaultView: 'timeGridWeek',
  minTime: '00:00:00',
  slotDuration: '02:00:00',
  scrollTime : '08:00:00',
  firstDay: 1,
  columnHeaderFormat:{
    weekday:'long',
    day:'numeric',
    month:'long'
  },
  eventClick : function(info){
    $("#startTime").html(CalendarDate2String(info.event.start));
    $("#endTime").html(CalendarDate2String(info.event.end));
    $("#name").val(info.event.title);
    $("#id").text(info.event.id);
    $("#eventInfo").html(info.event.description);
    $("#eventLink").attr('href', info.event.url);
    $("#eventContent").modal('show');
  },
  eventDrop: function (info) {
    console.log("event drop");
    if (!copyKey) return;
    var length = configCalendar.getEvents.length;
    var eClone = {
      title: info.oldEvent.title,
      start: info.oldEvent.start,
      end: info.oldEvent.end,
      id: length + 1
    };
    configCalendar.addEvent(eClone);
    var newEvent = configCalendar.getEventById(info.event.id);
    var title = prompt("Enter a title for the new Event : ");
    newEvent.setProp('title', title);
  },
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit'
  },
  eventOverlap:false,
  selectOverlap:false,
  header: {
    left:   '',
    center: 'title',
    right:  'today prev,next'
  },
  selectable: true,
  select:function (info) {
    var event  = {
            id: configCalendar.getEvents().length + 1,
            daysOfWeek: [info.start.getDay()],
            startTime: moment(info.start).format('HH:mm'),
            endTime: moment(info.end).format('HH:mm')
        };
        configCalendar.addEvent(event);
    console.log(event);
    console.log(configCalendar.getEvents());
  }
});
configCalendar.render();

I made a JSfiddle : https://jsfiddle.net/Marech/0fdr5vq3/37/ Please create a event on any day (except sunday) by selecting on the calendar and check console to see the created events. Then create an event on Sunday and check again, the event is created twice.

Do you have any idea on how to fix this problem ? Do I use the fullcalendar API in a correct way ???

来源:https://stackoverflow.com/questions/57309795/fullcalendar-recurring-events-create-duplicates

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!