a-blog cmsでは、営業日やイベント予定を表形式で表示できる「カレンダー機能」も搭載しております。
エントリーとは別の、独自のメニューで管理します。
年月単位の一覧ページを作成したり、ひとつのブログ内に複数のスケジュールを表示することも可能です。

スケジュール作成の大まかな流れは下記の通りです。

1. 新規スケジュールを作成する
2. ラベルを作成する（任意）
3. スケジュールに説明・ラベルを登録する
4. スケジュールモジュールで表示方法を設定する
5. テンプレートにタグを記述する

アクセスした月の定休日を表示する、「営業日カレンダー」の作成方法を説明します。

カレンダーに表示する内容が決まっている場合や、表内で色分けをしたい場合は、「ラベル」を利用すると便利です。

1. 新規スケジュールセットを作成する

管理メニューの「スケジュール」を選択してください。
「スケジュール管理」画面には、作成したスケジュールセットの一覧が表示されます。
初期状態では何もありません。右上の「スケジュールセットを作成」ボタンをクリックしてください。

スケジュール作成

スケジュールセットの新規作成画面になります。

セット名 : 管理画面での表示名を入力します（公開ページには反映されません）。管理しやすい名前を入力してください。

説明 : スケジュールセットの役割などを入力してください。

入力したら「作成」ボタンをクリックしてください。
完了のメッセージが出たら、「一覧」ボタンで、スケジュールセット一覧へ戻ってください。

スケジュール作成画面

2. ラベルを作成する

先ほど作成したセットが一覧に追加されているのを確認して、「ラベル」の列にある「設定」ボタンをクリックしてください。

ラベル設定ボタン

カレンダーに表示する定型文＝ラベルの設定を行います。
ここでは「定休日」と「18時まで」 の二種類を選択できるようにしてみます。

ラベル名（必須） : 実際に表示される文字列を入力します。

クラス（省略可） : このラベルが適用されたときに、関連するHTMLタグに付与する、任意のクラス名を入力します。

入力したら「保存」ボタンをクリックしてください。
完了のメッセージが出たら、「一覧」ボタンで、スケジュールセット一覧へ戻ってください。

ラベル編集画面

3. スケジュールセットにラベルを登録する

作成中のセットの「登録データ」の列にある「変更」ボタンをクリックしてください。
「スケジュールの管理」画面に移動します。

★ショートカットに追加 : ダッシュボードにこの画面へのショートカットが作成され、公開後の編集がしやすくなります。

前月・◯年◯月を編集する・次月 : 移動した直後は、「現在の月」の設定画面が表示されています。過去・未来の設定を行う場合は、これらのボタンをクリックして移動できます。

テキスト入力の右側のプルダウンリストで、先ほど作成した「ラベル」が選択できるようになっています。ここでは、毎週月曜日・第三日曜日を「定休日」、それ以外の日曜日を「18時まで」に設定してみます。
表示が確認できる程度まで設定したら「保存」ボタンをクリックしてください。

スケジュール登録画面でラベルを登録

4. スケジュールモジュールの設定をする

管理メニューの「コンフィグ」を選択してください。
a-blog cmsで使用できるモジュールの一覧が表示されるので、「スケジュール」モジュールを探し、名前をクリックしてください。

スケジュールモジュール

スケジュールの表示設定画面となります。以下の通り設定してください。
後半の、年・月・日・曜日の表示形式は、任意で構いません。

参照先スケジュール : 関連付けるスケジュールセットを選択します。ここでは営業日カレンダーを選択してください。

デフォルトの表示 : トップページ、エントリーページで使用したときの、スケジュールの絞り込み条件を選択します。ここでは「月表示」を選択してください。

月の表示モード・年の表示モード : 絞り込み条件別に、スケジュールの表示形式を選択します。ここでは月・年とも「七曜表」を選択してください。

入力したら「保存」ボタンをクリックしてください。

スケジュールモジュールの設定

5.テンプレートにコードを記述する

利用中のテーマの、営業日カレンダーを表示したい箇所に、以下のコードを記述してください。

コード内のクラス名、表示確認のためのborder属性などは、任意で修正してください。

<!-- BEGIN_MODULE Plugin_Schedule -->
<div class="mod-schedule">
<!--#include file="/admin/module/setting.html"-->

<!-- BEGIN unit:loop -->
<div class="mod-schedule__unit">
	<!-- BEGIN month:loop -->
	<div class="mod-schedule__month">
		<p>{year}年{month}月の営業日</p>
		<table class="{mode}" border="1" cellpadding="5">
			<thead>
				<tr>
					<th class="w0">{w#0}</th>
					<th class="w1">{w#1}</th>
					<th class="w2">{w#2}</th>
					<th class="w3">{w#3}</th>
					<th class="w4">{w#4}</th>
					<th class="w5">{w#5}</th>
					<th class="w6">{w#6}</th>
				</tr>
			</thead>
			<tbody>
				<!-- BEGIN week:loop -->
				<tr class="week{weekRowNo}">
					<!-- BEGIN day:loop -->
					<td class="day{weekNo}<!-- BEGIN dayClass:veil --> {dayClass}<!-- END dayClass:veil -->">
						<!-- BEGIN day:veil -->
						<div class="mod-schedule__day__date">{day}</div>
						<div class="mod-schedule__day__label">{dayLabel}</div>
						<div class="mod-schedule__day__item">{dayItem}</div>
						<!-- END day:veil -->
					</td>
					<!-- END day:loop -->
				</tr>
				<!-- END week:loop -->
			</tbody>
		</table>
	<!-- /.mod-schedule__month --></div>
	<!-- END month:loop -->
<!-- /.mod-schedule__unit --></div>
<!-- END unit:loop -->

<!-- /.mod-schedule --></div>
<!-- END_MODULE Plugin_Schedule -->

テーマを更新すると、スケジュールモジュールの設定通りにカレンダーが表示されます。

複数月表示にしている場合は、<!-- BEGIN month:loop -->〜<!-- END month:loop -->間が繰り返されます。

tr・th・td要素には、表示している週や曜日、設定したラベルに応じたクラス名が付与されます。CSSでの色分けの際に参照してください。

アクセスした月に開催予定のイベントを表示する、「イベントカレンダー」の作成方法を説明します。

各スケジュールには、「ラベル」とは別途、詳しい説明文を登録することもできます。

1. 新規スケジュールセットを作成する

「営業日カレンダーを作成する」と同じ作業を行います。
ここでは、名称を「イベントカレンダー」としています。

2. ラベルを作成する

「営業日カレンダーを作成する」と同じ作業を行います。
ここでは、「セミナー」「イベント」「その他」の3つのラベルを作成しています。

3. スケジュールセットに説明文・ラベルを登録する

作成中のセットの「登録データ」の列にある「変更」ボタンをクリックしてください。
「スケジュールの管理」画面に移動します。

左側のテキスト入力欄に各イベントの説明文、右側のプルダウンリストに先ほど作成した「ラベル」を設定していきます。
表示が確認できる程度まで設定したら「保存」ボタンをクリックしてください。

イベントスケジュールの登録

4. スケジュールモジュールの設定をする

「営業日カレンダーを作成する」と同様に、スケジュールモジュールの設定画面へ移動します。
スケジュールの表示設定画面となります。以下の通り設定してください。
後半の、年・月・日・曜日の表示形式は、任意で構いません。

参照先スケジュール : 関連付けるスケジュールセットを選択します。ここでは「イベントカレンダー」を選択してください。

デフォルトの表示 : トップページ、エントリーページで使用したときの、スケジュールの絞り込み条件を選択します。ここでは「月表示」を選択してください。

月の表示モード・年の表示モード : 絞り込み条件別に、スケジュールの表示形式を選択します。ここでは月・年とも「リスト」を選択してください。

入力したら「保存」ボタンをクリックしてください。

営業日カレンダーの設定を上書きします。複数のスケジュールセットを利用したい場合は「コンフィグ」ではなく、「モジュールID」で設定をしてください。

イベントスケジュールのモジュール設定

5. テンプレートにコードを記述する

利用中のテーマの、イベントカレンダーを表示したい箇所に、以下のコードを記述してください。

コード内のクラス名、表示確認のためのborder属性、説明・ラベルの設定がないときの表示などは、任意で修正してください。

七曜表とリストでは、日付関連の変数名が異なっています。コードを流用する際はご注意ください。

<!-- BEGIN_MODULE Plugin_Schedule -->
<div class="mod-schedule">
<!--#include file="/admin/module/setting.html"-->

	<!-- BEGIN unit:loop -->
	<div class="mod-schedule__unit">
		<!-- BEGIN month:loop -->
		<div class="mod-schedule__month">
			<p>{year}年{month}月のイベントカレンダー</p>

			<table class="{mode}" border="1" cellpadding="5" style="width: 640px;">
				<!-- BEGIN week:loop -->
				<!-- BEGIN day:loop -->
				<!-- BEGIN day:veil -->
				<tr class="day{weekNo}">
					<th class="mod-schedule__date">
						<p>{day}<small>({week})</small></p>
					</th>
					<!-- BEGIN plan:veil -->
					<!-- BEGIN plan -->
					<td class="mod-schedule__plan <!-- BEGIN class:veil -->{class}<!-- END class:veil -->">
						<p>
							<!-- BEGIN label:veil --><span class="mod-schedule__plan__label">{label}</span><!-- END label:veil -->
							<!-- BEGIN label:null --><span class="mod-schedule__plan__label">(ラベルなし)</span><!-- END label:null -->
							&nbsp;
							<!-- BEGIN item:veil --><span class="mod-schedule__plan__item">{item}</span><!-- END item:veil -->
							<!-- BEGIN item:null --><span class="mod-schedule__plan__item">(なし)</span><!-- END item:null -->
						</p>
					</td>
					<!-- END plan -->
					<!-- END plan:veil -->
				</tr>
				<!-- END day:veil -->
				<!-- END day:loop -->
				<!-- END week:loop -->
			</table>

		<!-- /.mod-schedule__month --></div>
		<!-- END month:loop -->

	<!-- /.mod-schedule__unit --></div>
	<!-- END unit:loop -->

<!-- /.mod-schedule__unit --></div>
<!-- END_MODULE Plugin_Schedule -->

6. 表示を確認する

テンプレートを更新すると、スケジュールモジュールの設定通りにカレンダーが表示されます。

複数月表示にしている場合は、<!-- BEGIN month:loop -->〜<!-- END month:loop -->間が繰り返されます。

tr・th・td要素には、表示している週や曜日、設定したラベルに応じたクラス名が付与されます。CSSでの色分けの際に参照してください。

営業日等のカレンダーを表示する機能として、「サイト管理＞スケジュール」があります。
標準機能として、テキストを自由に登録する入力欄と選択肢の中から選んで登録する機能を用意しています。今回は、カスタムフィールドを使って登録項目を自由に追加する方法を説明します。

カスタムフィールドの入力欄を登録側に追加する

下記のファイルを利用しているテーマ内の同じ階層へコピーします（テーマファイルの継承）
/themes/system/admin/schedule/edit-data.html
例えば、siteテーマを利用している場合は、下記の場所へコピーをします。フォルダが無い場合は新規に作成します。
/themes/site/admin/schedule/edit-data.html

　
上記"day:loop"ブロックの中に、カスタムフィールドを記述します。下記の例では、{color}の項目を追加しています。

<!-- BEGIN_MODULE Admin_Schedule_View -->
<!-- BEGIN unit:loop -->
<!-- BEGIN month:loop -->
<!-- BEGIN week:loop -->
<!-- BEGIN day:loop -->
 
<input type="text" name="color{id}[]" value="{color}" />
<input type="hidden" name="field{id}[]" value="color{id}" />
 
<!-- END day:loop -->
<!-- END week:loop -->
<!-- END month:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Admin_Schedule_View -->

カスタムフィールドの値を表示する

テンプレートファイルにカスタムフィールドの値を表示する記述を追加します。

<!-- BEGIN_MODULE Plugin_Schedule  id="xxxxx" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN month:loop -->
<!-- BEGIN week:loop -->
<!-- BEGIN day:loop -->
 
{color}
 
<!-- END day:loop -->
<!-- END week:loop -->
<!-- END month:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Plugin_Schedule -->

※モジュールの記述例では、既存のフィールドを省略しています。
※カスタムフィールドの出力は"plan"のブロック内ではありません。

config.system.yaml に1行追記し、スケジュールの編集権限を変更できます。この機能はVer.2.11から利用可能です。

スケジュールの編集権限は管理者または編集者を選択できます。初期値は編集者以上になっています。