Как динамически назначить цвет событию FullCalendar

Question

Я пытаюсь реализовать функцию в демонстрационной версии с возможностью выбора FullCalendar, которая позволяет пользователю динамически изменять цвет каждого нового события календаря с помощью палитры цветов HTML.Пользователь должен иметь возможность выбрать уникальный цвет для каждого события.Например, в текущей настройке первое сгенерированное событие принимает любое значение цвета, выбранное в палитре цветов.Проблема, однако, заключается в том, что первое событие изменяется на любой цвет, выбранный для второго события.Вторые (и последующие) события должны иметь уникальные цвета.Я чувствую, что близок к этому, но застреваю.Предложения?

JS:

$(document).ready(function() {
  $("#calendar").fullCalendar({
    header: {
      left: "prev,next today",
      center: "title",
      right: "month,agendaWeek,agendaDay"
    },
    defaultView: "month",
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectHelper: false,
    editable: true,
    eventLimit: true, // allow "more" link when too many events

    select: function(start, end) {
      var title = prompt("Event Content:");
      var eventData;
      if (title) {
        eventData = {
          title: title,
          start: start,
          end: end
        };
        $("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
      }
      $("#calendar").fullCalendar("unselect");
    },

    eventRender: function(event, element) {
      element
        .find(".fc-content")
        .prepend("<span class='closeon material-icons'>&#xe5cd;</span>");
      element.find(".closeon").on("click", function() {
        $("#calendar").fullCalendar("removeEvents", event._id);
      });

      let color = $("#colorPicker").val();
      element.css("background-color", color);    
    },

    eventClick: function(calEvent, jsEvent) {
      var title = prompt("Edit Event Content:", calEvent.title);
      calEvent.title = title;
      $("#calendar").fullCalendar("updateEvent", calEvent);

    },    
  });
});

HTML:

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

<span><input type='color' id='colorPicker'></span>

CSS:

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

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

#wrap {
  width: 1100px;
  margin: 0 auto;
}

.closeon {
  border-radius: 5px;
}

зависимости:

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css

Answer 1

Вы можете установить цвет в обратном вызове select:

eventData = {
  title: title,
  start: start,
  end: end, 
  color: $("#colorPicker").val()
}

и избавиться от всего кода eventRender: function() и т. Д.Этот обратный вызов запускается для каждого события в календаре (даже если вы добавляете только одно новое событие, все они перерисовываются, потому что календарь должен иметь возможность изменять другие события, например, если есть перекрытие или что-то еще).Вот почему вы также видите изменение цвета на всех ранее созданных событиях.

PS В этой документации показано, как вы можете установить цвет при создании события (вместо того, чтобы возиться с HTML, который может в любом случае)быть ненадежным, поскольку события могут отображаться по-разному в разных обстоятельствах): https://fullcalendar.io/docs/event-object