Search code examples
javascripthtmlfullcalendarfullcalendar-schedulerfullcalendar-4

Duplicating event in FullCalendar Scheduler 4.0.1 using calendar.AddEvent

I'm attempting to add functionality to my full calendar app where when a user clicks on an event, it will duplicate it (to be moved around later on).

The problem is that the duplicated event, while existing, does not display.

At first I thought it might be a resourceID issue; however, I quelled that fear by adding the resource ID property. I'm really not sure what the problem is at this point as both elements are functionally the same (although they are made with differing ID's).

An example of my code is (with the duplication block is marked //Duplication):

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<link href='../packages/list/main.css' rel='stylesheet' />
<link href='../packages/timeline/main.css' rel='stylesheet' />
<link href='../packages/resource-timeline/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages/list/main.js'></script>
<script src='../packages/timeline/main.js'></script>
<script src='../packages/resource-common/main.js'></script>
<script src='../packages/resource-timeline/main.js'></script>
<script>

 document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ["resourceTimeline"],
    now: "2019-03-19",
    header: {
      left: "today prev,next",
      center: "title",
      right: "resourceTimelineDay,resourceTimelineWeek"
    },
    aspectRatio: 1.6,
    defaultView: "resourceTimelineDay",
    resources: [
      { id: "a", title: "Auditorium A" },
      { id: "b", title: "Auditorium B" }
    ],

    events: [
      {
        id: "1",
        resourceId: "a",
        start: "2019-03-19T08:00:00",
        end: "2019-03-07T07:00:00",
        title: "event 1"
      },
      {
        id: "2",
        resourceId: "b",
        start: "2019-03-19T10:00:00",
        end: "2019-03-07T22:00:00",
        title: "event 2"
      }
    ],

    // Duplication
    eventClick: function(arg) {
      dupedEvent = calendar.addEvent({
        title: arg.event.title,
        start: arg.event.start,
        end: arg.event.end,
        id: Math.random(),
        resourceIds: arg.event.resourceIds
      });

      console.log("Orginial: ", arg.event);
      console.log("Duplicate: ", dupedEvent)
    }
  });

  calendar.render();
});


</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 50px auto;
  }

</style>
</head>
<body>

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

</body>
</html>

A working codepen if anyone would like to take a look: https://codepen.io/anon/pen/JzBwwj?editors=0010

Solution

  • If you take a look at the objects you are logging the duplicate has no resourceIds, if you try logging arg.event.resourceIds it is undefined so isn't being set on the duplicate. That the reason they aren't being rendered. They aren't associated to a resource.

    You can get the resources from the event using getResources, a method on the event object. That would be the correct way to do it, however I did manage to get it to render setting the resourceIds from arg.event._def.resourceIds.

    Suggested solution:

      dupedEvent = calendar.addEvent({
    title: arg.event.title,
    start: arg.event.start,
    end: arg.event.end,
    id: Math.random(),
    resourceIds: arg.event.getResources().map(resource => resource.id)
  });
}