2. PHPRunner Tips and Tricks
  3. Dynamic Calendar Event Colours
This topic is locked

Dynamic Calendar Event Colours

 		9/15/2025 13:19:16
PHPRunner Tips and Tricks
C
 Chris Whitehead author

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);
Sergey Kornilov admin 9/15/2025

Thank you for sharing, this is a really cool trick!
C
 		Chris Whitehead author 9/16/2025

I noticed there's a console error when adding and needs a little more tweaking so the calendar refreshes after the model closes but it's a start.