Fullcalendar View
A Views style plugin that renders Drupal content in an interactive FullCalendar JavaScript calendar with support for drag-and-drop editing, event creation, and recurring events.
fullcalendar_view
Install
composer require 'drupal/fullcalendar_view:^5.2'
Overview
Fullcalendar View provides a powerful Views style plugin that transforms Drupal content into an interactive calendar display powered by the FullCalendar JavaScript library. The module supports multiple view modes including day, week, month, and list views, with seamless switching between them.
The calendar offers rich interactivity including drag-and-drop event editing, event resizing for adjusting duration, and double-click to create new events directly on the calendar. Events can be color-coded based on taxonomy terms or content types, making it easy to visually categorize different types of events.
Advanced features include support for recurring events using the RRule standard, Google Calendar holiday integration, timezone handling, multilingual support with 50+ language options, and customizable popup dialogs for event details. Events can be displayed in modal popups or off-canvas sidebars using Drupal's AJAX framework.
The module automatically loads required JavaScript libraries from CDN if local copies are not available, simplifying installation and reducing maintenance overhead.
Features
- Interactive calendar display with day, week, month, and list views
- Drag-and-drop event editing to change event dates and times
- Event resizing to adjust duration (for all-day events)
- Double-click on calendar to create new events
- Color-coding events based on taxonomy terms or content types
- Recurring events support using RRule (RRULE) standard with excluded dates
- Google Calendar public holidays integration
- Multilingual support with 50+ languages and client-side language selector
- Customizable popup dialogs using JSFrame library for event descriptions
- Modal popup and off-canvas sidebar display modes for event details
- Responsive design with separate default views for desktop and mobile
- Automatic timezone conversion from UTC to user timezone
- Configurable time format, slot duration, and display time range
- Navigation links for day/week names to corresponding views
- Event limit per day with popover for additional events
- CSRF token protection for event update operations
- Automatic CDN fallback when local libraries are not installed
- Plugin API for extending calendar functionality with custom processors
- Prepopulate date fields when creating new events from calendar clicks
Use Cases
Event Management Calendar
Create a calendar view for managing organizational events. Set up an Event content type with start date, end date, and category taxonomy fields. Use the calendar to visually display all events color-coded by category. Staff can drag and drop events to reschedule and double-click to create new events directly from the calendar interface.
Resource Booking System
Implement a room or equipment booking calendar. Create a Booking content type with date/time fields and a resource taxonomy. Configure the calendar to show bookings color-coded by resource. Enable the event overlap setting to prevent double-booking, and use the popup dialog to display booking details without leaving the calendar page.
Editorial Content Calendar
Build a content planning calendar for editorial teams. Add a scheduled publish date field to Article and Page content types. Create a calendar view filtered by content status to show upcoming publications. Editors can drag articles to reschedule and see the full content pipeline at a glance.
Multi-Language Event Site
Set up an international event calendar with multilingual support. Configure the calendar language to use the current page language and optionally enable the client-side language selector. Users can switch between 50+ supported languages to view month names, day names, and UI text in their preferred language.
Recurring Events Calendar
Create a calendar for events with recurring patterns like weekly meetings or monthly reviews. Add a text field to store RRule strings (e.g., 'RRULE:FREQ=WEEKLY;BYDAY=MO,WE,FR') and configure the calendar to use this field for recurring events. The calendar automatically generates all occurrences based on the rule.
Holiday-Aware Calendar
Build a project timeline or scheduling calendar that displays public holidays. Enable Google Calendar integration and select the appropriate country or religious holiday calendar. Holidays can be shown as background colors or as regular events to help with planning around non-working days.
Tips
- Use the [ ] value for timeFormat to completely hide time prefixes on event titles in month view
- Set the default_mobile_view to 'listYear' for better mobile user experience as it displays events as a scrollable list
- For recurring events, use the online RRule generator tool at jakubroztocil.github.io/rrule to create valid RRULE strings
- Event colors default to #3a87ad (blue) when no taxonomy or content type color is specified
- The module supports daterange fields natively - the end_value is automatically extracted from daterange fields
- Use the ?initialDate=YYYY-MM-DD query parameter to link directly to a specific date on the calendar
- When using taxonomy colors, if a term name is a valid hex color (e.g., #FF5733), it will be used as the default color for that term
- The description popup shows the last field in your view's field list - order fields accordingly
- Libraries load from CDN automatically if not installed locally - no manual library installation required for basic usage
- Use the dialogModal option with dialogCanvas to display event details in an off-canvas sidebar instead of a modal
- All event updates via drag-and-drop are protected by CSRF tokens and require the user to have update permission on the entity
- The module works with any entity type, not just nodes - user profiles, custom entities, etc. can all be displayed
Technical Details
Hooks 3
fullcalendar_view_fullcalendar_view_processor_info_alter
Alter the list of FullcalendarViewProcessor plugin definitions. Allows modules to modify or add custom view processor plugins.
hook_library_info_alter
The module implements hook_library_info_alter to automatically replace missing local library files with CDN versions.
hook_form_node_form_alter
The module implements hook_form_BASE_FORM_ID_alter to prepopulate datetime fields when creating events from calendar double-click. Uses 'start' and 'start_field' query parameters.
Drush Commands 1
drush fullcalendarview:generate
Generate a calendar view using FullcalendarView. Can be run interactively with prompts or non-interactively by providing all arguments.
Troubleshooting 7
Check browser console for JavaScript errors. Ensure the required libraries are loading (either from CDN or local). Verify the view has a start date field configured and contains results. Check that the view format is set to 'Full Calendar Display'.
This is typically a timezone issue. Check the date field's timezone settings in the view field configuration. The module converts UTC dates to the specified timezone. Ensure your Drupal site timezone is correctly configured at /admin/config/regional/settings.
Verify that 'Allow event editing' is checked in the calendar display settings. Ensure the current user has permission to update the entity. Check that the entity is not a recurring event (recurring events are read-only). Verify the date field is not a date-only field for events with time components.
Ensure 'Event bundle (Content) type' is set in the display settings. Verify the current user has permission to create content of that type. The feature only works for authenticated users with appropriate permissions.
Verify that both 'Event Taxonomy Field' and 'Vocabularies' are selected in the Legend Colors settings. Ensure the selected vocabulary matches the one referenced by the taxonomy field. Check that color values have been set for the taxonomy terms.
Verify the RRule field contains a valid RRULE string including the DTSTART component. Use the online RRule tool to validate your rule syntax. Note that recurring events cannot be edited via drag-and-drop.
Ensure you have a valid Google Calendar API key with the Calendar API enabled. Verify the API key has no referrer restrictions that block your domain. Check the browser console for API error messages.
Security Notes 5
- Event updates via AJAX are protected by CSRF tokens generated per-user session
- Only users with entity update permission can modify events via drag-and-drop
- Event creation requires appropriate entity create permissions for the specified bundle type
- Title and description output is sanitized using Xss::filter() and Xss::filterAdmin()
- The module validates user permissions before rendering edit controls or processing updates