How to create a Calendar in Drupal
Screenshot of a Calendar View using a date field with multiple values.
Categories
Drupal
Keywords
calendar

TL;DR: Get ūüďÖ Calendar View, create a View and exposed one or multiple date fields.

Presentation

As of today (April 5th, 2022), there is some modules to display a calendar in Drupal but they require quite a bit of effort to be configured correctly. Most of the time, a developer is needed. Also, some relies on JavaScript which is not the best solution in terms of accessibility and maintainability. Drupal needed a new, easy way to display content in a calendar display. This is why we released Calendar View module.

Implementing this modules is straightforward. It does not require advanced operations as it integrates smoothly on new and existing Views. It is not *invasive* so you can test it on any Views, wherever you want, without the fear of breaking configurations. Usually, a Calendar View is created with a View page display then configured to used one exposed date filter which queries content between specific dates- for instance you have an *Event* content type and you want a to display nodes of this type for the upcoming month, in a calendar table.

Calendar Views support any date fields from *core*. You can use either a single or a multiple values date field. Both storage are supported by the module. Simply add your field in the exposed filter section to render the calendar on front.

How to create a Calendar View in Drupal

This is a step-by-step guide to create a calendar in Drupal:

calendar view settings

  • Install the module `composer require drupal/calendar_view && drush en calendar_view`
  • Create a new View in Admin > Structure > View > Add new
  • Select the entity type (Content, Media... anything) and its bundle eventually
  • Create a new page on this View using the Calendar¬†display
  • Add a date field in the Filter criteria¬†section and check the Exposed filter to user¬†checkbox

 

Optional:

  • Add a navigation with the Calendar Pager

  • Configure advanced filtering on your exposed date fields for instance, by using the between¬†operator and the convenient date as text input format - such as +1 month.

Here's an example of how to configure a date field exposed filter to query data in the last two months for instance:
 

calendar view settings

Use cases for a Calendar View

  • Create an event calendar
  • Create a publication calendar¬†to display all your node entities chronologically
  • Display a calendar of your media¬†created in a given date range.
  • Display a calendar of user registrations¬†- because why not!
  • All of it can be created with a Calendar view!

Visit the module page on drupal.org, test it on your project and give it a start if it helps you.

Spread the word. Share on Twitter or Facebook and see also this complementary module Tooltip.