イベントカレンダー
イベントカレンダーは、時間管理とイベントのスケジュール管理を行うことができるコンポーネントです。
表示モードは日、週、月、アジェンダ、タイムラインと選択することができます。
ダイアログプロパティ
| 項目 | 入力値 | オプション | デフォルト値 |
|---|---|---|---|
| ID | 文字列 | 自動設定 | |
| 幅 | 数値 | 1000 | |
| 高さ | 数値 | 550 | |
| X | 数値 | ||
| Y | 数値 | ||
| 読み取り専用 | 真偽 | OFF | |
| 表示 | 真偽 | ON | |
| サイドバー | 真偽 | ON | |
| 本日 | 真偽 | ON | |
| アジェンダ | 真偽 | OFF | |
| タイムライン | 真偽 | OFF | |
| オンクリックイベント情報 | 真偽 | ON | |
| モード | 選択 | 日 | |
| 日付 | 文字列 | 2024-02-20 | |
| ロケール | 選択 | English | |
| カレンダー | 表形式 [詳細 1] | 詳細 1 | |
| セクション | 表形式 [詳細 2] | 詳細 2 | |
| 値 | 表形式 [詳細 3] | 詳細 3 | |
| イベント作成 | アクション | ||
| イベント編集 | アクション | ||
| イベント削除 | アクション |
アクションプロパティ
| 項目 | プロパティ | データ型 | オプション | デフォルト値 |
|---|---|---|---|---|
| ID | id | string | 自動設定 | |
| 幅 | width | number | 1000 | |
| 高さ | height | number | 550 | |
| X | x | number | ||
| Y | y | number | ||
| 読み取り専用 | readOnly | boolean | ||
| 表示 | visibility | boolean | ||
| サイドバー | sidebar | boolean | ||
| 本日 | today | boolean | ||
| アジェンダ | agenda | boolean | ||
| タイムライン | timeline | boolean | ||
| モード | mode | string | day | |
| 日付 | date | string | ||
| 選択値 | selected | object |
[詳細 1] カレンダー (calendars)
カレンダーのイベントタイプのオプションを取得・設定します。値の形式はオブジェクト配列です。
デフォルトの状態は以下のように登録されています。[追加]リンクから各行を登録します。
削除する場合は、削除する行のチェックボックスを選択して、[削除]リンクをクリックします。
| ID | ラベル | 背景色 | 枠色 |
|---|---|---|---|
| work | Work | #3AA3E3 | #098CDC |
| meeting | Meeting | #9585EF | #7A67EB |
| rest | Rest | #BD69BC | #AD44AB |
| other | Other | #84BF70 | #61A649 |
アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式でカレンダー (calendars) に設定します。
[{"id":"work","label":"Work","background":"#3AA3E3","border":"#098CDC"},{"id":"meeting","label":"Meeting","background":"#9585EF","border":"#7A67EB"},{"id":"rest","label":"Rest","background":"#BD69BC","border":"#AD44AB"},{"id":"other","label":"Other","background":"#84BF70","border":"#61A649"}][詳細 2] セクション (sections)
表示モードが「タイムライン」の時にセクション毎にイベントを表示することができます。
そのセクションのID、ラベル、アバター画像の情報を取得・設定します。
値の形式はオブジェクト配列です。
デフォルトの状態は以下のように登録されています。[追加]リンクから各行を登録します。
削除する場合は、削除する行のチェックボックスを選択して、[削除]リンクをクリックします。
アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式でセクション(sections) に設定します。
[{"id":"1","label":"Section 1","image":"https://template-ui-image.webperformer.jp/image/Avatar1.jpg"},{"id":"2","label":"Section 2","image":"https://template-ui-image.webperformer.jp/image/Avatar2.jpg"},{"id":"3","label":"Section 3","image":"https://template-ui-image.webperformer.jp/image/Avatar3.jpg"}][詳細 3] 値 (value)
イベントカレンダー全体の値を取得・設定します。値の形式はオブジェクト配列です。
デフォルトの状態は以下のように登録されています。[追加]リンクから各行を登録します。
削除する場合は、削除する行のチェックボックスを選択して、[削除]リンクをクリックします。
| ID | 開始日 | 終了日 | 終日 | イベント名 | 詳細 | カレンダー ID | セクション ID |
|---|---|---|---|---|---|---|---|
| 1 | 2024-02-20T09:00:00 | 2024-02-20T11:00:00 | チェックボックス:OFF | Task organization | Project progress | work | 1 |
| 2 | 2024-02-20T13:00:00 | 2024-02-20T15:00:00 | チェックボックス:OFF | Design meeting | Software architecture | meeting | 1 |
| 3 | 2024-02-20T00:00:00 | 2024-02-20T00:00:00 | チェックボックス:ON | Remote work | other | 1 |
アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値(value) に設定します。
[{"id":"1","start_date":"2024-02-20T09:00:00","end_date":"2024-02-20T11:00:00","all_day":false,"event_name":"Task organization","description":"Project progress","calendar_id":"work","section_id":"1"},{"id":"2","start_date":"2024-02-20T13:00:00","end_date":"2024-02-20T15:00:00","all_day":false,"event_name":"Design meeting","description":"Software architecture","calendar_id":"meeting","section_id":"1"},{"id":"3","start_date":"2024-02-20T00:00:00","end_date":"2024-02-20T00:00:00","all_day":true,"event_name":"Remote work","description":"","calendar_id":"other","section_id":"1"}]イベント
| イベント名 | 説明 |
|---|---|
| onclick | イベント作成 |