Creating an Events Calendar in Drupal 8

May 5, 2017 · by Jigar Mehta

If you have ever worked with sites that deal with events, you've probably been asked to create some type of calendar display. In this article, we'll discuss how to set up a basic events calendar using the Calendar (8.x-1.x-dev) for Drupal 8.

Updated Feb 22, 2018: Added alternate solution without using views template. This solution is helpful if you're trying to create a block or trying to use an existing view.

Configure the event content type

In our example, to handle events, we create a new content type called Event. You can put any content type in a calendar as long as it has a Date field. Though we might need date ranges to handle multi-day events, at the time of writing this article, there is no support for using the date range field with the calendar module, so we will use a simple date field for this example.

Event node form
The Event node form. Right now, events only have a title, description and a date field labelled Schedule.

Solution 1: Create a calendar using a views template

With the node type in place, the next step will be to display the nodes using a view, using calendar display settings. To create a view with the calendar settings in place, you can go to Structure > Views > Add view from template page (admin/structure/views/template/list). Here, we choose the template which allows us to create a calendar for our date field.

Screenshot of the "add view from template" page
We click the Add button corresponding to the date field (which we called Schedule).

The template provides you some options to configure certain aspects of the calendar to be generated, namely:

  • View name
  • Description
  • Base view path: The base path to use for the calendar pages and tabs. In our example, we choose events as the base so the calendar will generate paths like:
    • events/day: For a day-wise view
    • events/week: For a week-wise view
    • events/month: For a month-wise view
    • events/year: For a year-wise view

From the views configuration page, we can also configure the path for our calendar page(s) and create blocks with mini-calendars.

Calendar view generation options
Some settings for the calendar to be generated.

Solution 2: Create a calendar without using a views template

As per requests from many of our readers, we decided to add this alternative solution. To create a calendar view manually, simply follow these steps:

Step 1: Create a view

Create a view for showing Content with display format Unformatted list. Choosing Calendar at this point throws the error A calendar date argument is required, so we will switch the display to Calendar later.

Step 2: Edit the display format

Once the view is created, you'll be taken to a page where you can edit the view. If you're working with an existing view, simply edit the view from the admin/structure/views page. On this page, choose the display format under the Format options as Calendar.

Change the display format to "Calendar"

Step 3: Edit the row format

The calendar view shows content in a special format called Calendar entities. In the Show settings under the Format options, choose Calendar entities and choose the settings as per your requirements. For this example, you can choose Stripes based on content type and assign any color to the Event content type.

Change the row format to "Calendar entities"

Step 4: Create a contextual filter

The calendar view needs a contextual filter to work - it uses this filter to determine the period which is to be displayed in the calendar. For this example, create a contextual filter for year month so that the calendar would show the events for a given year and month.

Create the contextual filter for "Year Month"


You might want to set a default filter value to Current date in case no value is sent to it in the URL. This is useful when you're creating a block or if you're not considering month / year arguments in the URL. Alternatively, if you are an advanced views user and are creating a page, you have a % sign in your page URL, to pass an argument in the URL to show the events for that particular year and month.

Default value for the contextual filter

Step 5: Configure the sort criteria (important)

For some reason, you MUST have a sort criteria for the field you are using in the contextual filter. If you don't have this sort criteria, your view will always show up as empty.

Event calendar is ready!

Once done fine-tuning, we save the view and visit the relevant front-end page, which in this example is events/month. Here's how the calendar looks out of the box with the Bartik theme. You can feel free to try out the Calendar Header and the Calendar Pager plugins with your view.

How the calendar looks in front-end


The calendar module will be a great contrib module while working with calendars. However, it may or may not serve your needs depending on your project requirements. Here are certain points (at the time of writing this article) which might affect the usability of this module:

  • No support for date range: Lack of support for date ranges makes it hard to work with multi-day event scenarios.
  • No support for start & end date: Though we can setup two separate date fields for start and end date, multi-day events are not visible as multi-column rows in the calendar.