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.

Tips

Tips

When editing a registered event, if the start time is set later than the end time before editing, an unintended end time may be set.
If this occurs, please recreate the event.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Width	number		1000
Height	number		550
X	number
Y	number
Read Only	boolean	ON OFF	OFF
Visibility	boolean	ON OFF	ON
Sidebar	boolean	ON OFF	ON
Today	boolean	ON OFF	ON
Agenda	boolean	ON OFF	OFF
Timeline	boolean	ON OFF	OFF
Event Info On Click	boolean	ON OFF	ON
Mode	select	day week month agenda timeline	day
Date	string		2024-02-20
Locale	select	English 日本語	English
Calendars	Table [Details 1]		Details 1
Sections	Table [Details 2]		Details 2
Value	Table [Details 3]		Details 3

Action

Item	Properties	Data Type	Options	Default value
ID	id	string		automatic
Width	width	number		1000
Height	height	number		550
X	x	number
Y	y	number
Read Only	readOnly	boolean
Visibility	visibility	boolean
Side Bar	sidebar	boolean
Today	today	boolean
Agenda	agenda	boolean
Timeline	timeline	boolean
Mode	mode	string	day week month agenda timeline
Date	date	string
Calendars	calendars	array of object
Sections	sections	array of object
Value	value	array of object
Selected	selected	object

Tips

Tips

• The "id" property cannot be set by an action.
• The "mode" property cannot be obtained by an action.
• When the "sidebar" property is turned on, the modal part on the left side is displayed.
• If the "today" property is turned on, it displays the “today” button that can be navigated to the current date and time.
• If the "eventInfoOnClick" property is turned on, the event will be displayed in a pop-up when you click on the event.
• If "agenda" and "timeline" are OFF, "agenda" and"timeline" will not appear in the"mode" choices.
• If "agenda" is OFF and "mode"property is set to "agenda", "day"will be displayed.
• If "timeline" is OFF and "mode"property is set to "timeline","day"will be displayed.
• The "date" property should be set to the date when initially displayed. If the current date is to be initially displayed, delete the initial value in the "date" property and set it to an empty setting.
• The "sections" property is a property that can be set when the "timeline" property is specified to be ON.

[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.

ID	Label	Image
1	Section 1	https://template-ui-image.webperformer.jp/image/Avatar1.jpg
2	Section 2	https://template-ui-image.webperformer.jp/image/Avatar2.jpg
3	Section 3	https://template-ui-image.webperformer.jp/image/Avatar3.jpg

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 Occurs when saving a new event. Update Event Occurs when editing and saving a registered event. Delete Event Occurs when deleting a registered event.