How to Use the Fullcalendar View Module in Drupal 8

How to Integrate a Calendar 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:

Enable the Full Calendar 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.

Content types for the Full Calendar Module in Drupal 8

  • 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”.

Create content for the Full Calendar Module in Drupal 8


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.

Instructor

  • Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Blog Rating
Subscribe
Notify of
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Anonymous

This is very helpful article but this module is not covered by Drupal’s security advisory policy.

anonymous

It’s also just about the only option. We’re at core version 8.6 and still no official release for a calendar module. The ‘calendar’ module itself doesn’t even have a dev release and no commits in almost a year. Seems dead imo. Another huge hole for D8. And they actually have to have ‘working groups’ to understand the slow adoption rate of d8?

Anonymus

Right. I bought a new hosting account 2 years ago to upgrade to Drupal 8. Useless. Drupal 8 web site is still in maintenance mode because Calendar is not working. Recently was forced to delete Date_recur because database updates didn’t worked with date_recur installed. I’ll try to remove Calendar and try FullCalendar. Lost all past events in the upgrade. Have q-a few hundreds events to recreate in Drupal 8 from the still working fine Drupal 7 site. Drupal 8 upgarde was very disapointing ans still very problematic.

Sara

Thanks for the guide. Is it possible to add in a location field that’s within the same ‘Event’ content type? How would that work? Thanks, Sara

Arthur

Hi ! 
Can you tell me please how to add [b][i]recurring event[/i][/b] into a calendar. I want to show every weekend (saturday and sunday) with red color on the calendar. I tried to  register a content type,added a field and specified field_weekly_event and followed your instructions above ([i]during creating events and view[/i]) .
Other content types ([i]in my case its holiday days[/i]) are shown on the calendar but recurring events ([i]weekly events [/i]) are not shown. 
Can you tell me why and how I can fix it. ???? 

Christophe

Hello,
Thanks very much for this tuto.
I tried to select more fieds in the description field list in format parameters of my view, but only the body field is taken into account ?
How can I change this behavior ?
I work with Drupal 8.
Thanks in advance.

christophe

Hello,
Has anyone encountered this issue?
Thanks in advance.
Christophe.

nessunluogo.net

Very useful!
I just suggest you to change the install command with:
[code]composer require drupal/fullcalendar_view[/code]

Jim Ryan

Is there a way to disable the “Event Bundle (Content) Type”?
I’m weary on disabling the mouse interactions since the tooltip on :hover is a nice touch.
I just don’t want random users to be able to double click a date to submit anything.

Gautam Pokharna

I need to show the weekdays in fullname is there any way to do so 

10
0
Would love your thoughts, please comment.x
()
x