Building on the new calendar events which Sergey added and described here Customise Calendar
I've managed to change the event colours on the fly. Selecting the types from an event_types table.
In the Calendar Before Display event, add this php.
### build the css for the types which had just id, type_details, type_bg_colour, type_text_colour
echo "<style>";
$template = ".fc-event.event-type-%s {
background-color: %s !important;
color: %s !important;
}\n";
$query = "SELECT * FROM event_types";
$rs = DB::Query( $query );
$event_types = [];
while( $data=$rs->fetchAssoc() ) {
echo sprintf( $template, strtolower($data['type_details']),$data['type_bg_colour'],$data['type_text_colour'] );
}
echo "</style>";
### get the event records with the type table so we can pass the data to the proxy, I've only selected the minimum fields but you can take all the event data
$query = 'SELECT
events.id,
type_details as type_name,
type_text_colour as textColor,
type_bg_colour as backgroundColor
FROM
events left join event_types on event_type_id=event_types.id';
$rs = DB::Query( $query );
$events = [];
while( $data=$rs->fetchAssoc() ) {
$events[$data['id']] = $data;
}
### pass the event data to the javascript
$pageObject->setProxyValue("events", $events);The in the Create Calendar event, add this Javascript.
// Get the events data
events = proxy['events'];
// Attach eventClassNames hook
settings.eventClassNames = function(arg) {
// Get the event data from the proxy events
event_data = events[arg.event.id];
// If this has a type assigned to the event, then use the type name for the class
if ( event_data.type_name ) {
// Sanitise for CSS (replace spaces with dashes)
return [ 'event-type-' + event_data.type_name.replace(/\s+/g, '-').toLowerCase() ];
}
return [];
};
return new FullCalendar.Calendar(calendarElement, settings);