Customize the core Calendar block time format

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Feb 11, 2018

The default time format for the core Calendar block depends on the locale, but you can customize it using a custom block template. In the custom block template you can add a timeFormat property option with the time format you prefer.

Steps to customize the default calendar time format:

  • copy view.php
    concrete\blocks\calendar\view.php
  • navigate to application\blocks and create a folder called "calendar"
    application\blocks\calendar
  • inside the "calendar" folder, create a folder called "templates"
    application\blocks\calendar\templates
  • paste view.php into the "templates" folder
    application\blocks\calendar\templates\view.php
  • rename view.php to "custom_time_format.php"
    application\blocks\calendar\templates\custom_time_format.php
  • open custom_time_format.php and look for the .fullCalendar() method call
  • directly below the .fullCalendar() method call, paste in the timeFormat: 'hh:mma', option and value
  • after pasting the timeFormat option and value, the top portion of the .fullCalendar() method call should look like this

    $('div[data-calendar=<?=$bID?>]').fullCalendar({
        timeFormat: 'hh:mma',
        header: {
    
  • you can now apply the "Custom Time Format" custom block template to your Calendar block to display the custom time

Example time format values:

timeFormat: 'H(:mm)', // 22:30 or 23  
timeFormat: 'h(:mm) t', // 10:30 p or 11 p  
timeFormat: 'h(:mm)t', // 10:30p or 11p  
timeFormat: 'h:mm', // 10:30 or 11:00  
timeFormat: 'hh:mma', // 10:30pm or 11:00pm  
timeFormat: 'hh:mm a', // 10:30 pm or 11:00 pm  
timeFormat: 'hh:mmA', // 10:30PM or 11:00PM  
timeFormat: 'hh:mm A', // 10:30 PM or 11:00 PM  

Setting a timeFormat property option will affect all views.
https://fullcalendar.io/docs/text/timeFormat

The time format can also be set on a per view basis.
https://fullcalendar.io/docs/views/View-Specific-Options

Recent Tutorials
Reusing the same Express entity in multiple associations
Apr 11, 2024
By myq.

How to create and manage multiple associations in Express

Express Form Styling
Apr 11, 2024
By myq.

Different ways to style Express forms

Setting addon/theme version compatibility in the marketplace
Jan 9, 2024

For developers worn out with setting the latest addon or theme version manually across too many core versions, here is a JavaScript bookmarklet to do it for you.

How to get the locale of a page
Jan 8, 2024
By wtfdesign.

Now, why don't we just have a getLocale() method on Page objects beats me, but here's how you work around it

Using a Redis Server
Jun 16, 2023
By mlocati.

How to configure Concrete to use one or more Redis servers to persist the cache.

Using the Concrete Migration Tool Addon
Apr 27, 2023

How to use the Concrete CMS Migration Tool

Improvements?

Let us know by posting here.