Event Calendar
Event Calendar is a component that allows you to manage time and schedule events.
The display mode can be selected as daily, weekly, monthly, agenda, timeline.
Property
| No | Item | Input Value | Default Value | Action Property | Type | Action Default Value | Description |
|---|---|---|---|---|---|---|---|
| 1 | ID | String | Auto-generated | id | string | Auto-generated | The [id] property cannot be set by actions. |
| 2 | Width | Number | 1000 | width | number | 1000 | Component width |
| 3 | Height | Number | 550 | height | number | 550 | Component height |
| 4 | X | Number | x | number | X coordinate position | ||
| 5 | Y | Number | y | number | Y coordinate position | ||
| 6 | Read Only | Boolean | OFF | readOnly | boolean | Read-only mode | |
| 7 | Visibility | Boolean | ON | visibility | boolean | Display state | |
| 8 | Sidebar | Boolean | ON | sidebar | boolean | Sidebar display | |
| 9 | Today | Boolean | ON | today | boolean | Today button display | |
| 10 | Agenda | Boolean | OFF | agenda | boolean | Enable agenda mode | |
| 11 | Timeline | Boolean | OFF | timeline | boolean | Enable timeline mode | |
| 12 | Event Info On Click | Boolean | ON | Display information when event is clicked | |||
| 13 | Mode | Selection 1. Day 2. Week 3. Month 4. Agenda 5. Timeline | Day | mode | string | day | Display mode |
| 14 | Date | String | 2024-02-20 | date | string | Initial display date | |
| 15 | Locale | Selection 1. English 2. Japanese | English | Language setting | |||
| 16 | Calendars | Table format[Details 1] | [Details 1] | calenars | array of object | [Details 1] | Calendar event type settings |
| 17 | Sections | Table format[Details 2] | [Details 2] | sections | array of object | [Details 2] | Timeline section settings |
| 18 | Value | Table format[Details 3] | [Details 3] | value | array of object | [Details 3] | Event data |
| 19 | Add Event | Selection 1. None 2. Action | Action | Action when creating events | |||
| 20 | Update Event | Selection 1. None 2. Action | Action | Action when editing events | |||
| 21 | Delete Event | Selection 1. None 2. Action | Action | Action when deleting events | |||
| 22 | Selected | selected | object | Selected event |
[Details 1] Calendars
Get and set options for calendar event types. The format of the value is an object array. The default state is registered as follows. Register each row from the "Add" link. To delete a row, select the check box of the row to be deleted and click the "Delete" link
| ID | Label | Background | Border |
|---|---|---|---|
| work | Work | #3AA3E3 | #098CDC |
| meeting | Meeting | #9585EF | #7A67EB |
| rest | Rest | #BD69BC | #AD44AB |
| other | Other | #84BF70 | #61A649 |
To handle data in an action, set the calendars in the form of an array of objects, as in the following example:
[{"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"}][Details 2] Sections
When the display mode is “Timeline”, events can be displayed by section. Get and set the ID, label, and avatar image information for that section. The format of the value is an object array.
The default state is registered as follows. Register each row from the "Add" link. To delete a row, select the check box of the row to be deleted and click the "Delete" link.
To handle data in an action, set the sections in the form of an array of objects, as in the following example:
[{"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"}][Details 3] Value
Get and set values for the entire event calendar. The format of the value is an object array. The default state is registered as follows. Register each row from the "Add" link. To delete a row, select the check box of the row to be deleted and click the "Delete" link
| ID | Start Date | End Date | All Day | Event Name | Description | Calendar ID | Section ID |
|---|---|---|---|---|---|---|---|
| 1 | 2024-02-20T09:00:00 | 2024-02-20T11:00:00 | Checkbox : OFF | Task organization | Project progress | work | 1 |
| 2 | 2024-02-20T13:00:00 | 2024-02-20T15:00:00 | Checkbox : OFF | Design meeting | Software architecture | meeting | 1 |
| 3 | 2024-02-20T00:00:00 | 2024-02-20T00:00:00 | Checkbox : ON | Remote work | other | 1 |
To handle data in an action, set the value in the form of an array of objects, as in the following example:
[{"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"}]Event
| Event name | Description |
|---|---|
| onclick | Add Event |