Calendar
Calendarウィジェットは、月単位のカレンダーを描画して日付を表示し、セルをタップして日付を選択できるようにするウィジェットです。
特定の日付にイベントドットを表示したり、月表示と週表示を切り替えたり、日付の選択・月の移動に動作を連結したりできます。
定義・役割
Calendarウィジェットは、1か月分の日付グリッドとヘッダー（年・月）を描画します。ユーザーが日付セルをタップすると、その日付が選択されてonDateSelectedの動作が実行されます。指定した日付リストにはイベントドットが表示され、今日を基準とした過去・未来とイベントの有無に応じて色を個別に設定できます。月表示と週表示の2つの形式に対応します。
- カテゴリー: Contents
- デフォルト形式: 月表示（
month） - デフォルトヘッダー: 今日を表示するヘッダー（
todayHeader）
機能
| 機能 | 説明 |
|---|---|
| 日付の選択 | 日付セルをタップすると、その日付が選択されてonDateSelectedの動作が実行されます。 |
| イベントの表示 | 指定した日付リスト（eventDate）にイベントドットを表示します。 |
| 形式の切り替え | 月表示と週表示を切り替えます。形式切り替えバーは表示・非表示を選べます。 |
| 月の移動 | ヘッダーから前月・翌月へ移動します。ページが変わるとonPageChangedの動作が実行されます。 |
| 期間の制限 | 選択できる開始日（firstDay）・終了日（lastDay）を指定します。 |
| 色・文字の設定 | 過去・未来／選択／イベントの状態ごとの色と、ヘッダー・曜日・日付の文字スタイルを調整します。 |
使い方
- 左側のウィジェットパレットでContentsカテゴリーを開きます。
- Calendar項目をキャンバスにドラッグ&ドロップします。
- 右側のプロパティパネルで、形式（
calendarFormat）やヘッダー（header）などの基本表示を設定します。 onDateSelectedに、日付を選択したときに実行する動作（ロジック・スクリプト）を連結します。- 必要に応じて、イベント日付・期間の制限・状態ごとの色を調整します。
プロパティ
注記
ヘッダー・曜日・日付の文字スタイルプロパティでは、文字色を除いたサイズと太さのみを設定します。色は下記のカラープロパティで指定します。
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
calendarFormat | カレンダーの表示形式 | month | month, week |
selectedDate | 初期選択の日付 | 未指定 | 文字列（日付） |
firstDay | 選択できる開始日 | 未指定 | 文字列（日付） |
lastDay | 選択できる終了日 | 未指定 | 文字列（日付） |
eventDate | イベントドットで表示する日付リスト | 未指定 | 文字列リスト |
rowHeight | 日付行の高さ | 未指定（ランタイムのデフォルトは32） | 数値（px、0以上） |
header | ヘッダーの形 | todayHeader | todayHeader, arrowHeader |
headerNavMode | ヘッダー（年・月）をタップしたときの日付移動の方式 | popup | popup, inline |
headerVisible | ヘッダーを表示するかどうか | true | 真偽値 |
dayOfWeekVisible | 曜日の行を表示するかどうか | true | 真偽値 |
typeChangeBarVisible | 形式切り替えバーを表示するかどうか | true | 真偽値 |
outsideDaysVisible | 今月以外の日付（前後の月）を表示するかどうか | true | 真偽値 |
headerColor | ヘッダーの文字・アイコンの色（タイトル・今日／矢印） | #FFFFFF | カラー |
beforeNowDateColor | 今日より前の日付の文字色 | #FFFFFF | カラー |
beforeNowSelectedDateColor | 今日より前の選択された日付の文字色 | #121212 | カラー |
beforeNowSelectedBgColor | 今日より前の選択された日付の背景色 | #FAFAFA | カラー |
afterNowDateColor | 今日より後の日付の文字色 | #A0A0A0 | カラー |
afterNowSelectedDateColor | 今日より後の選択された日付の文字色 | #A0A0A0 | カラー |
afterNowSelectedBgColor | 今日より後の選択された日付の背景色 | #FAFAFA | カラー |
beforeNowEventDateColor | 今日より前のイベント日付の文字色 | #FFCB00 | カラー |
beforeNowEventSelectedDateColor | 今日より前の選択されたイベント日付の文字色 | #121212 | カラー |
beforeNowEventSelectedBgColor | 今日より前の選択されたイベント日付の背景色 | #FFCB00 | カラー |
afterNowEventDateColor | 今日より後のイベント日付の文字色 | #84C13D | カラー |
afterNowEventSelectedDateColor | 今日より後の選択されたイベント日付の文字色 | #FFFFFF | カラー |
afterNowEventSelectedBgColor | 今日より後の選択されたイベント日付の背景色 | #84C13D | カラー |
dayOfWeekTextColor | 曜日の文字色 | #616161 | カラー |
dragBarColor | 形式切り替え（ドラッグ）バーの色 | #FFFFFF | カラー |
disabledColor | 無効（選択不可）な日付の色 | #4D4D4D | カラー |
headerTitleTextStyle | ヘッダータイトルの文字スタイル（色を除く） | 13px、太さ600 | テキストスタイル |
headerActionTextStyle | ヘッダーアクションの文字スタイル（色を除く） | 13px、太さ500 | テキストスタイル |
monthPickerTextStyle | 月選択の文字スタイル（色を除く） | 13px | テキストスタイル |
dayOfWeekTextStyle | 曜日の文字スタイル（色を除く） | 14px | テキストスタイル |
dayTextStyle | 日付の文字スタイル（色を除く） | 14px | テキストスタイル |
注意・ヒント
ヒント
日付セルの色は、今日を基準とした過去（beforeNow*）／未来（afterNow*）と、イベントの有無、選択の有無の組み合わせで決まります。状態ごとに色をそれぞれ指定できます。
注記
headerTitleTextStyle・dayTextStyleなどの文字スタイルプロパティでは、文字色が除外されています。文字色はbeforeNowDateColor・dayOfWeekTextColorなどの個別のカラープロパティで指定します。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、Calendar Widget Controlドキュメントで確認してください。