カレンダー機能

機能概要

各Webサイトの任意のページに表示するカレンダーを定義します。
カレンダーでは、「創立記念日」や「メンテナンスによる臨時休業」など、サイト訪問者に伝えたい独自の日程情報を表示できます。
複数のイベントを関連付けさせて、各イベントの日程やリンク情報をカレンダー上に表示でき、視覚的に予定を確認しやすくできます。

CMS TOP 画面の「カレンダー」カードの右向き三角（▶）をクリックすると、「カレンダー一覧」が開きます。

カレンダー一覧画面

登録済みのカレンダーをカードスタイルで一覧表示します。



①カレンダーを追加する場合
　右上の「カレンダー追加」ボタンをクリックすると、一覧の末尾に新しいカードが追加されます。カレンダー名を入力して「保存」をクリックしてください。



②カレンダーを並び替える場合
　対象カレンダーのカードをドラックして、移動したい場所で離します。

③カレンダーを設定したい場合
　対象カレンダーのカードの右向き三角（▶）をクリックして、カレンダー設定画面を開きます。（後述）

　　　　　

④カレンダーを削除したい場合
　対象カレンダーのカードの縦３点（︙）をクリックし、表示されたメニュー上の「削除」をクリックします。



⑤カレンダーを複製したい場合
　複製元カレンダーのカードの縦３点（︙）をクリックし、表示されたメニュー上の「複製」をクリックします。
　複製先カレンダーは「複製元カレンダー名のコピー」という名称で作成されます。カレンダー設定画面を開いて変更してください。
　
⑥カレンダーのカードカラーを変更したい場合
　対象カレンダーのカードの縦３点（︙）をクリックし、表示されたメニュー上の「ペイント」をクリックします。
　表示されたパレットからカラーを選択するか、カラーコードを入力して「OK」をクリックします。

カレンダー設定画面

カレンダー設定画面は４つのタブ画面で構成されています。



①「基本設定」タブ　……　カレンダー名や期間、およびカレンダーの基本的な表示形式を設定します。
②「営業時間設定」タブ ……　カレンダーの営業日に表示する日付・時間の背景色と文字色を設定します。
③「イベント一覧」タブ　……　カレンダーに紐づけられたイベントを一覧表示します。
④「ソース設定」タブ　……　カレンダー部分のHTMLソースと追加スタイルを設定できます。
⑤「プレビュー」ボタン　……　現在のカレンダー設定でのイメージを表示します。
⑥「公開」ボタン　……　現在のカレンダー設定を各Webサイトの所定のフォルダに転送します。

カレンダー設定画面・基本設定

カレンダー名と表示期間、および基本的な表示形式を設定します。また独自の休業日を設定できます。
下記項目を入力後、画面最下部のボタン「保存」をクリックしてください。

 
 
基本設定

カレンダー名	カレンダー名を100文字以内で指定します。
期間　　開始	カレンダー表示期間の開始を西暦年と月で選択します。2020年1月以降の年月を指定できます。
期間　　終了	カレンダー表示期間の終了の設定要否を選択できます。「設定する」場合は、期間終了の西暦年と月を指定します。

表示設定

年月表記	「日本語」か「英語」か「英語略称」を選択します。 　　日本語　　　【例】2025年12月 　　英語　　　　【例】December 2025 　　英語略称　　【例】Dec 2025
曜日表記	「日本語」か「英語略称」か「英略大文字」か「英略小文字」を選択します。 　　日本語　　　【例】日、月、火、水、木、金、土 　　英語略称　　【例】Sun、Mon、Tue、Wed、Thu、Fri、Sat 　　英略大文字　【例】SUN、MON、TUE、WED、THU、FTI、SAT 　　英略小文字　【例】sun、mon、tue、wed、thu、fri、sat
週の始まり	「日曜始まり」か「月曜始まり」を選択します。
前後送り	「あり」か「なし」を選択します。
日付部分配色	「基本設定」か「営業時間設定」を選択します。
土曜日の配色	「設定する」か「設定しない」を選択します。「設定する」場合は、文字色と背景色をカラーパレットかカラーコードで指定します。
日曜日の配色	「設定する」か「設定しない」を選択します。「設定する」場合は、文字色と背景色をカラーパレットかカラーコードで指定します。
日本の祝日	「表示する」か「表示しない」を選択します。「表示する」場合は、文字色と背景色をカラーパレットかカラーコードで指定します。
各日付表示タイプ	「イベントタイトルバー表示」か「カテゴリ＋タイトル単日表示」を選択します。
休業日・行事日	リンクボタン「＋休業日・行事日を追加」をクリックして、入力項目を表示させます。

休業日・行事日定義

表示名	名称を100文字以内で入力します。例えば、「創立記念日」「年末年始休業」など。 名称右横のリンク「ー削除」をクリックすると、当該休業日・行事日が削除されます。
種類	「休業」か「行事」かを選びます。
メモ	メモを残すことができます。
表示期間	休業日や事業日を設定する期間を選択します。
表示要否	「表示する」か「表示しない」を選択します。
配色	休業日の文字色と背景色を、パレットとカラーコードで指定します。
曜日指定	休業する曜日をチェックオンにします。祝日を休業する場合は、「祝日」チェックオンにします。 例えば、毎週土曜日と日曜日および国民の祝日を休業する場合、「土」「日」「祝日」をチェックオンにします。
日指定	休業する日付をカンマ区切りで入力します。最大255文字。 例えば、毎月8日、18日、28日を休業する場合、「8,18,28」と入力します。
月日指定	休業する月日をmm/dd形式でカンマ区切りで入力します。最大255文字。 例えば、毎年4月1日と10月1日を休業する場合、「04/01,10/01」と入力します。
指定日	休業日に含める年月日をyyyy/mm/dd形式でカンマ区切りで入力します。最大255文字（最大23個の日付）。
除外指定日	休業日から除外するする年月日をyyyy/mm/dd形式でカンマ区切りで入力します。最大255文字（最大23個の日付）。
「＋休業日・行事日を追加」	さらに休業日定義を追加したい場合、リンクボタン「＋休業日を追加」をクリックして、入力項目を表示させます。

例えば、通常は毎週火曜日を「休館日」とし、火曜日が「国民の祝日」と重なる場合は営業して翌日を「休館日」とする場合、次のように入力します。

休業日・行事日・イベントが被った場合

こちらをご参照ください。

カレンダー設定画面・営業時間設定

曜日ごとの営業時間をデフォルトとして定義します。営業時間を変更したい特定日を期間で定義します。
デフォルトの営業時間および特定日営業時間について、カレンダー上に表示する文字色と背景色を指定します。
 
 



曜日ごとの営業時間

営業時間	各曜日ごとおよび「国民の祝日」について、営業時間を任意の文字列で入力します。最大255文字。 例えば、「9:00-18:00」「午前9時～11時30分，午後2時～4時30分」「休館日」など。
日付背景色	営業日の日付の背景色をパレットかカラーコードで入力します。
日付文字色	営業日の日付の文字色をパレットかカラーコードで入力します。
営業時間表示	営業時間の「表示」「非表示」を切り替えます。
営業時間背景色	営業日の時間の背景色をパレットかカラーコードで入力します。
営業時間文字色	営業日の時間の文字色をパレットかカラーコードで入力します。
祝日の日付配色は曜日設定に従う	祝日の日付配色を、曜日設定に従うかどうかを選択します。 有効にすると、祝日の配色設定は無効となり、曜日に基づいた配色が適用されます。

特定日の営業時間
「＋特定日を追加」をクリックすると、下記項目が入力可能となります。入力後に「保存」をクリックすると登録されます。
登録済みの特定日を削除する場合は、その行の「削除」をクリックしてください。

設定期間	開始日と終了日をカレンダーアイコンをクリックして選択するか、直接入力します。
時間帯	各曜日ごとおよび「国民の祝日」について、営業時間を任意の文字列で入力します。最大255文字。 例えば、「9:00-18:00」「午前9時～11時30分，午後2時～4時30分」「休館日」など。
日付背景色	営業日の日付の背景色をパレットかカラーコードで入力します。
日付文字色	営業日の日付の文字色をパレットかカラーコードで入力します。
営業時間表示	営業時間の「表示」「非表示」を切り替えます。
営業時間背景色	営業日の時間の背景色をパレットかカラーコードで入力します。
営業時間文字色	営業日の時間の文字色をパレットかカラーコードで入力します。
操作	「削除」ボタンを押すと削除できます。

例

カレンダー設定画面・イベント一覧

カレンダーに関係づけられたイベントが日程の新しい順に表示します。
各イベントの「虫眼鏡」アイコンをクリックすると、イベントをプレビュー表示します。
各イベントの「▶」アイコンクリックすると、NewsReleaseイベント一覧での詳細パネルを表示します。

 

カレンダー設定画面・ソース設定

カレンダーのデザインを調整する場合は、この画面のソースを編集します。
編集したソースを保存するとカレンダーの表示スタイルに即時反映されます。
ソースの編集方法は、構築者マニュアルを参照してください。
 
 
   
「プリセット読込」をクリックするとデフォルトの状態が出力されます。

１行目	{cp:cal_header class="cal-head"}	カレンダーのヘッダー部分の開始タグ
２行目	{cp:cal_title class="cal-title" /}	カレンダーのタイトル部分
３行目	{cp:cal_selector class="cal-selector" /}	月表示（詳細はリンク）のときの年月セレクター
４行目	{cp:cal_navigation class="cal-navigation" /}	前後送り
５行目	{/cp:header}	カレンダーのヘッダー部分の終了タグ
６行目	{cp:cal_week_header class="cal-week" /}	月表示（詳細あり）のときの週ヘッダー
７行目	{cp:calendar class="calendar" /}	カレンダーのボディ部分

カレンダープレビュー画面

カレンダー設定画面の右上の「プレビュー」ボタンをクリックすると、別タブでプレビュ画面を開きます。
現在の設定内容でのカレンダーの表示イメージを確認できます。
関連付けられているイベントがあれば、イベント日程に従い表示されます。
表示形式（月表示、週表示、日表示）を切り替えたり、表示個数を変えて、プレビュを確認できます。

カレンダーにイベントを関連付ける

既存のイベントを関連付ける場合は、News Release イベント一覧で該当イベントの設定画面を開き、「カレンダー」設定を行います。
新規のイベントの場合は、News Release イベント一覧で「記事作成」をクリックし新規画面を開き、「カレンダ－」設定を行います。

「カレンダー」の「＋」をクリックして展開し、必要な項目を入力して「保存」をクリックします。
一つのイベントを複数のカレンダーに関係づけることができます。
イベント公開時にカレンダー設定情報をWebサーバの所定のフォルダに転送します。

カレンダーをページで表示するためのレイアウト

カレンダーを利用するページでは、レイアウトに「カレンダープラグインリソース」を追加する必要があります。
※「カレンダープラグインリソース」とは、カレンダーを利用するページに必要なJSやCSSのセットです。

①サイト＞テンプレート＞レイアウトで該当のレイアウト編集画面を開きます。
②上部の「テンプレート挿入」をクリックし、「OTHER」タブを開き、「カレンダー」を展開して「カレンダープラグインリソース」を挿入します。
③「保存」をクリックします。




※「カレンダー」は、ブロックではなくレイアウトに直接挿入する場合のCPタグです。

	{cp:calendar id=""}　 デフォルトはIDを指定するだけで表示されます。
	その他設定値は次の通り。 displayFormat: 表示形式 　'month-detail'月表示（詳細あり） 　'month-link'月表示（詳細はリンク） 　'week-detail'週表示（詳細あり） 　'day-detail'日表示（詳細あり） displayCount: 表示個数 　'single'当月のみ 　'including-current'当月含め●ヵ月 　'specify'指定 monthsCount: 'including-current'の月数 columnDisplay: 'including-current'のときの列数 startYear, startMonth, endYear, endMonth: 期間指定表示の開始・終了年月 pecifyColumns: 期間指定表示の列数

カレンダーをページに挿入する

カレンダーをWebサイトに表示するには、サイト内の任意のページに「カレンダーブロック」で挿入し、そのページを公開します。

①ページ設定で、「レイアウト」に「カレンダープラグインリソース」を挿入したレイアウトを設定します。

②ページ編集画面を開き、任意の位置で「ブロック」挿入を行います。
　挿入するブロックは、「基本ブロック」Ver.3（2024）の「カレンダー」です。




③挿入されたカレンダーブロックで「カレンダー」を選択し、表示形式、表示個数、イベントリンク先を設定します。

イベントリンク先	詳細ページの存在するイベントの場合、イベント名をクリックするとイベント詳細ページへ飛びますが、 その詳細ページがどのレイアウトにあたるか指定します。
日付リンク先	表示形式で「月表示（詳細はリンク）」を選択した場合、日付をクリックした際の遷移先となるイベント一覧ページです。 リストに表示されるのはイベントブロックが使用されているページです。

④ページプレビューでカレンダーイメージを確認できます。
※レイアウトに「カレンダープラグインリソース」が読み込まれていればカレンダーが表示されます。

⑤ページを保存後、ページを公開します。該当ページをWebサイトで確認できます。