How to Use the Fullcalendar View Module in Drupal 8

One of our customers asked us how to integrate a calendar with events on their site.

The Calendar module is the most popular module in Drupal 7 with over 1 million downloads. Unfortunately, the module is still under development for Drupal 8.

Another option is the Fullcalendar View module. This module is by far not as popular as Calendar, but it does its work well. This tutorial will explain how to use the Fullcalendar View module.

---

Step #1. Install and Enable the Module

• Use your favorite method to install the module. You can manually install the module via your admin area, but the recommended Drupal 8 approach is using Composer.

composer install drupal/fullcalendar_view

• Go to your Drupal admin area and enable the module:

---

Step #2. Create the Content Types

For the purpose of this tutorial, you’ll be creating two content types for each of the two different types of events for a travel agency offering :

• City tours by day.
• City tours by night.
• Click Structure > Content types > Add Content Type.
• Create a Content type called “City tours by day”.
• Click Save and manage fields.

• Click Add field.
• Add the following fields:
  • Field ‘Start Date’Type: Date.
  • Label: Start date.
  • Date type: Date only (instead of Date and time).
  • Field ‘End Date’.
  • Type: Date.
  • Label: End date.
  • Date type: Date only (instead of Date and time).
  • Field ‘Description’.
  • Type: Text (plain).
  • Label: Description.
  • Maximum length: 255.
• Repeat this process and create another Content type called “City tours by night”.

---

Step #3. Create the Content

• Click Content > Add content > City tours – day.
• Give this node the name of “Tourist group green”.
• This group is going to take a 7-day tour.
• The description text is “All included”.

• Create one more node of type City tours – day with the following values:
  • Title: Tourist group green – 1.
  • Length of this tour: 3 days.
  • Description: Beverages included.
• Create one node of type City tours – night with the following values:
  • Title: tourist group black.
  • Length of this tour: 3 days.
  • Description: Non-alcoholic beverages.

Your content overview page should look like this:

---

Step #4. Create the Calendar View

• Click Structure > Views > Add view.
• Add a proper name for the view.
• Show Content of type City tours – day.
• Create a page.
• The Display format will be Full Calendar Display.
• Click Save and edit.

• Go to the Filter Criteria section.
• Click the drop-down caret besides the Add button, click Rearrange Remove the Content type: City tours – day criterion.
• Click the Add button.
• Search for the Content type filter criterion and select it.
• Click Add and configure filter criteria.

• Select Is one of and choose the relevant content types, including City tours – day.
• Click Apply.

• Click the Add button in the fields section.
• Select the fields Start date, End date.
• Leave the defaults.
• Click the Settings link for the Calendar.

• Map the fields for start and end date from your content types to the fields the calendar view is supposed to display.

• Scroll down and open the legend colors section.
• Choose the appropriate color for each Content type.

Notice also that you have the option to assign taxonomy fields to the content types. That way, you can select multiple colors for one content type.

• Click Apply.

• Save the view and go to its URL.

Congratulations! You have successfully created an event calendar for your Drupal site. It’s possible to move these elements by dragging and dropping. Just hold click and move them around. You can edit every element on the calendar by clicking it.

It’s possible to resize them too if they’re full-day events.

Thanks for reading! As you can see, the Full Calendar module lets you easily integrate a fully functional event calendar into your Drupal site.