如何為 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/文檔/事件對象

Answer 2

當用戶單擊事件時，您可以通過兩種方式更改顏色。

1. 如此處所示https://fullcalendar.io/docs/eventClick

var calendar = new Calendar(calendarEl, {

  eventClick: function(info) {
    alert('Event: ' + info.event.title);
    alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
    alert('View: ' + info.view.type);

    // change the border color just for fun
    info.el.style.borderColor = 'red';
  }

});

2. 在日歷功能之外，您可以執行類似的操作。 https://fullcalendar.io/docs/Calendar-getEventById設置你想要的屬性https://fullcalendar.io/docs/Event-setProp

        const event = calendar.getEventById(eventId);

        event.setProp("color", newEventColor);

要使所有其他事件成為隨機顏色，可以嘗試這樣的操作

        
        calendar.removeAllEvents();
        const newEventsWithRandomColor = [];

        for(event of allOtherEvents){

            event = {
                id: event.id,
                title: event.title,
                start: event.start,
                allDay : true,
                color : randomColorFunction();
            
            };
            newEventsWithRandomColor.push(event);
        }

        fullCalendar.addEventSource(newEventsWithRandomColor);

Answer 3

您可以從Controller執行此操作。 我在這里定義兩件事。 1）顏色2）類名。

如果您只想更改背景顏色，那么您可以從'color'=>'red'或者如果您想更改某些內容，則可以定義className=>'eventHoiday'

之后無需更改您的 JS 代碼。

 $events[] = array(
                    'id' => $driverBooking->id,
                    'booking_id'=> $driverBooking->id,
                    'color' => $color,     // an optional value !
                   'className'=> 'EventHoliday'  // an optional value !
                );