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:

.9.0/fullcalendar.min.js
.3.1/jquery.min.js
.12.1/jquery-ui.min.js
.js/2.22.2/moment.min.js
.9.0/fullcalendar.min.css

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./ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js
https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://cdnjs.cloudflare./ajax/libs/moment.js/2.22.2/moment.min.js
https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css

• javascript
• jquery
• html
• fullcalendar

Share Improve this question Follow asked Dec 17, 2018 at 5:56 JS_is_awesome18JS_is_awesome18 1,77788 gold badges4141 silver badges7979 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

you can do this from Controller. here i am defining 2 things . 1) color 2) className.

If you want change only background-color then you can do it from 'color'=>'red' or if you want to change something then you can define className=>'eventHoiday'

After that no need to change in your JS code.

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

When a user clicks on an event you can change the color in two ways.

1. as seen here 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. Outside of the calendar function you can do something like this. https://fullcalendar.io/docs/Calendar-getEventById set the property you want https://fullcalendar.io/docs/Event-setProp

        const event = calendar.getEventById(eventId);

        event.setProp("color", newEventColor);

To Make all the other events a random color, could try something like this

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