How to set up 15 minute increments and axis labels in Calendar.
Posted: 2021-11-07 14:33
I've seen a few posts asking how to set 15 minute increments in Calendar. Here is how I did it.
1. I am assuming you know how to install calendar correctly.
2. Set up your tables correctly, making sure you have a start datetime (format type datetime in AG) and end datetime(format type datetime in AG). I find the date/time pickers a bit cumbersome, so to speed up input, I have a third field: duration. (format type INT in AG). In the Options List for duration, I have 15,30,45,60 minute durations.
The end datetime is a calculated field. set the data type to datetime and also check 'read only'. In the calculated field tab, add the following sql query:
Next, and I can't stress this enough, use PHPMyAdmin or similar to check that a test entry is actually hitting the database and stored in the correct format. I spent hours with a sql query that worked, only to eventually discover that the end datetime was not being correctly recorded. This is particularly true if you format dates differently from the system default.
Once you have installed the calendar, created at least one event type and one calendar, click the blue "GENERATE CALENDAR FILES' button. in your HOOKS folder, you will find a file called calendar-your_calender_name.php. Open it up using your favourite editor, and scroll to about line 67 and look for TIMEGRIDWEEK. Immediately after scrollTime: Cal.scrollTime, paste in the following code:
In this example, I am setting the slots to 15 minutes, as well as the label interval to 15 minutes. My client only works during business hours, so I set the mintime and maxtime to office hours.
Now scroll down to TIMEGRIDDAY, and paste in exactly the same code as above. Save the file.
that's it, you're done! Both the day view and the week view will now render in 15-minute increments and are correctly labelled.
Other:
there is a div id called
<div id="your_calendar_name"></div>, so you could do this using jquery in the header-extras.php file,but I couldn't get it to work.
Remember that changes to your calendar will mean regenerating your files and the edited PHP file will be overwritten.
MD
1. I am assuming you know how to install calendar correctly.
2. Set up your tables correctly, making sure you have a start datetime (format type datetime in AG) and end datetime(format type datetime in AG). I find the date/time pickers a bit cumbersome, so to speed up input, I have a third field: duration. (format type INT in AG). In the Options List for duration, I have 15,30,45,60 minute durations.
The end datetime is a calculated field. set the data type to datetime and also check 'read only'. In the calculated field tab, add the following sql query:
Code: Select all
SELECT
date_add(`start_date`,INTERVAL `duration` MINUTE)
FROM
your_database_name.your_table_name
WHERE
your_table_name.id = %ID%
Once you have installed the calendar, created at least one event type and one calendar, click the blue "GENERATE CALENDAR FILES' button. in your HOOKS folder, you will find a file called calendar-your_calender_name.php. Open it up using your favourite editor, and scroll to about line 67 and look for TIMEGRIDWEEK. Immediately after scrollTime: Cal.scrollTime, paste in the following code:
Code: Select all
slotDuration: '00:15:00',
slotLabelInterval: "00:15",
minTime: "06:00:00",
maxTime: "18:15:00",
axisFormat: 'HH:mm'
Now scroll down to TIMEGRIDDAY, and paste in exactly the same code as above. Save the file.
that's it, you're done! Both the day view and the week view will now render in 15-minute increments and are correctly labelled.
Other:
there is a div id called
<div id="your_calendar_name"></div>, so you could do this using jquery in the header-extras.php file,but I couldn't get it to work.
Remember that changes to your calendar will mean regenerating your files and the edited PHP file will be overwritten.
MD
