ds - Event Calendarブロックをカスタマイズする

      2015/11/20

ds - Event Calendarブロックを追加したので、カスタムテンプレートを使ってカスタマイズしてみるメモ。

カスタムテンプレートファイルを準備する

eventcalendar2

concrete5を設置したURL\packages\dsEventCalendar\blocks\event_calendar の中にtemplatesフォルダを作成します。

eventcalendar3

templatesフォルダの中にさらにフォルダを作成します。フォルダ名は何でもいいのですがカスタムテンプレート名になるのでどのカスタムテンプレートなのかわかりやすいものがいいです。
今回はtodayevent

eventcalendar4

concrete5を設置したURL\packages\dsEventCalendar\blocks\event_calendarフォルダの中にある[view.css][view.php]のファイルをコピーして、todayeventフォルダの中にペーストします。

eventcalendar5

ログインし、編集モードの状態で前回追加したカレンダーブロックをクリックし、「デザイン&カスタムテンプレート」をクリックします。

eventcalendar6

ねじのアイコンをクリックし、カスタムテンプレートの中から「todayevent」を選択して「保存」ボタンをクリックします。
これでTodayeventのview.phpとview.cssが適用されます。

Todayeventのview.phpとview.cssをカスタマイズする

あとはview.phpとview.cssをお好きなようにカスタマイズすればOK

カレンダーのドキュメンテーションを読んだり、FullCalendarの日本語解説しているブログを参考にカスタマイズします。
一例ですが今回のカスタマイズだとたとえばこんな感じ。

$("#dsEventCalendar<?php echo $blockIdentifier; ?>").fullCalendar({

の下に

defaultView: 'basicDay',

デフォルトビューをベーシックデイにするよう設定項目を追加し、また

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: "month,agendaDay,agendaWeek"
                },

ヘッダーに月表示や週表示は必要ないなと思ったので

                header: {
                    left: 'today',
                    center: 'title',
                    right: "prev,next"
                },

月表示や週表示の設定を取っ払う。
後はview.cssにスタイルで修正して
eventcalendar7 eventcalendar8
こんな感じに日ごとの表示ができるようカスタマイズした。prev,nextは前日、翌日扱いになる。
またもし土曜日は背景に青色、日曜日は背景を赤色にしたい、なんていう要望も、カレンダーでfc-satやfc-sunクラスが付与されているので、これをベースにまたCSS修正すればいいですね!楽チン。

 - concrete5 ,