2. PHPRunner General questions
  3. Calendar view in v11.1
This topic is locked

Calendar view in v11.1

 		8/6/2025 12:48:49 PM
PHPRunner General questions
C
 Chris Whitehead author

How can I dynamically change the calendar event colours in the events?
ChatGPT 8/6/2025

Yes, you can dynamically change the calendar event colors in PHPRunner based on certain criteria such as event type, status, or any other attributes you have in your database. Here's how you can do it:

  1. Identify the Event Data Structure: Ensure you have a field in your database that will determine the color of the event. This could be a category field or status field.


  2. Use the Before display Event: PHPRunner allows you to use events to manipulate data before it gets displayed. You can use the Before display event to set the color for each event.


  3. Add Custom Code:

    • Go to the Events section in PHPRunner.
    • Find the Before display event for your calendar.
    • Use the following sample code as a reference to dynamically set the color:

    // Assuming $event is your event object and you have a field 'event_type'
    switch($event["event_type"]) {
     case 'meeting':
     $event["color"] = '#FF5733'; // Red color for meetings
     break;
     case 'appointment':
     $event["color"] = '#33FF57'; // Green color for appointments
     break;
     case 'deadline':
     $event["color"] = '#3357FF'; // Blue color for deadlines
     break;
     default:
     $event["color"] = '#CCCCCC'; // Default gray color
     break;
    }

  4. Modify Your Calendar Settings: Ensure that your calendar is set up to read the color attribute for events. This typically involves ensuring that the calendar library you are using is configured to use this field.


  5. Test Your Implementation: Preview your application and check if the events display with the correct colors based on the logic you've implemented.



By following these steps, you should be able to dynamically change the event colors in your PHPRunner application. If you have specific conditions or fields you want to use for determining the colors, you can modify the switch statement accordingly.
C
 		Chris Whitehead author 8/6/2025

Sorry Mr Chat, that din't twerk, I'm open to other ideas if you have any, if not what about anyone else?

Dropped this into the calendar before display event, while it works, it's not ideal.

?>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log( 'page loaded' );

// Delay 1 second to give FullCalendar time to render
setTimeout(function() {

// take from a proxy or inject from the PHP prior to this code
const eventTypeColours = {
"Meeting": "#ED0707",
"Telephone Call": "#7900F2",
"Delivery": "#04FF00",
"Visit": "#F56600",
"Demo": "#001AFF",
"Quote": "#B300FF",
"Email": "#058703"
};

// loop through and update the background colours
document.querySelectorAll('.fc-event-title').forEach(function(titleElem) {

// get the event value and element which needs the colour updating
let text = titleElem.textContent.trim();
let eventElem = titleElem.closest('.fc-event');

console.log({ text: text });
console.log({ eventElem: eventElem });
console.log({ colour: eventTypeColours[text] });

// if the value exists in eventTypeColours
if (eventElem && eventTypeColours[text]) {
eventElem.style.backgroundColor = eventTypeColours[text];
}
});
}, 1000);
});
</script>
<?php
Sergey Kornilov admin 8/7/2025

Could you explain the complete scenario?

Colors are based on Category field values, changing category field will change the color as well. Just trying to understand how your scenario is different and what kind of API we can add to make this kind of change easier.