如何为FullCalendar事件动态分配颜色 [英] How to dynamically assign color to FullCalendar event

问题描述

我正在尝试在FullCalendar可选演示中实现一项功能，该功能使用户可以使用HTML颜色选择器动态更改每个新日历事件的颜色.用户应该能够为每个事件选择唯一的颜色.例如，在当前设置中，生成的第一个事件采用在颜色选择器中选择的任何颜色值.但是，问题在于，第一个事件会更改为第二个事件选择的任何颜色.第二个(和后续)事件都应具有唯一的颜色.我觉得我对此很接近，但是被卡住了.有建议吗?

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

依赖项:

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

推荐答案

您可以在 select 回调中设置颜色:

You can set the color in the select callback:

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

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

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.本文档向您展示了如何在创建事件时设置颜色(而不是弄乱HTML，因为事件可以在不同的情况下以不同的方式呈现，所以这总是不可靠的):

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

这篇关于如何为FullCalendar事件动态分配颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！