This Pro tutorial provides the steps to implement FullCalendar in a WP website using the WordPress REST API for showing event custom post type posts on a calendar with event data (incl. custom field values) in popovers on hover and the event names clickable to their permalinks.
This is a step-by-step custom DIY alternative (at least, the core idea of showing WordPress posts on a calendar) to Pie Calendar plugin. Note that Pie Calendar Pro has other features not covered in this tutorial. But if you are looking for a solid base that can further be extended with any feature that FullCalendar.js supports, this is the guide for you.
We shall
- register Events CPT and Event Categories taxonomy
- add custom fields like start date to the events
- register a custom REST API endpoint for events and build the callback function so it returns an array of events formatted for FullCalendar
- initialize FullCalendar with the above array
Step 1
Register your event CPT and event-category taxonomy using your favorite custom fields plugin or code.
Step 2
Create custom fields for your post type.
The only one mandatory is the one for start date and it can be of type Date Picker or Date Time Picker.
Set the Return Format to Y-m-d H:i:s or Y-m-d.
Same for end date (and time), if present.
Step 3
Create your events and populate the fields.
Step 4
Let's create FullCalendar's init script.
If a child theme is not active, install and activate it. For Bricks, here's the link: child theme. This can be done at any time - even if the site is fully built w/o any negative impact.
Create (folders) this path in the child theme directory: assets/js
Create a filed named say, calendar-init.js having the code below the screenshot.
