2. PHPRunner Tips and Tricks
  3. Customizing Calendar appearance in version 11.1
This topic is locked

Customizing Calendar appearance in version 11.1

 		9/14/2025 11:55:52 AM
PHPRunner Tips and Tricks
Sergey Kornilov admin

This article applies to both PHPRunner and ASPRunner.NET. The latest update of version 11.1 introduced Javascript Calendar Create event where you can modify Calendar object settings and appearance. The code needs to be written in Javascript and the full manual of available customizations can be found at https://fullcalendar.io/docs

Here is a quick example of such a customization.

// set business day and hours
settings.businessHours = {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Friday
startTime: '10:00', // a start time (10am in this example)
endTime: '18:00', // an end time (6pm in this example)
};

// set initial view to Week view
settings.initialView = 'timeGridWeek';

// here is what will appear above Calendar. Note the custom button in the middle.
settings.headerToolbar = {
start: 'title', // will normally be on the left. if RTL, will be on the right
center: 'myCustomButton',
end: 'today prev,next' // will normally be on the right. if RTL, will be on the left
}

// custom button(s) definition
settings.customButtons = {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
}

return new FullCalendar.Calendar( calendarElement, settings );

And here is how it looks in the generated application.

img alt