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 picke

Solution 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

Solution 2:

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 = newCalendar(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

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

Solution 3:

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