How to Show Events on Calendar - Using MB Views

If you're looking for a way to track and manage important events such as meetings, conferences, holidays, or personal tasks, showing them on the calendar is a brilliant idea. It is also an incredibly useful feature in many applications and information management systems. When events are visually displayed on a calendar, users can plan more efficiently and avoid redundancy or missing important activities.

Table of Contents hide

1. Video Version
2. Before Getting Started
3. Create a Custom Post Type
4. Create Custom Fields
5. Create a Template to Get Event Information
6. Transfer Events Information to the Calendar
7. Last Words

Instead of adding a new plugin that can reduce the performance of the website, MB Views from Meta Box can help you display events on a calendar effortlessly and effectively.

I have a page as an example of an event calendar. On it, you can see which event is on which day, and how long it is based on the start date and end date. You can view the event on the calendar by month, week, or day as well.

An example of event calendar

If you find it necessary or interesting, let's dive into the details of this tutorial together.

Video Version

Watch this video on YouTube

Before Getting Started

Displaying events or tasks on the calendar is completely feasible with only Meta Box. Specifically, we’ll create a custom post type for the events; the event's time, such as the start date and end date, will be stored in the custom fields, and then MB Views will help you display them on the calendar.

With that concept, we highly recommend you use Meta Box AIO to have the framework and all the needed advanced features from Meta Box extensions, including:

MB Custom Post Type: to create a custom post type for the events.
MB Builder: to have a UI on the backend to visually create the custom fields for storing event information visually.
MB Views: to create a template to display events on the calendar.

You also can install Meta Box and those extensions individually.

Let’s start now!

Create a Custom Post Type

Each event will be a post of a custom post type. So, we need to create it first.

Click on the Create a post type quick action right on the Meta Box dashboard or go to Meta Box > Post Types > Add New to create a new one for the event.

Click on the Create a post type quick action to create a new custom post type

Enter the plural and singular name for the post type. And after publishing, a new menu will appear right here. It’s your post type.

The new post type appears as a new menu

Create Custom Fields

To display events on the calendar, we need the start and end dates. In the real case, the event might include other additional details such as address, moderator, and so on. But in this tutorial, I just use date for the main purpose, so, let’s create custom fields for them.

To do it, you have two methods:

The first one, right after you publish the post type successfully, there is a notice. Just click on the Add custom fields to this post type button in there.

Click to add field group for the post type automatically

Then, you can see the interface of a field group. It’s applied to the Event post type automatically.

The second method is moving to the Custom Fields sub-menu, and creating a new field group as usual. Then, set the location for this field group. I’ll follow this way.

Go to Meta Box, Custom Fields, and create a new field group.

Go to Meta Box, Custom Fields, and create a new field group.

As I said above, these are two fields I created to store the start and end dates.

Two fields for the start and end date

I chose the Datetime Picker field type for both the start and end date of the event. If you don’t want to note the time, you can use the Date Picker instead.

Choose the Datetime Picker field type for both the start and end date

If you want to show the date on the management dashboard, just enable the Show as admin column feature. Notice that, you’ll only see this setting for the field when enabling the MB Admin Columns extension. While optional, it's a handy feature to have.

Enable the Show as admin column to display the field on the dashboard.

If you want to store other information, just add corresponding field types as you go.

After creating all the needed fields, move to the Settings tab. Choose Location as Post type, and select Event to apply these fields to it.

Set the location of the field group as Event post type.

Then, in the post editor, you will see the created custom fields.

The created custom field displays in the post editor

Simply input data into them.

These are some posts that I created for example. The start date and the end date are shown as admin columns as well.

I created some posts as example

Create a Template to Get Event Information

You can use any page builder to get event information. But after doing it, I’ll use JavaScript to transform them on the calendar. So, using MB Views will be more convenient.

In the Meta Box dashboard, click on the Create a view button or go ahead to the Views submenu to create a new template for displaying the events.

Create a new view to display the event calendar

With MB Views, you can insert fields into the template by clicking on the Insert Field button, and choose any fields on the right sidebar to get data from them. Or, add some lines of code directly.

First, I add these lines of code:

{% set args = { post_type: 'event', posts_per_page: -1} %}
{% set posts = mb.get_posts( args ) %}
{% for post in posts %}

{% endfor %}

Add code to get posts from the post type.

In there:

{% set args = { post_type: 'event', posts_per_page: -1} %}: is to declare that we’ll get posts from the event post type. -1 helps to get all posts in that post type.
mb.get_posts(): is a Meta Box function to get the posts.
{% for post in posts %}...{% endfor %}: is a loop we add to get and display all the posts since we have various posts.

Inside the loop, we’ll get information about the event. You should use the button I mentioned before, and insert the field you want from the right panel.

Click on the button to insert fields

For demonstration purposes, I just get three basic information including the event name, start date, and end date. They will be used on the calendar later.

The event name means Post title. Click on it from the right panel.

The event name is the post title

For the start and end dates, Meta Box provides some options to set the output of the date. To ensure event transformation works correctly on the calendar, you should choose the format which follows the ISO standard.

Select the format of date

Do the same with the end date.

The start date and end date after inserting field and choosing format

The template is now in the simplest version since it is just to get data.

I keep the type of this template as Shortcode, then we can put it in any place we want through the generated shortcode.

Set the type of template as shortcode

After publishing this template, the shortcode is generated automatically. Just copy it.

Copy the generated shortcode

Assuming that you want to display the event calendar on a page, go to the page editor, then paste the copied shortcode.

Paste the shortcode in the place you want

On the front end, the information about all the events is displayed.

The content displayed.

Next, we’ll transfer this information to the calendar.

Transfer Events Information to the Calendar

We will use JavaScript to display events on the calendar and make them more beautiful. So, back to the template that we created to modify and add some code.

First, I’ll add some lines to declare some libraries we’ll use to have an event calendar.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale-all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />

Declare JavaScript and CSS libraries for the calendar

In this practice, I use some JavaScript libraries to have some features of the calendar such as date-time format, showing the calendar by week, month, or year, calendar language, and calculating time differences.

I also declare the CSS library for styling the calendar.

Next, I set a variable as an empty array, since it will include the values from the fields in posts, which are obtained by the loop.

Set a variable as an empty array

Then, modify the loop to transfer all the values to the array.

Modify the loop to transfer all the values to the array

Now, add this code:

<div id="calendar" data-event='{{ event_info|json_encode() }}'></div>

Create a div tag and convert variable to JSON

It’s to create a new div tag that has an ID as calendar. It’ll be used in JavaScript later. Also, you should convert the variable to JSON to use in Javascript. Then assign it to the data-event attribute.

Next, move to the CSS tab to make the event and calendar more beautiful.

Go to the CSS tab to style the calendar

Then, move to the JavaScript tab, and add some code to transfer events on the calendar.

$(function () {
var getTimeElement = document.getElementById("calendar");
var data_event = JSON.parse(getTimeElement.getAttribute("data-event"));

const current_date = new Date();

$('#calendar').fullCalendar({
locale: 'en',
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: current_date,
navLinks: true,
editable: true,
eventLimit: true,
events: data_event,
});
});

Add some code into the JavaScript tab to transfer events on the calendar

Specifically:

var getTimeElement = document.getElementById("calendar"): is to get data from the element that has the calendar ID.
var data_event = JSON.parse(getTimeElement.getAttribute("data-event")): is to get data from the data-event attribute. It includes the values we assigned before.
const current_date = new Date(): is to add a constant as the current date. It’s to set the default position on the calendar.

In the above code, I also configure attributes of the calendar with the help of the library I declared at first. These are some attributes I set for the function. For illustration purposes, I just use some major attributes of the calendar library such as calendar language, header, and the default date. You completely customize them as you want. Pay attention to eventLimit: true. It’s for changing the format of the event in a place that has limited space such as a sidebar.

That’s done. I uploaded the code to GitHub, so you can refer to it.

Now, go to the page, and this is the new look of the event calendar with all the features such as viewing the calendar in day, week, month, and the next or previous period.

An event calendar with all features.