Fullcalendar View
DrupalコンテンツをインタラクティブなFullCalendar JavaScriptカレンダーにレンダリングするViewsスタイルプラグインで、ドラッグ＆ドロップ編集、イベント作成、繰り返しイベントをサポートします。
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
イベント管理カレンダー
組織のイベントを管理するカレンダービューを作成します。開始日、終了日、カテゴリーTaxonomyフィールドを持つEventコンテンツタイプを設定します。カレンダーを使用してすべてのイベントをカテゴリー別に色分けして視覚的に表示します。スタッフはドラッグ＆ドロップでイベントを再スケジュールし、ダブルクリックでカレンダーインターフェースから直接新規イベントを作成できます。
リソース予約システム
会議室や機器の予約カレンダーを実装します。日時フィールドとリソースTaxonomyを持つBookingコンテンツタイプを作成します。カレンダーをリソース別に色分けして予約を表示するように設定します。イベントの重複設定を有効にして二重予約を防止し、ポップアップダイアログを使用してカレンダーページを離れることなく予約の詳細を表示します。
編集コンテンツカレンダー
編集チーム用のコンテンツ計画カレンダーを構築します。ArticleとPageコンテンツタイプに予定公開日フィールドを追加します。コンテンツステータスでフィルタリングしたカレンダービューを作成して、今後の公開予定を表示します。編集者は記事をドラッグして再スケジュールし、コンテンツパイプライン全体を一目で確認できます。
多言語イベントサイト
多言語サポートを備えた国際的なイベントカレンダーを設定します。カレンダー言語を現在のページ言語を使用するように設定し、オプションでクライアントサイドの言語セレクターを有効にします。ユーザーは50以上のサポート言語を切り替えて、月名、曜日名、UIテキストを好みの言語で表示できます。
繰り返しイベントカレンダー
毎週のミーティングや月次レビューなど、繰り返しパターンを持つイベント用のカレンダーを作成します。RRule文字列を保存するテキストフィールド（例: 'RRULE:FREQ=WEEKLY;BYDAY=MO,WE,FR'）を追加し、このフィールドを繰り返しイベントに使用するようにカレンダーを設定します。カレンダーはルールに基づいてすべての発生を自動的に生成します。
祝日対応カレンダー
祝日を表示するプロジェクトタイムラインやスケジューリングカレンダーを構築します。Google Calendar統合を有効にして、適切な国または宗教の祝日カレンダーを選択します。祝日は背景色として、または通常のイベントとして表示でき、非稼働日を考慮した計画に役立ちます。
Tips
- 月表示でイベントタイトルの時刻プレフィックスを完全に非表示にするには、timeFormatに[ ]値を使用してください
- より良いモバイルユーザー体験のために、default_mobile_viewを'listYear'に設定すると、イベントがスクロール可能なリストとして表示されます
- 繰り返しイベントの場合、jakubroztocil.github.io/rruleのオンラインRRuleジェネレーターツールを使用して有効なRRULE文字列を作成できます
- TaxonomyやコンテンツタイプのColorが指定されていない場合、イベントの色はデフォルトで#3a87ad（青）になります
- このモジュールはdaterangeフィールドをネイティブにサポートしています - daterangeフィールドからend_valueが自動的に抽出されます
- カレンダーの特定の日付に直接リンクするには、?initialDate=YYYY-MM-DDクエリパラメータを使用してください
- Taxonomy Colorを使用する場合、用語名が有効な16進数カラー（例: #FF5733）であれば、その用語のデフォルト色として使用されます
- 説明ポップアップはViewのフィールドリストの最後のフィールドを表示します - それに応じてフィールドを並べ替えてください
- ライブラリはローカルにインストールされていない場合、CDNから自動的に読み込まれます - 基本的な使用にはライブラリの手動インストールは不要です
- dialogModalオプションとdialogCanvasを使用して、モーダルの代わりにオフキャンバスサイドバーにイベント詳細を表示できます
- ドラッグ＆ドロップによるすべてのイベント更新はCSRFトークンで保護されており、ユーザーがEntityの更新権限を持っている必要があります
- このモジュールはノードだけでなく、あらゆるEntityタイプで動作します - ユーザープロファイル、カスタムEntityなどもすべて表示できます
Technical Details
Hooks 3
fullcalendar_view_fullcalendar_view_processor_info_alter
FullcalendarViewProcessorプラグイン定義のリストを変更します。モジュールがカスタムビュープロセッサプラグインを変更または追加できます。
hook_library_info_alter
このモジュールはhook_library_info_alterを実装して、不足しているローカルライブラリファイルを自動的にCDNバージョンに置き換えます。
hook_form_node_form_alter
このモジュールはhook_form_BASE_FORM_ID_alterを実装して、カレンダーのダブルクリックからイベントを作成する際に日時フィールドを事前入力します。「start」と「start_field」クエリパラメータを使用します。
Drush Commands 1
drush fullcalendarview:generate
FullcalendarViewを使用してカレンダービューを生成します。プロンプト付きでインタラクティブに実行することも、すべての引数を指定して非インタラクティブに実行することもできます。
Troubleshooting 7
ブラウザコンソールでJavaScriptエラーを確認してください。必要なライブラリが読み込まれていることを確認してください（CDNまたはローカルから）。Viewに開始日フィールドが設定されており、結果が含まれていることを確認してください。View形式が「Full Calendar Display」に設定されていることを確認してください。
これは通常タイムゾーンの問題です。Viewフィールド設定で日付フィールドのタイムゾーン設定を確認してください。モジュールはUTC日付を指定されたタイムゾーンに変換します。Drupalサイトのタイムゾーンが/admin/config/regional/settingsで正しく設定されていることを確認してください。
カレンダー表示設定で「Allow event editing」がチェックされていることを確認してください。現在のユーザーがEntityを更新する権限を持っていることを確認してください。Entityが繰り返しイベントでないことを確認してください（繰り返しイベントは読み取り専用です）。時刻コンポーネントを持つイベントの場合、日付フィールドが日付のみのフィールドでないことを確認してください。
表示設定で「Event bundle (Content) type」が設定されていることを確認してください。現在のユーザーがそのタイプのコンテンツを作成する権限を持っていることを確認してください。この機能は適切な権限を持つ認証済みユーザーのみで動作します。
Legend Colors設定で「Event Taxonomy Field」と「Vocabularies」の両方が選択されていることを確認してください。選択したボキャブラリーがTaxonomyフィールドで参照されているものと一致していることを確認してください。Taxonomy用語にColor値が設定されていることを確認してください。
RRuleフィールドにDTSTARTコンポーネントを含む有効なRRULE文字列が含まれていることを確認してください。オンラインRRuleツールを使用してルール構文を検証してください。繰り返しイベントはドラッグ＆ドロップで編集できないことに注意してください。
Calendar APIが有効になった有効なGoogle Calendar APIキーを持っていることを確認してください。APIキーにドメインをブロックするリファラー制限がないことを確認してください。ブラウザコンソールでAPIエラーメッセージを確認してください。
Security Notes 5
- AJAXによるイベント更新は、ユーザーセッションごとに生成されるCSRFトークンで保護されています
- Entity更新権限を持つユーザーのみがドラッグ＆ドロップでイベントを変更できます
- イベント作成には、指定されたバンドルタイプに対する適切なEntity作成権限が必要です
- タイトルと説明の出力は、Xss::filter()とXss::filterAdmin()を使用してサニタイズされます
- モジュールは編集コントロールのレンダリングや更新の処理前にユーザー権限を検証します