Creating a Calendar in Drupal with Field Collection

Tags: Drupal, Views.

The Field Collection module is a popular choice for creating an entity with multiple attached fields. This allows you to have multiple sets of the same fields on a single page. This is helpful if you would like to have an Event node with multiple dates, which may repeat at different times. For example, if you have a seminar that repeats monthly but times alternate between morning and evening. Without using Field Collection, you would need to create 2 nodes with the same content and different times, not the most intuitive or user friendly. If as user finds the morning seminar listing, how will they know about the evening times? Somehow the two should be linked.

The Field Collection Views module is available for Views integration. To work, you will need to modify a view that is added when the module is installed and it can be a little tricky. You will need to set the appropriate Relationships and Contextual Filters. I didn't find much help online when going through this process. One StackExchange thread got me pointed in the right direction.

To begin, add a field collection field to your Event content type. This will be the container for dates that you add to the node.

Date field collection screenshot

Next, go to "/admin/structure/field-collections" to add a date field to the collection that you just created. I chose to allow an unlimited number of values, collect an end date, and allow repeating.

Screenshot of adding the date field

Now go to views and clone the "Field Collection View." I did this twice. Once to generate a list of dates for the Event detail page and again to create the calendar. Under Contextual filters, add Date (field_collection_item), this will pull individual dates out of the field collection. When configuring the filter, select both the start date and end date. For Method select AND. Under Fields is just the date. Filter criteria I set to show dates after today. Sorting is ascending by the start date.

 Screenshot of the first field collection view

At this point you can configure the view to display on your Event page and test the display. To do this, go to the Manage Display tab for the Event content type and set the date field to use the view you just created. Create a test event to be sure everything is setup correctly. 

Screenshot to display using a view

Now let's setup the calendar. For this step we will need to duplicate the "Field Collection View" view again, although this time we need to change its functionality to mimic the Calendar view. I would suggest referencing the Calendar view. You will need to create displays within the view for Month, Week, and Day displays, if you plan to use them. It is critical to setup a relationship with the field collection and to require that relationship in each field being displayed.

Screenshot of the calendar view configuration

A minor annoyance that I encountered-

When you are adding a dates to your event, there may be multiple drag handles shows (the ones that allow you to reorder content). This is due to assumptions made in the Date module code. Usually it would not be an issue but Field Collection extends functionality in a way not originally designed. There is an issue in-progress to fix this problem. It may not work in all cases, so test thoroughly before deploying: https://www.drupal.org/node/2065747