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
インストール
composer require 'drupal/fullcalendar_view:^5.2'
概要
Fullcalendar Viewは、FullCalendar JavaScriptライブラリを利用して、DrupalコンテンツをインタラクティブなカレンダーDisplayに変換する強力なViewsスタイルプラグインを提供します。日、週、月、リストなど複数の表示モードをサポートし、シームレスに切り替えることができます。
カレンダーはドラッグ＆ドロップによるイベント編集、イベントのリサイズによる期間調整、ダブルクリックでの新規イベント作成など、豊富なインタラクティブ機能を提供します。イベントはTaxonomy用語やコンテンツタイプに基づいて色分けでき、異なるタイプのイベントを視覚的に分類しやすくなります。
高度な機能として、RRule標準を使用した繰り返しイベント、Google Calendar祝日の統合、タイムゾーン処理、50以上の言語オプションによる多言語サポート、イベント詳細のカスタマイズ可能なポップアップダイアログがあります。イベントはDrupalのAJAXフレームワークを使用してモーダルポップアップやオフキャンバスサイドバーで表示できます。
このモジュールはローカルコピーが利用できない場合、CDNから必要なJavaScriptライブラリを自動的に読み込み、インストールを簡素化し、メンテナンスの負担を軽減します。
Features
- 日、週、月、リスト表示を備えたインタラクティブなカレンダー表示
- ドラッグ＆ドロップでイベントの日時を変更
- イベントのリサイズによる期間調整（終日イベント用）
- カレンダー上でダブルクリックして新規イベントを作成
- Taxonomy用語またはコンテンツタイプに基づくイベントの色分け
- RRule（RRULE）標準を使用した繰り返しイベントのサポート（除外日付対応）
- Google Calendarの祝日統合
- 50以上の言語とクライアントサイドの言語セレクターによる多言語サポート
- JSFrameライブラリを使用したイベント説明用のカスタマイズ可能なポップアップダイアログ
- イベント詳細のモーダルポップアップとオフキャンバスサイドバー表示モード
- デスクトップとモバイル用に別々のデフォルト表示を持つレスポンシブデザイン
- UTCからユーザーのタイムゾーンへの自動タイムゾーン変換
- 設定可能な時刻形式、スロット期間、表示時間範囲
- 日付/週の名前から対応する表示へのナビゲーションリンク
- 1日あたりのイベント制限と追加イベント用のポップオーバー
- イベント更新操作のCSRFトークン保護
- ローカルライブラリがインストールされていない場合の自動CDNフォールバック
- カスタムプロセッサでカレンダー機能を拡張するためのPlugin API
- カレンダークリックから新規イベント作成時の日付フィールド事前入力
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