How to Display Weekly Events in a Grid Layout

By default, JCal Pro displays the weekly calendar of events in a flat layout:

the default layout of weekly events

You can replace this flat layout with a Google Calendar-like grid layout:

0 1

This is a two-step process:

  • Create the "events" JCal Pro template override
  • Replace the PHP code of the week_body.php file with the code of the month_body.php file.

Here is this process in more detail.

  • In your Joomla 5 admin dashboard, go to System > Site Templates
  • This will bring you to the "Templates: Templates (Site)" screen. Click on the link of your default front-end template:

the templates screen with the template link

  • Click the "Create Overrides" tab
  • In the "Components" tab, click JCal Pro > events:

the create override tab

  • Click the "Editor" tab > html > com_jcalpro > events > month_body.php:

the editor tab

  • You will see the code editor. Copy the whole PHP code of the monty_body.php file
  • Go to the week_body.php file. Delete its code and replace it with the one you copied in the month_body.php file.
  • Click Save or Save & Close. You will see your Week view changing from a flat to a grid layout:

grid layout for the weekly events view