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()等代码。该回调针对日历上的每个事件运行（即使您仅添加一个新事件，也都将重新呈现它们，因为日历必须能够更改其他事件，例如，如果有重叠或其他情况）。这就是为什么您还会在所有先前创建的事件中看到颜色变化的原因。

P.S。本文档介绍了如何在创建事件时设置颜色（而不是弄乱HTML，因为事件可以在不同的情况下以不同的方式呈现，所以这总是不可靠的）：https://fullcalendar.io/docs/event-object

Answer 2

当用户点击事件时，您可以通过两种方式更改颜色。

如图所示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';
  }

});

在日历功能之外，您可以执行类似的操作。 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);

如何为FullCalendar事件动态分配颜色

2 个答案: