イベントカレンダー
イベントカレンダーは、時間管理とイベントのスケジュール管理を行うことができるコンポーネントです。
表示モードは日、週、月、アジェンダ、タイムラインと選択することができます。
プロパティ
| No | 項目 | 入力値 | デフォルト値 | アクションプロパティ | タイプ | アクションデフォルト値 | 説明 |
|---|---|---|---|---|---|---|---|
| 1 | ID | 文字列 | 自動設定 | id | string | 自動設定 | [id]プロパティはアクションで設定はできません。 |
| 2 | 幅 | 数値 | 1000 | width | number | 1000 | コンポーネントの幅 |
| 3 | 高さ | 数値 | 550 | height | number | 550 | コンポーネントの高さ |
| 4 | X | 数値 | x | number | X座標位置 | ||
| 5 | Y | 数値 | y | number | Y座標位置 | ||
| 6 | 読み取り専用 | 真偽 | OFF | readOnly | boolean | 読み取り専用モード | |
| 7 | 表示 | 真偽 | ON | visibility | boolean | 表示状態 | |
| 8 | サイドバー | 真偽 | ON | sidebar | boolean | サイドバーの表示 | |
| 9 | 本日 | 真偽 | ON | today | boolean | 本日ボタンの表示 | |
| 10 | アジェンダ | 真偽 | OFF | agenda | boolean | アジェンダモードの有効化 | |
| 11 | タイムライン | 真偽 | OFF | timeline | boolean | タイムラインモードの有効化 | |
| 12 | オンクリックイベント情報 | 真偽 | ON | イベントクリック時の情報表示 | |||
| 13 | モード | 選択 1. 日 2. 週 3. 月 4. アジェンダ 5. タイムライン | 日 | mode | string | day | 表示モード |
| 14 | 日付 | 文字列 | 2024-02-20 | date | string | 初期表示日付 | |
| 15 | ロケール | 選択 1. English 2. 日本語 | English | 言語設定 | |||
| 16 | カレンダー | 表形式[詳細1] | [詳細1] | calenars | array of object | [詳細1] | カレンダーのイベントタイプ設定 |
| 17 | セクション | 表形式[詳細2] | [詳細2] | sections | array of object | [詳細2] | タイムライン用セクション設定 |
| 18 | 値 | 表形式[詳細3] | [詳細3] | value | array of object | [詳細3] | イベントデータ |
| 19 | イベント作成 | 選択 1. なし 2. アクション | アクション | イベント作成時のアクション | |||
| 20 | イベント編集 | 選択 1. なし 2. アクション | アクション | イベント編集時のアクション | |||
| 21 | イベント削除 | 選択 1. なし 2. アクション | アクション | イベント削除時のアクション | |||
| 22 | 選択値 | 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 | イベント作成 |