Events

Events

The event content on the timeline canvas in the Sunorhc.Timeline component is called an "Event Node". The data body of an event node is an object of JavaScript, and the component reads the collection of event node objects as an array to render the event node on the canvas.

This section first explains the object specification for defining an event node.

Property	Type	Default	Description
eventId	string	undefined	Individual event identification name should be unique. If not specified, it will be automatically generated internally.
start	string	undefined	The datetime string at the start of the event is required for all events. Unlike the timeline options, it does not accept a Date object format, so it must be specified as string data.
end	string	undefined	When the end datetime for an event is specified, the event node is displayed as a range event. Unlike the timeline options, it does not accept a Date object format, so it must be specified as string data.
row	number	1	An index number of row (start from 1) in sidebar items. If specified, the event can be forced to place to the row of the specified index number.
group	string	undefined	Sidebar group name to which the event belongs. If there is a group enabled on the sidebar side, the event will be placed in that sidebar group’s row and grouping will occur.
label	string	""	Can be specified as the summary title of the event node. If specified, it will be used as the label when displaying the range of the event node.
content	string	undefined	This is the detailed content that is displayed when the event node is clicked. If you want to display it as HTML, please register it with appropriate escaping. If a valid URL is specified and the remote property is true, when the event node is clicked and the open event occurs, the content data is asynchronously retrieved from the specified URL. The retrieved content data is cached in memory, and if an expiration date is set, the URL will not be retrieved again until the expiration date.
textColor	string		Text color if label is specified.
backgroundColor	string		Background color of the event node.
borderColor	string		Event node border color.
borderWidth	number		Width of the event node border.
classes	string		Class attribute value added to the event node’s element. Multiple entries can be specified by separating them with half-width spaces.
styles	string		Adds inline style attributes to event node elements.
image	string	-	Inserts the specified image into the background of the event node element. However, this feature is not implemented in the current version.
margin	number		This property that may be deprecated in the future.
size	number | string	md	You can set the number of pixels or "xs", "sm", "md", "lg", "xl". Default is "md".
remote	boolean	false	Fetch data from url set in content on open event if true. Default is false.
expiration	number | string	always	Set an expiration time cached event. A number is seconds from cached, always abort cache on open if always, ever cached at no-expires into specific storage if none.
relation	Record<string, any>	-	This option will allow you to draw connection lines to any event node, but is not implemented in the current version. At the moment, the necessity of this feature is questionable, and we are considering whether to implement it.
extends	Record<string, any>	undefined	Converts the specified object into a JSON string and inserts it into the data-event-extends attribute of the event node element.
callback	Function	undefined	You can register a callback that will be called on the "OpenEvent" event that occurs when the event node is clicked.

Readonly Properties

When an event node defined by the above specifications is loaded into a component, the following properties are calculated and added by the system. These properties can be referenced as event data, but cannot be updated or deleted.

Property	Type	Default	Description
uid	number	-	You cannot set externally for the system internal value. This value must be strictly unique in the entire event list.
x	number	-	System internal value; the horizontal axis coordinate of the event on the timeline container.
y	number	-	System internal value; the vertical axis coordinate of the event on the timeline container.
w	number	-	System internal value; the width of event node when has range.
h	number	-	System internal value; the height of event node when has range.
s	DateTimeObject	-	System internal value; the start datetime of event node that parsed.
e	DateTimeObject	-	System internal value; the end datetime of event node that parsed.

DateTimeObject

This is a unique object format that parses the Date object of JavaScript imported by Sunorhc.Timeline to make it easier to handle within the system, and can be referenced as internal data of the event node.

Property	Type	Description
year	number	A number representing the year of the target date and time.
month	number	A number that indicates the month of the target date and time. Unlike the Date object, it is not a month index number, so it is an integer value from 1 to 12.
monthName	string	The string of the month name for the target date and time. You can get the internationalized month name according to the ruler filter settings in the Timeline options.
day	number	A number of the date of the target date and time.
weekday	string	The string of the day name for the target date and time. You can get the internationalized day name according to the ruler filter settings in the Timeline options.
weeks	number	The week number of the year for the given date and time.
hours	number	A number of the hours of the target date and time.
minutes	number	A number of the minutes of the target date and time.
seconds	number	A number of the seconds of the target date and time.
milliseconds	number	A number of the milliseconds of the target date and time.
ISO	string	A ISO formatted datetime string of the target date and time.
ts	number	The UNIX timestamp of the target date and time.
cept	number	The C.E. epoch timestamp of the target date and time. The C.E. epoch is the number of seconds since midnight in the year 1 of the Christian era.
y	(digit?: number) ⇒ string	A method to obtain the year string by specifying the number of digits.
m	(digit?: number) ⇒ string	A method to obtain the month string by specifying the number of digits.
mn	(digit?: number, addPeriod?: boolean) ⇒ string	How to get the month name by specifying the number of characters, with the option to add a period at the end if any characters are truncated.
d	(digit?: number) ⇒ string	A method to obtain the date string by specifying the number of digits.
w	(digit?: number) ⇒ string	A method to obtain the week number string by specifying the number of digits.
wd	(digit?: number, addPeriod?: boolean) ⇒ string	How to get the day name by specifying the number of characters, with the option to add a period at the end if any characters are truncated.
h	(digit?: number) ⇒ string	A method to obtain the hours string by specifying the number of digits.
mi	(digit?: number) ⇒ string	A method to obtain the minutes string by specifying the number of digits.
s	(digit?: number) ⇒ string	A method to obtain the seconds string by specifying the number of digits.
ms	(digit?: number) ⇒ string	A method to obtain the milliseconds string by specifying the number of digits.

Example of use:

// Start Date of Event Node: 2024-07-07
console.log(`${s.wd(3, true)}, ${s.day} ${s.monthName} ${s.year}`)
// Sun., 7 July 2024