コンテンツにスキップ
ドキュメント

イベントカレンダー

イベントカレンダーは、時間管理とイベントのスケジュール管理を行うことができるコンポーネントです。
表示モードは日、週、月、アジェンダ、タイムラインと選択することができます。

プロパティ

No項目入力値デフォルト値アクションプロパティタイプアクションデフォルト値説明
1ID文字列自動設定idstring自動設定[id]プロパティはアクションで設定はできません。
2幅数値1000widthnumber1000コンポーネントの幅
3高さ数値550heightnumber550コンポーネントの高さ
4X数値xnumberX座標位置
5Y数値ynumberY座標位置
6読み取り専用真偽OFFreadOnlyboolean読み取り専用モード
7表示真偽ONvisibilityboolean表示状態
8サイドバー真偽ONsidebarbooleanサイドバーの表示
9本日真偽ONtodayboolean本日ボタンの表示
10アジェンダ真偽OFFagendabooleanアジェンダモードの有効化
11タイムライン真偽OFFtimelinebooleanタイムラインモードの有効化
12オンクリックイベント情報真偽ONイベントクリック時の情報表示
13モード選択
1. 日
2. 週
3. 月
4. アジェンダ
5. タイムライン		日modestringday表示モード
14日付文字列2024-02-20datestring初期表示日付
15ロケール選択
1. English
2. 日本語		English言語設定
16カレンダー表形式
[詳細1]		[詳細1]calenarsarray of object[詳細1]カレンダーのイベントタイプ設定
17セクション表形式
[詳細2]		[詳細2]sectionsarray of object[詳細2]タイムライン用セクション設定
18値表形式
[詳細3]		[詳細3]valuearray of object[詳細3]イベントデータ
19イベント作成選択
1. なし
2. アクション		アクションイベント作成時のアクション
20イベント編集選択
1. なし
2. アクション		アクションイベント編集時のアクション
21イベント削除選択
1. なし
2. アクション		アクションイベント削除時のアクション
22選択値selectedobject選択されているイベント

[詳細 1] カレンダー (calendars)

カレンダーのイベントタイプのオプションを取得・設定します。値の形式はオブジェクト配列です。 デフォルトの状態は以下のように登録されています。[追加]リンクから各行を登録します。 削除する場合は、削除する行のチェックボックスを選択して、[削除]リンクをクリックします。

IDラベル背景色枠色
workWork#3AA3E3#098CDC
meetingMeeting#9585EF#7A67EB
restRest#BD69BC#AD44AB
otherOther#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、ラベル、アバター画像の情報を取得・設定します。 値の形式はオブジェクト配列です。 デフォルトの状態は以下のように登録されています。[追加]リンクから各行を登録します。 削除する場合は、削除する行のチェックボックスを選択して、[削除]リンクをクリックします。

IDラベルイメージ
1Section 1https://template-ui-image.webperformer.jp/image/Avatar1.jpg
2Section 2https://template-ui-image.webperformer.jp/image/Avatar2.jpg
3Section 3https://template-ui-image.webperformer.jp/image/Avatar3.jpg

アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式でセクション(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
12024-02-20T09:00:002024-02-20T11:00:00チェックボックス:OFFTask organizationProject progresswork1
22024-02-20T13:00:002024-02-20T15:00:00チェックボックス:OFFDesign meetingSoftware architecturemeeting1
32024-02-20T00:00:002024-02-20T00:00:00チェックボックス:ONRemote workother1

アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値(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"
  }
]

イベント

イベント名説明
onclick1. イベント作成: 新規イベントを保存するときに発生します。
2. イベント編集: 登録イベントを編集して保存するときに発生します。
3. イベント削除: 登録イベントを削除するときに発生します。