How to create a Calendar in Drupal

With Views only

ยท

3 min read

How to create a Calendar in Drupal

L;DR : Install ๐Ÿ“… 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_user_registrations_filters.png

  • Install the module composer require drupal/calendar_view drush en calendar_view
  • Create a new View
  • 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
  • Checked the box Exposed filter to exposed this date field in View Exposed Form

Optional:

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_user_exposed_filter_explained.png

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:


See also:

  • Tooltip: display anything you want in a popin on mouse hover
ย