How to dynamically assign color to FullCalendar event

问题

I am attempting to implement a feature in a FullCalendar selectable demo that enables the user to dynamically change the color of each new calendar event using the HTML color picker. The user should be able to select a unique color for each event. In the current setup, for example, the first event generated takes whatever color value is selected in color picker. The issue, however, is that the first event changes to whatever color is selected for the second event. The second (and subsequent) events(s) should all have unique colors. I feel like I am close on this, but am getting stuck. Suggestions?

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

dependencies:

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

回答1:

You can set the color in the select callback:

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

and get rid of all the eventRender: function() etc code. That callback runs for every event on the calendar (even if you only add one new event, they all get re-rendered because the calendar has to be able change other events e.g. if there's an overlap or something). That's why you're seeing the colour change on all previously created events as well.

P.S. This documentation shows you how you can set the colour when creating an event, (rather than messing with the HTML, which can anyway be unreliable since events can be rendered in different ways in different circumstances): https://fullcalendar.io/docs/event-object

来源：https://stackoverflow.com/questions/53809647/how-to-dynamically-assign-color-to-fullcalendar-event

标签

javascript

jquery

html

fullcalendar