Дублирование события в FullCalendar Scheduler 4.0.1 с использованием calendar.AddEvent - PullRequest
Новая
       17

Дублирование события в FullCalendar Scheduler 4.0.1 с использованием calendar.AddEvent

0 голосов
/ 19 марта 2019

Я пытаюсь добавить функциональность в мое полное приложение календаря, где, когда пользователь нажимает на событие, оно дублирует его (будет перемещено позже).

Проблема в том, что дублированное событие, хотя и существует, не отображается.

Сначала я подумал, что это может быть resourceID проблема; однако я подавил этот страх, добавив свойство идентификатора ресурса. Я действительно не уверен, в чем проблема на данный момент, поскольку оба элемента функционально одинаковы (хотя они сделаны с разными идентификаторами).

Пример моего кода (с блоком дублирования помечен //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>

Рабочий кодекс, если кто-нибудь захочет взглянуть: https://codepen.io/anon/pen/JzBwwj?editors=0010

1 Ответ

1 голос
/ 19 марта 2019

Если вы посмотрите на объекты, которые вы регистрируете, у дубликата не будет идентификатора ресурса, если вы попытаетесь зарегистрировать arg.event.resourceIds, он не будет определен, поэтому не будет установлен для дубликата. Вот причина, по которой они не оказываются. Они не связаны с ресурсом.

Вы можете получить ресурсы из события, используя getResources , метод объекта события. Это был бы правильный способ сделать это, однако мне удалось получить его для рендеринга, задавая resourceIds из arg.event._def.resourceIds.

Предлагаемое решение: 

  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)
  });
}
...