A demo site for Drupal calendars.

Web calendars

Google calendar and Outlook have calendars for scheduling meetings and planning your day.

Meetup and Eventbrite have a calendar of events that you can sign up or buy tickets for.

Calendly lets people book meetings with you.

Calendar libraries

Fullcalendar is a javascript library that can display a configurable calendar.

QCalendar is a library for the quasar (vue) framework.
Demo: https://codepen.io/Hawkeye64/pen/dyvpYwW

React Calendar is a robust React library.

Wordpress Event Calendar.

Drupal modules

Calendars

Fullcalendar

https://www.drupal.org/project/fullcalendar

• Supports Fullcalendar JS 6.
• Automatically detects date fields in view.
• Supports multiple date field types in a single view (date, datetime range, smart date).
• Double click to create event.
• Drag and drop to move events.
• No jQuery dependency.

Demo

Issues

• Implement popover via dayMaxEvents/dayMaxEventRows (patched)
• Height and contentHeight settings are non-functional (patched)
• Datetime field not showing time (patched)
• Display event end time on month (patched)
• Duplicate entries for all day events with multiple standard (non smartdate) date fields (patched)
• Date field w/o time shown on wrong day
• Fullcalendar is incompatible with Date Recur 3.x
• FullCalendar Event Hover with title, body, event date and URL

Fullcalendar View

https://www.drupal.org/project/fullcalendar_view/

• Supports Fullcalendar JS 4.4.2.
• Drag and drop to update dates.
• Double click to create events.
• Supports recurring events with RRULE value.
• Configure colors per taxonomy.
• Hard to customize beyond what's provided via UI.
• Opens extra events using event popover api.

Demo

Issues

• All day events
• Premium version (Proposal to release a premium version that supports Fullcalendar 6)
• Date Recur 3.x and Fullcalendar 5.x

Fullcalendar Block

https://www.drupal.org/project/fullcalendar_block

Render fullcalendar using json from an api - you can use views data export.

• Supports Fullcalendar JS 5.Events starting in a month and ending in another one are not shown in the ending month
• Less configuration options, but more customization in code.

Documentation

Calendar

https://www.drupal.org/project/calendar/

Calendar views rendered using twig templates.

Provides views templates to quickly create a view with year, month, week, and day displays.

• Rendered as a table - not good for mobile, needs custom css.
• Link to day/week/month/year using contextual filters.
• Works with Recurring Date Fields (or does it?), but not Smart Date.

Demo

Issues

• Using pager breaks tab navigation

• Color by taxonomy not working

• First all day cell at week view missing

Closed

• Doesn't support Smart Date
• Steps towards handling end dates in Calendar 8
• Doesn't support recurring dates field
• Date range field not working
• Unable to set date contextual filter via layout builder block config
• Allow views contextual filters to expose the context
• Multiday - End date is not considered for contextual filter
• Events starting in a month and ending in another one are not shown in the ending month

Calendar View

https://www.drupal.org/project/calendar_view/

• A newer calendar view display with month/week.
• Use empty class to hide empty days on mobile.
• No contextual filter - uses calendar_timestamp query parameter.

Issues

• Default date doesn't work
  • Configure display to use date from first result doesn't work.
• Drag & drop functionality

Demo

Demo: https://www.drucal.org/

Documentation

Event Calendar View

https://www.drupal.org/project/event_calendar_view

New module.

Dates

Recurring event content can be built with Smart Date and Recurring Dates Field modules.

Smart Date Module

https://www.drupal.org/project/smart_date

• All day events
• Zero duration (no end time)
• Smart Date Recur submodule for recurring dates.

Recurring Dates Field Module

https://www.drupal.org/project/date_recur

Core modules

Datetime

Field type supports date and date w/ time.

https://www.drupal.org/docs/8/core/modules/datetime/datetime-overview

Datetime Range

Date range field type.

https://www.drupal.org/docs/8/core/modules/datetime-range

Events

Recurring Events module generates event entities for more robust use like comments per event instance.

Entity Registration module can be used for event registration.

Booking and Availability Management Tools for Drupal module.

Recurring Events Module

Recurring Events module does not use RRULE.

Custom recurring date fields on the event series that it uses to generate event instance entities.

Because it doesn't provide an rrule, it can't work with the fullcalendar recurring events feature. That may cause a slow or broken view if there are too many items.

No easy way to bulk extend event instance end date without editing each series.

Integrations

Google Calendar Import module provides a way to import entities from a google calendar.

Google Calendar Service can syncronize google calendar events.

Testing

• Date field types
  • Timestamp
  • Datetime, date only
  • Datetime, date and time
  • Datetime Range, date only
  • Datetime Range, date and time
  • Datetime Range, all day
  • Smart Date Range
  • Smart Date Range, unlimited/recurring
  • Recurring Dates field
• Views date filters
  • Date range
  • Dates between
• Calendars
  • Create event
  • Move event
  • View event info
  • Recurring dates
  • Multiple dates

See also

https://drucal.org/