) => any) | null;
/**
* Adds a new event to the Scheduler component. This method accepts a single event object, structured according to the Scheduler’s dataSource format. The event object supports a comprehensive set of properties, allowing for detailed configuration of event details, appearance, recurrence, and behavior:
{
label?: string, // The event title/label (optional)
dateStart: date, // Start date and time (required)
dateEnd: date, // End date and time (required)
description?: string, // Additional event details (optional)
id?: string | number, // Unique event identifier (optional)
class?: string, // CSS class for custom styling (optional)
backgroundColor?: string, // Background color (any CSS color value)
color?: string, // Text color (any CSS color value)
notifications?: [ // Array of notification objects for reminders (optional)
{
interval: number, // Reminder interval in minutes/hours/days
type?: string, // Type of notification (email, popup, etc.)
time: number[] // Specific times (in minutes, relative to event start)
}
],
allDay?: boolean, // Marks the event as an all-day event (optional)
disableDrag?: boolean, // Prevents dragging/moving this event (optional)
disableResize?: boolean, // Prevents resizing this event (optional)
repeat?: { // Recurrence rules (optional)
repeatFreq: string, // Frequency type: 'daily', 'weekly', 'monthly', etc.
repeatInterval: number, // Interval for the repeat frequency (e.g., every 2 days)
repeatOn?: number | number[] | date,// Specific days or dates for recurrence pattern
repeatEnd?: number | date, // Number of recurrences or end date
exceptions?: [ // Dates or instances to exclude or modify (optional)
{
date: date, // Exception date (required)
dateStart?: date, // Optional exception start time
dateEnd?: date, // Optional exception end time
hidden?: boolean, // Whether this instance is hidden
backgroundColor?: string, // Custom color for the exception
status?: string, // Custom status
label?: string, // Custom label
description?: string, // Custom description
notifications?: [ // Custom notifications for this exception
{
interval: number,
type?: string,
time: number[]
}
],
disableDrag?: boolean, // Disable dragging for this occurrence
disableResize?: boolean // Disable resizing for this occurrence
}
]
},
status?: string // Custom status for the event (optional)
}
**Summary:**
This flexible structure allows you to configure simple or complex events with custom colors, notifications, recurrences (including exceptions), interaction restrictions, and more. All properties are optional unless otherwise marked as required. The event object you provide will be added to the Scheduler and rendered according to the specified options.
* @param {any} eventObj. An object describing a Scheduler event that is not already present in the element.
*/
addEvent(eventObj: any): void;
/**
* Enhances the scheduler by allowing you to define and register a custom view.
For example: `scheduler.addView('week', 'My View', 'myView', false, false, 10);`
Here, the parameters specify the base view type ('week'), display name ('My View'), unique view ID ('myView'), two boolean options (such as visibility or default state), and a numeric parameter (such as duration or step).
You can then activate the new view with `scheduler.setView('myView');`.
This enables developers to quickly add personalized calendar views that suit specific application needs.
* @param {string} type. The view type.
* @param {string} label. The view's label displayed in the header.
* @param {string} value. The view's value used to identify the view.
* @param {boolean} hideWeekend. Determines whether to hide the weekend.
* @param {boolean} hideNonworkingWeekdays. Determines whether to hide the non working days.
* @param {number} additionalDays. Determines whether to add additional days to the view.
*/
addView(type: string, label: string, value: string, hideWeekend: boolean, hideNonworkingWeekdays: boolean, additionalDays: number): void;
/**
* Initiates an update operation, allowing you to group multiple method calls or set multiple properties simultaneously. This ensures that all changes are applied together, which can improve performance and prevent intermediate states from being visible during the update process. Use this when you need to batch updates for efficiency or consistency.
*/
beginUpdate(): void;
/**
* Creates a new event with specified details (such as title, date, time, and description) and adds it to the Scheduler’s event list, making it available for viewing, editing, and management within the scheduling interface.
* @param {string} label. Event label.
* @param {string} value. Event value.
* @param {string} dateStart. Event date start.
* @param {string} dateEnd. Event date end.
* @param {boolean} allDay. Event all day. Set it to true to create all day event.
*/
createEvent(label: string, value: string, dateStart: string, dateEnd: string, allDay: boolean): void;
/**
* Finalizes the update operation, allowing the component to resume its normal rendering process. This method triggers a re-render of the element, ensuring that all recent changes are reflected in the UI.
*/
endUpdate(): void;
/**
* Returns an array containing the start and end dates that define the current visible date range in the view. The first element is the start date, and the second element is the end date.
* @returns {Date[]}
*/
getViewDates(): Date[];
/**
* Refreshes the Scheduler by recalculating and updating the scrollbars to ensure proper alignment and visibility based on the current content and layout changes.
* @param {boolean} fullRefresh?. If set the Scheduler will be re-rendered completely.
*/
refresh(fullRefresh?: boolean): void;
/**
* Exports all scheduled events from the Scheduler component, allowing you to download or transfer event data in a supported format (e.g., JSON, CSV, or iCal) for external use, backup, or integration with other applications.
* @param {string} dataFormat. Determines the format of the exported file. The following values are available:
* @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.
* @param {any} dataCallback?. A callback that allows to change the exported data.
*/
exportData(dataFormat: string, callback?: any, dataCallback?: any): void;
/**
* Returns a detailed JSON object containing all the events currently managed by the Scheduler, including properties such as event IDs, titles, start and end times, locations, descriptions, and any custom metadata associated with each event. This allows for programmatic access to the full list of scheduled events for use in external applications or integrations.
* @returns {any}
*/
getDataSource(): any;
/**
* Returns a JSON-encoded object containing the detailed data for all resources managed by the Scheduler, including their unique identifiers, properties, and current state. This allows client applications to programmatically access and manipulate the full list of Scheduler resources in a structured format.
* @returns {any}
*/
getResources(): any;
/**
* Retrieves a date value based on the provided coordinate data, typically by mapping spatial or grid coordinates to a corresponding date in a dataset or timeline.
* @param {number} x. X coordinate.
* @param {number} y. Y coordinate.
* @returns {string}
*/
getDateFromCoordinates(x: number, y: number): string;
/**
* Determines if the cell at the specified coordinates represents an "all-day" cell, typically used for events that span the entire day in a calendar view.
* @param {number} x. X coordinate.
* @param {number} y. Y coordinate.
* @returns {boolean}
*/
getIsAllDayCellFromCoordinates(x: number, y: number): boolean;
/**
* Returns an object representing the current state of the Scheduler. This includes the following properties:
- dateCurrent: The Scheduler’s currently selected or displayed date.
- dataSource: The data source currently used to populate the Scheduler events or appointments.
- timeZone: The time zone setting currently applied to the Scheduler.
Use this method to retrieve a snapshot of the Scheduler’s core settings at any given moment.
* @returns {any}
*/
getState(): any;
/**
* Removes a previously stored state of the element from LocalStorage using its assigned id as the key. An id attribute must be set on the element for this function to work correctly.
*/
clearState(): void;
/**
* Retrieves a previously saved state of the element. If a specific state is provided as an argument, it loads that state. If no argument is passed, the method checks LocalStorage for any existing saved states and loads the most recent one if available.
* @param {any[]} state?. An Array containing a valid structure of Scheduler events. If no state is provided, the element will check localStorage for a saved state.
*/
loadState(state?: any[]): void;
/**
* Stores the current event data associated with the element in LocalStorage. Note: The element must have a unique id attribute set for this functionality to work correctly.
* @param {any[]} state?. An Array containing a valid structure of Scheduler events.
*/
saveState(state?: any[]): void;
/**
* Specifies and activates a custom view for the Scheduler component. For example, the code scheduler.addView('week', 'My View', 'myView', false, false, 10); creates a new view named "My View" of type "week" with the identifier "myView". The parameters control the view's properties, such as its type, display name, unique id, and other options. The following method, scheduler.setView('myView');, then switches the Scheduler to display the newly defined custom view.
* @param {string} view?. The view's value. For example: 'day'.
*/
setView(view?: string): void;
/**
* Determines if a specific event is present within the Scheduler's collection of scheduled events. Returns true if the event exists; otherwise, returns false.
* @param {any} eventObj. A Scheduler event object.
* @returns {boolean}
*/
containsEvent(eventObj: any): boolean;
/**
* Inserts an event object following the dataSource format. The event object supports a comprehensive set of properties for defining event details, appearance, recurrence, and behavior. The structure is as follows:
{
label?: string, // (Optional) Title or name of the event
dateStart: date, // Start date and time of the event (Date object or ISO string)
dateEnd: date, // End date and time of the event (Date object or ISO string)
description?: string, // (Optional) Detailed description of the event
id?: string | number, // (Optional) Unique identifier for the event
class?: string, // (Optional) CSS class for custom styling
backgroundColor?: string, // (Optional) Event background color (CSS color value)
color?: string, // (Optional) Text color for the event (CSS color value)
notifications?: [ // (Optional) Array of notification settings for reminders
{
interval: number, // Time interval before the event to trigger the notification (in minutes)
type?: string, // (Optional) Type of notification (e.g., 'email', 'alert')
time: number[] // Array of specific times (in minutes) for notifications
}
],
allDay?: boolean, // (Optional) If true, the event lasts all day
disableDrag?: boolean, // (Optional) If true, dragging/rescheduling is disabled for this event
disableResize?: boolean, // (Optional) If true, resizing is disabled for this event
repeat?: { // (Optional) Recurrence configuration for repeating events
repeatFreq: string, // Frequency of repetition ('daily', 'weekly', 'monthly', etc.)
repeatInterval: number, // Number of intervals between repeats (e.g., every 2 days)
repeatOn?: number | number[] | date, // (Optional) Specific days/dates the event repeats on
repeatEnd?: number | date, // (Optional) End condition: number of occurrences or end date
exceptions?: [ // (Optional) List of exceptions to recurrence rules
{
date: date, // Date of exception
dateStart?: date, // (Optional) Start time for the exception
dateEnd?: date, // (Optional) End time for the exception
hidden?: boolean, // (Optional) If true, this occurrence is not displayed
backgroundColor?: string, // (Optional) Custom background color for this occurrence
status?: string, // (Optional) Status for this occurrence (e.g., 'cancelled')
label?: string, // (Optional) Custom label for this occurrence
description?: string, // (Optional) Custom description for this occurrence
notifications?: [{ interval: number, type?: string, time: number[] }], // (Optional) Notifications for this occurrence
disableDrag?: boolean, // (Optional) Disable drag for this single occurrence
disableResize?: boolean // (Optional) Disable resize for this single occurrence
}
]
},
status?: string // (Optional) Current status of the event (e.g., 'pending', 'confirmed')
}
**Notes:**
- Properties marked as optional (`?`) can be omitted.
- The structure is fully compatible with dataSource arrays commonly used in calendar or scheduling components.
- The object supports advanced event recurrence and exception handling for maximum flexibility in scheduling applications.
* @param {any} eventObj. An object describing a Scheduler event that is not already present in the element.
* @param {number} index?. A number that represents the index to insert the event at. If not provided the event is inserted at the end of the list.
*/
insertEvent(eventObj: any, index?: number): void;
/**
* Updates an event object that follows the structure below. The event object format matches the dataSource format used by the application. Each property is described for clarity:
{
label?: string, // (optional) The title or name of the event.
dateStart: date, // The start date and time of the event (Date object or valid date string).
dateEnd: date, // The end date and time of the event (Date object or valid date string).
description?: string, // (optional) Detailed information or notes about the event.
id?: string | number, // (optional) A unique identifier for the event (string or number).
class?: string, // (optional) CSS class(es) to style the event in the UI.
backgroundColor?: string, // (optional) Background color for the event, specified as a CSS color value.
color?: string, // (optional) Text color for the event, specified as a CSS color value.
notifications?: [ // (optional) Array of notification settings for the event.
{
interval: number, // Time interval before an event for sending a notification (in minutes/hours).
type?: string, // (optional) Notification type (e.g., "email", "popup").
time: number[] // Array of times (in minutes/hours) to trigger the notification.
}
],
allDay?: boolean, // (optional) Indicates if the event spans the entire day.
disableDrag?: boolean, // (optional) Prevents the event from being moved via drag-and-drop in the UI.
disableResize?: boolean, // (optional) Prevents the event from being resized in the UI.
repeat?: { // (optional) Recurrence settings for repeating events.
repeatFreq: string, // Frequency of repetition (e.g., "daily", "weekly", "monthly").
repeatInterval: number, // The interval between repetitions (e.g., every 2 days).
repeatOn?: number | number[] | date, // (optional) Specific days or dates when the event repeats (e.g., day of week).
repeatEnd?: number | date, // (optional) End of the recurrence - number of occurrences or a specific date.
exceptions?: [ // (optional) List of exceptions/dates when the event does not occur or details of modified occurrences.
{
date: date, // The exception date (date when event does not occur or is modified).
dateStart?: date, // (optional) Modified start date/time for the exception occurrence.
dateEnd?: date, // (optional) Modified end date/time for the exception occurrence.
hidden?: boolean, // (optional) If true, hides this occurrence.
backgroundColor?: string, // (optional) Background color override for this occurrence.
status?: string, // (optional) Custom status for this occurrence.
label?: string, // (optional) Custom label/title for this occurrence.
description?: string, // (optional) Custom description for this occurrence.
notifications?: [ // (optional) Notification settings specifically for this occurrence.
{
interval: number,
type?: string,
time: number[]
}
],
disableDrag?: boolean, // (optional) Prevents this occurrence from being dragged in the UI.
disableResize?: boolean // (optional) Prevents this occurrence from being resized in the UI.
}
]
},
status?: string // (optional) The current status of the event (e.g., "confirmed", "tentative", "cancelled").
}
When updating the event object, all or some of these properties can be included based on which attributes need to be modified. This flexible structure allows for basic one-time events, as well as complex recurring events with customized properties and exceptions.
* @param {any} index. A number that represents the index of an event or a Scheduler event object.
* @param {any} eventObj. An object describing a Scheduler event. The properties of this object will be applied to the desired event.
*/
updateEvent(index: any, eventObj: any): void;
/**
* Deletes a specified event from the system, permanently removing its associated data and making it no longer accessible or visible to users.
* @param {any} index. A number that represents the index of an event or the actual event object to be removed.
*/
removeEvent(index: any): void;
/**
* Returns an array containing all exception instances associated with the specified recurring event. Each exception represents a single occurrence within the event series that differs from the original recurrence pattern, such as modified dates, details, or cancellations.
* @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
* @returns {any}
*/
getEventExceptions(eventObj: any): any;
/**
* Adds an exception to a recurring event, allowing you to modify or override specific occurrences in a repeating event series. Event exceptions are useful for handling changes such as rescheduling a single meeting in a weekly series, skipping a date, or altering event details for one instance without affecting the entire series.
You can retrieve the individual occurrences of a recurring event using the following methods:
- occurrences: Returns an array of all occurrences for a recurring event.
- occurrencesBetween(startDate, endDate): Returns all occurrences that fall within the specified date range.
- occurrenceAfter(date): Returns the first occurrence after the given date.
- occurrenceBefore(date): Returns the last occurrence before the given date.
To add an exception, call addEventException with the event object and a configuration object specifying the desired changes for a particular occurrence (such as a new date or label):
Example usage:
scheduler.addEventException(eventObj, {
date: occurrenceDate, // Date of the occurrence to override
dateStart: newDateStart, // New start date/time for this exception
dateEnd: newDateEnd, // New end date/time for this exception
label: 'Exception' // (Optional) Label or description for this exception
});
This will create a customized exception for the specified recurrence, ensuring only the selected occurrence is modified while all other instances remain unaffected.
* @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
* @param {any} exceptionObj. An event object that describes an exception. Exception event objects must have a date attribute of type Date which indicates the date of occurence.
*/
addEventException(eventObj: any, exceptionObj: any): void;
/**
* Updates a single exception occurrence within a recurring event series.
To retrieve the specific exception occurrences of a repeating event, you can use these methods:
- occurrences: Returns all instances of the recurring event, including exceptions.
- occurrencesBetween: Retrieves event occurrences that fall within a specified date range.
- occurrenceAfter: Finds the next occurrence after a given date.
- occurrenceBefore: Finds the previous occurrence before a given date.
Use the updateEventException method to modify the details of a particular occurrence (exception) in a recurring event series. Supply:
- eventObj - The original recurring event object.
- dateOfOccurrence - The date/time identifying the specific occurrence to update.
- changes - An object specifying the updates for this exception (such as new start/end times, label, etc.).
Example usage:
scheduler.updateEventException(
eventObj,
dateOfOccurrence,
{ dateStart: newDateStart, dateEnd: newDateEnd, label: 'Updated Exception' }
);
This call will update only the specified exception occurrence, leaving the rest of the recurring series unchanged.
* @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
* @param {any} exceptionRef. The index, id, an occurence date of the exception or an object reference of an existing Scheduler repeating event exception.
* @param {any} exceptionObj. An event object that describes an exception. All attributes of an exception can be updated except the occurance date (the date attribute).
*/
updateEventException(eventObj: any, exceptionRef: any, exceptionObj: any): void;
/**
* Removes a specified exception instance from a recurring event series, thereby restoring the affected occurrence to match the original recurring pattern.
* @param {any} eventObj. The index, id or an object reference of an existing repeating Scheduler event.
* @param {any} index. The index, id, occurance date or an object reference of an event exception that belongs to the target repeating event.
*/
removeEventException(eventObj: any, index: any): void;
/**
* Opens a popup window that allows users to view and edit the details of a selected event. This enables modification of event information such as title, date, time, location, and other relevant attributes.
* @param {any} index. A number that represents the index of a event or the actual event object to be edited.
*/
openWindow(index: any): void;
/**
* Closes the currently open popup window, removing it from view and returning focus to the main application interface.
*/
closeWindow(): void;
/**
* Prepares the Scheduler component for printing by formatting its layout and content for optimal print output, then triggers the browser’s Print Preview dialog for the user to review and print the schedule.
*/
print(): void;
/**
* Scrolls the Scheduler component to display the specified date. This method ensures that the view is brought to the appropriate date slot, making it visible to the user. If the date is not currently in view, the Scheduler will automatically scroll horizontally or vertically as needed to reveal the target date.
* @param {Date} date. The date to scroll to.
* @param {boolean} strictScroll?. Determines whether to scroll strictly to the date or not. This mean sthat the Scheduler wll scroll to the begining of the cell that corresponds to the target date.
* @param {boolean} autoScroll?. Calculates the scroll positions and element bounds, then adds an offset to scroll within the middle of the view.
*/
scrollToDate(date: Date, strictScroll?: boolean, autoScroll?: boolean): void;
/**
* Transitions the Scheduler interface to display and focus on a specific date selected by the user.
* @param {Date} date. The date to navigate to.
*/
navigateToDate(date: Date): void;
/**
* Smoothly scrolls the Scheduler component to bring the specified event into view, ensuring it is visible to the user in the current viewport.
* @param {any} index. The index of a Scheduler event or the actual event object to scroll to.
*/
scrollToEvent(index: any): void;
/**
* Displays a custom notification to the user, allowing you to specify the message content, style, and behavior. This function enables dynamic alerts or updates within the application’s user interface.
* @param {string} message. The notification message.
* @param {any} toastSettings. Smart.Toast settings to be applied to the Toast element when opening the notification.
*/
openNotification(message: string, toastSettings: any): void;
/**
* Dismisses and removes all currently active notifications from view, ensuring that no notification messages remain visible to the user.
*/
closeNotifications(): void;
/**
* Returns a list of all instances where the specified event occurs within the data set. Each occurrence is represented as an individual object or record, providing detailed information about that specific event instance. This enables comprehensive tracking and analysis of every time the event takes place.
* @param {any} eventObj. A Scheduler evnet object.
* @param {number} count. The number of occurances to return. By default 100 date occurances of the event are returned.
*/
occurrences(eventObj: any, count: number): void;
/**
* Returns a list of all occurrences of a specified event that take place within the given start and end date range, inclusive. Each occurrence includes detailed event information and falls between the provided dates.
* @param {any} eventObj. A Scheduler event object.
* @param {Date} dateFrom. The start date.
* @param {Date} dateTo. The end date.
*/
occurrencesBetween(eventObj: any, dateFrom: Date, dateTo: Date): void;
/**
* Returns the first occurrence of an event that takes place after the specified date. This function searches through the list of events and retrieves the earliest event whose date is strictly later than the provided reference date. If no such event exists, it returns null or an appropriate default value.
* @param {any} eventObj. A Scheduler event object.
* @param {number} date. The date after which the first occurance of the event will be returned.
*/
occurrenceAfter(eventObj: any, date: number): void;
/**
* Returns the most recent occurrence of the specified event that occurred before the given date.
* @param {any} eventObj. A Scheduler event object.
* @param {number} date. The date before which the first occurance of the event will be returned.
*/
occurrenceBefore(eventObj: any, date: number): void;
/**
* Returns the start and end dates (dateStart/dateEnd) for a specific timeline cell, representing the time interval covered by that cell on the timeline.
* @param {HTMLElement} cell. A Scheduler timeline cell element.
* @returns {any}
*/
getCellDateRange(cell: HTMLElement): any;
/**
* Displays the tooltip (event menu) associated with a specific event, providing additional information and context about the selected event when triggered.
* @param {any} eventObj. A Scheduler event object or it's index.
*/
openEventTooltip(eventObj: any): void;
/**
* Closes and hides the event tooltip (also known as the event menu), removing it from view and preventing further interactions until it is reopened.
*/
closeEventTooltip(): void;
/**
* Determines if the specified date is restricted. Returns true if the date falls within the set of restricted dates; otherwise, returns false.
* @param {Date} date. A Date object.
* @returns {boolean}
*/
isDateRestricted(date: Date): boolean;
/**
* Determines whether the specified hour is restricted. Returns true if the hour falls within a restricted period; otherwise, returns false.
* @param {number | Date} hour. A number that represents an hour ( 0 to 23 ) or a Date object.
* @returns {boolean}
*/
isHourRestricted(hour: number | Date): boolean;
/**
* Determines if the event is restricted by returning a boolean value: true if the event has access restrictions, or false if it is open to all users.
* @param {any} eventObj. A Scheduler event object or a direct event HTMLElement instance.
* @returns {boolean}
*/
isEventRestricted(eventObj: any): boolean;
/**
* Removes all existing entries from the undo and redo history, clearing any previous actions and preventing the user from undoing or redoing changes made prior to this operation.
* @returns {boolean}
*/
deleteUndoRedoHistory(): boolean;
/**
* Specifies whether the action can be redone, indicating if there is a subsequent step available in the redo history that allows the user to reverse a previous undo operation.
* @returns {boolean}
*/
canRedo(): boolean;
/**
* Specifies whether the most recent action can be undone by the user. If set to true, the user has the option to revert or reverse the previous action; if false, the action cannot be undone.
* @returns {boolean}
*/
canUndo(): boolean;
/**
* Revert the changes made to the upcoming event modification, restoring the event to its previous state.
* @param {number} step?. A step to redo to.
* @returns {boolean}
*/
redo(step?: number): boolean;
/**
* Revert the most recent changes made to the event, restoring it to its previous state.
* @param {number} step?. A step to undo to.
* @returns {boolean}
*/
undo(step?: number): boolean;
/**
* Sets the locale of a component.
* @param {string} locale. The locale abbreviation. For example: 'de'.
* @param {any} messages?. Object containing the locale messages.
*/
setLocale(locale: string, messages?: any): void;
}
/**Configures the data export settings for the Scheduler, including file format, export range, and additional export-related options. */
export interface SchedulerDataExport {
/**
* Determines whether the column headers will be included when exporting data. If enabled, the exported file will contain a row with the names of each column at the top.
* Default value: true
*/
header?: boolean;
/**
* Specifies the names of the event properties that will be included as separate columns in the exported data, allowing each property's value to appear in its own column within the resulting file.
* Default value:
*/
columns?: string[];
/**
* Specifies a custom style object to apply to the dataExport, allowing you to define the appearance—such as fonts, colors, and formatting—of the exported data.
* Default value: null
*/
style?: any;
/**
* Specifies the name that will be assigned to the exported file when it is downloaded or saved.
* Default value: "jqxScheduler"
*/
fileName?: string;
/**
* Specifies the orientation (portrait or landscape) of the page layout when exporting the document to PDF format. This setting determines how the content is arranged on each PDF page.
* Default value: "portrait"
*/
pageOrientation?: string;
}
export interface SchedulerEvent {
/**
* Event Repeat Object.
* Default value: undefined
*/
repeat?: SchedulerEventRepeat;
/**
* Event CSS class.
* Default value: ""
*/
class?: string;
/**
* Event start date.
* Default value:
*/
dateStart?: string | Date;
/**
* Event end date.
* Default value:
*/
dateEnd?: string | Date;
/**
* Determines whether dragging is disabled for the event.
* Default value: false
*/
disableDrag?: boolean;
/**
* Determines whether resizing is disabled for the event.
* Default value: false
*/
disableResize?: boolean;
/**
* Event unique id.
* Default value: ""
*/
id?: string;
/**
* Event Label.
* Default value: ""
*/
label?: string;
/**
* Event Description.
* Default value: ""
*/
description?: string;
/**
* Determines whether an event is an all day event ot nor. All day events ignore time.
* Default value: false
*/
allDay?: boolean;
/**
* Sets a background color for the event. The background color should be in HEX format.
* Default value: "false"
*/
backgroundColor?: string;
/**
* Sets a color for the event. The color should be in HEX format.
* Default value: "false"
*/
color?: string;
/**
* Sets the appointment status.
* Default value: "false"
*/
status?: string;
/**
* Event resource unique id.
* Default value: ""
*/
resourceId?: string;
/**
* Event notifications.
* Default value: null
*/
notifications?: SchedulerNotification[];
}
/**Event Repeat Object. */
export interface SchedulerEventRepeat {
/**
* Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly.
* Default value: hourly
*/
repeatFreq?: SchedulerRepeatFreq | string;
/**
* Determines the repeating interval.
* Default value: 1
*/
repeatInterval?: number;
/**
* Determines on wah day/date the event will repeat on. This is applicable only when repeatFreq is of type 'weekly' ( allows to pick the days of week from 0 to 6, where 0 is Sunday and 6 is Saturday), 'monthly' ( allows to pick a date of the month from 0 to 31) or 'yearly' (allows to pick a particular Date to repeat on. The date can be set as a Date or an object of type{ month: string, date: number }).
* Default value:
*/
repeatOn?: any;
/**
* Determines when the repeating event will end. By default it does not have an end condition. If the value is set to a number than it is considered as the number of time the event will repeat before it ends. If it's a Date then it is considered as the end date for the repeating series. If not set it will never end.
* Default value: 0
*/
repeatEnd?: number | Date | undefined;
/**
* Event exceptions represent a repeating series event that has been re-scheduler for another date/time or it has been hidden from the Scheduler. Exceptions cannot repeat.
* Default value: undefined
*/
exceptions?: { Date: string | Date, DateStart: Date | string, DateEnd: Date | string, backgroundColor: string, color: string, hidden: boolean }[] | undefined;
}
export interface SchedulerNotification {
/**
* The number of days/weeks when the notification should appear before the event starts.
* Default value: 0
*/
interval?: number;
/**
* The type of the interval for the notification.
* Default value: days
*/
type?: SchedulerNotificationType | string;
/**
* An array that represents the time when the notification should appear before the event starts. The array should have the following format: [hours: number, minutes:number]
* Default value:
*/
time?: number[];
/**
* The message that will appear inside the notificaiton. If no message is set, then the label of the event is displayed.
* Default value: ""
*/
message?: string;
/**
* Determines the type of icon that will be displayed inside the notification. By default the iconType is 'info'.
* Default value: ""
*/
iconType?: string;
}
export interface SchedulerResource {
/**
* Resource label.
* Default value: ""
*/
label?: string;
/**
* Resource unique value.
* Default value: ""
*/
value?: string;
/**
* An array that defined the data of the resources. The data represents objects that should contain the following proeprties: lable - the label for the resource item.id - the unique id for the resource item.backgroundColor - the background color for the events that have the resource item assigned.color - the color for the events that have the resource item assigned.
* Default value:
*/
dataSource?: any;
/**
* Determines the property name to sort the dataSource by.
* Default value: "null"
*/
sortBy?: string;
/**
* Determines the custom sorting function that will be used to sort the resource dataSource. The sortFunction is used when sortOrder is set to custom.
* Default value: null
*/
sortFunction?: any;
/**
* Determines the sorting order. When set to custom, a custom sorting function has to be defined for the sortFunction property. The asc stands for 'ascending' while desc means 'descending' sorting order.
* Default value: asc
*/
sortOrder?: SchedulerResourceSortOrder | string;
}
export interface SchedulerStatuse {
/**
* Status label.
* Default value: ""
*/
label?: string;
/**
* Status unique value.
* Default value: ""
*/
value?: string;
}
declare global {
interface Document {
createElement(tagName: "smart-scheduler"): Scheduler;
querySelector(selectors: "smart-scheduler"): Scheduler | null;
querySelectorAll(selectors: "smart-scheduler"): NodeListOf;
getElementsByTagName(qualifiedName: "smart-scheduler"): HTMLCollectionOf;
getElementsByName(elementName: "smart-scheduler"): NodeListOf;
}
}
/**Determines the rendering style for events displayed within the Scheduler component.
classic – Events are visually arranged side-by-side within each cell, with their sizes adjusted to ensure they fit entirely within the cell boundaries. If multiple events overlap in the same time slot, they are compressed horizontally to avoid overflow and remain fully visible within the cell.
modern – Events adhere to their specified CSS size properties, such as height and width, rather than automatically resizing to fit the cell. If there are more events than can visibly fit within a cell, an "event collector" (typically a counter or indicator) is displayed that, when clicked, reveals the hidden events in a popup or modal. On mobile devices, due to limited screen space, only event collectors are shown within each cell, requiring the user to tap to view the full list of events.
*/
export declare type SchedulerEventRenderMode = 'classic' | 'modern';
/**Determines the repeating frequency. The event can repeat hourly, daily, weekly, monthly or yearly. */
export declare type SchedulerRepeatFreq = 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly';
/**The type of the interval for the notification. */
export declare type SchedulerNotificationType = 'days' | 'weeks';
/**Specifies the display format for the day component of dates shown in the timeline. This setting controls how days are rendered, such as numeric (e.g., "12"), abbreviated (e.g., "Mon"), or full weekday names (e.g., "Monday"), to match the desired presentation style in the timeline. */
export declare type SchedulerDayFormat = '2-digit' | 'numeric' | 'long' | 'short' | 'narrow';
/**Specifies the method used to filter or process data, such as applying different algorithms or rules to control how information is displayed, sorted, or selected. The chosen filter mode affects how results are generated and presented. */
export declare type FilterMode = 'contains' | 'containsIgnoreCase' | 'doesNotContain' | 'doesNotContainIgnoreCase' | 'equals' | 'equalsIgnoreCase' | 'startsWith' | 'startsWithIgnoreCase' | 'endsWith' | 'endsWithIgnoreCase';
/**Specifies the direction or axis along which items are grouped, such as horizontal or vertical, affecting how elements are arranged and displayed within the interface. */
export declare type SchedulerGroupOrientation = 'horizontal' | 'vertical';
/**Specifies how hours are displayed within the element, including aspects such as 12-hour or 24-hour format, inclusion of leading zeros, and any relevant separators or annotations (e.g., AM/PM). */
export declare type SchedulerHourFormat = '2-digit' | 'numeric';
/**Specifies the placement of the Date selector within the Header section of the component, allowing you to control where the Date selector appears relative to other header elements. */
export declare type SchedulerHeaderDatePosition = 'far' | 'near';
/**Defines and customizes the appearance and layout of the header navigation controls, including their colors, fonts, spacing, and interactive states. This setting allows you to adjust how navigation elements are presented in the header section of the application or website. */
export declare type SchedulerHeaderNavigationStyle = 'flat' | 'raised';
/**Specifies the exact location of the view selector control within the header section of the element, allowing you to control where the selector appears in relation to other header components. */
export declare type SchedulerHeaderViewPosition = 'far' | 'near';
/**Specifies where the legend is displayed within the Scheduler component. By default, the legend appears in the footer section, but it can be configured to display in the header instead. This setting allows you to customize the placement of the legend to better fit your application's layout and user experience requirements. */
export declare type SchedulerLegendLocation = 'footer' | 'header';
/**Specifies the placement of the legend within the chart area. By default, the legend appears on the 'near' side (typically aligned to the left or top, depending on chart orientation). Setting this property to 'far' positions the legend on the opposite side (right or bottom), allowing customization of the legend's location to better suit your layout needs. */
export declare type SchedulerLegendPosition = 'near' | 'far';
/**Specifies how the legend items are arranged within the chart, such as organizing them in a horizontal row, vertical column, or a customized layout. This property controls the visual structure and ordering of items displayed in the legend. */
export declare type SchedulerLegendLayout = null | 'auto' | 'menu';
/**Specifies whether the horizontal scrollbar is visible. If set to true, a horizontal scrollbar will appear when the content overflows the container’s width; if false, the scrollbar will be hidden regardless of overflow. */
export declare type HorizontalScrollBarVisibility = 'auto' | 'disabled' | 'hidden' | 'visible';
/**Specifies how minutes are displayed and formatted within the Scheduler component. This setting controls the appearance of minute values in time slots, event times, and related areas, ensuring consistency in how minutes are presented to users (e.g., "5", "05", or "5 min"). */
export declare type MinuteFormat = '2-digit' | 'numeric';
/**Specifies the format in which month names are displayed within the Scheduler component. This setting controls whether full month names (e.g., "January"), abbreviated names (e.g., "Jan"), or custom formats appear in the Scheduler's interface wherever month names are shown. */
export declare type MonthFormat = '2-digit' | 'numeric' | 'long' | 'short' | 'narrow';
/**Controls whether the resize handles are visible to the user, allowing them to resize the element. When enabled, resize handles will appear on the edges or corners of the element; when disabled, resize handles will be hidden and resizing will not be possible via the user interface. */
export declare type ResizeHandlesVisibility = 'auto' | 'hidden' | 'visible';
/**Determines the sorting order. When set to custom, a custom sorting function has to be defined for the sortFunction property. The asc stands for 'ascending' while desc means 'descending' sorting order. */
export declare type SchedulerResourceSortOrder = 'asc' | 'desc' | 'custom';
/**Specifies the placement of the date navigation buttons within the element’s header, determining where buttons such as “Previous”, “Next”, or “Today” appear in relation to other header content. */
export declare type SchedulerScrollButtonsPosition = 'both' | 'far' | 'near';
/**Specifies how the resource data items should be sorted. Acceptable values are asc for ascending order and desc for descending order. If set to custom, you must also provide a custom sorting function using the sortFunction property. The chosen sorting order determines how the data items are organized and displayed. */
export declare type SchedulerSortOrder = 'asc' | 'desc' | 'custom';
/**Specifies the time interval (such as days, weeks, or months) used to label and organize each cell within the timeline, controlling how dates are displayed and grouped. */
export declare type SchedulerTimelineDayScale = 'hour' | 'halfHour' | 'quarterHour' | 'tenMinutes' | 'fiveMinutes';
/**Specifies the time zone to be applied to the element. If this property is not set, the element defaults to using the user's local time zone. */
export declare type SchedulerTimeZone = 'Local' | 'Dateline Standard Time' | 'UTC-11' | 'Hawaiteratoran Standard Time' | 'Alaskan Standard Time' | 'Pacific Standard Time (Mexico)' | 'Pacific Standard Time' | 'US Mountain Standard Time' | 'Mountain Standard Time (Mexico)' | 'Mountain Standard Time' | 'Central Standard Time' | 'Central America Standard Time' | 'Canada Central Standard Time' | 'Central Standard Time (Mexico)' | 'SA Pacific Standard Time' | 'Eastern Standard Time' | 'US Eastern Standard Time' | 'Venezuela Standard Time' | 'Atlantic Standard Time' | 'Paraguay Standard Time' | 'Central Brazilian Standard Time' | 'Pacific SA Standard Time' | 'SA Western Standard Time' | 'Newfoundland Standard Time' | 'SA Eastern Standard Time' | 'Argentina Standard Time' | 'E. South America Standard Time' | 'Bahia Standard Time' | 'Montevideo Standard Time' | 'Greenland Standard Time' | 'UTC-02' | 'Mid-Atlantic Standard Time' | 'Azores Standard Time' | 'Cape Verde Standard Time' | 'Morocco Standard Time' | 'UTC' | 'GMT Standard Time' | 'Greenwich Standard Time' | 'Central European Standard Time' | 'Namibia Standard Time' | 'W. Central Africa Standard Time' | 'W. Europe Standard Time' | 'Central Europe Standard Time' | 'Romance Standard Time' | 'FLE Standard Time' | 'South Africa Standard Time' | 'Turkey Standard Time' | 'GTB Standard Time' | 'Libya Standard Time' | 'E. Europe Standard Time' | 'Jordan Standard Time' | 'Middle East Standard Time' | 'Egypt Standard Time' | 'Syria Standard Time' | 'Israel Standard Time' | 'Arab Standard Time' | 'E. Africa Standard Time' | 'Arabic Standard Time' | 'Kaliningrad Standard Time' | 'Iran Standard Time' | 'Mauritius Standard Time' | 'Georgian Standard Time' | 'Caucasus Standard Time' | 'Arabian Standard Time' | 'Azerbaijan Standard Time' | 'Russian Standard Time' | 'Afghanistan Standard Time' | 'Pakistan Standard Time' | 'West Asia Standard Time' | 'India Standard Time' | 'Sri Lanka Standard Time' | 'Nepal Standard Time' | 'Central Asia Standard Time' | 'Bangladesh Standard Time' | 'Ekaterinburg Standard Time' | 'Myanmar Standard Time' | 'SE Asia Standard Time' | 'N. Central Asia Standard Time' | 'Ulaanbaatar Standard Time' | 'China Standard Time' | 'Singapore Standard Time' | 'North Asia Standard Time' | 'Taipei Standard Time' | 'W. Australia Standard Time' | 'Korea Standard Time' | 'North Asia East Standard Time' | 'Tokyo Standard Time' | 'AUS Central Standard Time' | 'Cen. Australia Standard Time' | 'West Pacific Standard Time' | 'Tasmania Standard Time' | 'E. Australia Standard Time' | 'AUS Eastern Standard Time' | 'Yakutsk Standard Time' | 'Vladivostok Standard Time' | 'Central Pacific Standard Time' | 'Magadan Standard Time' | 'Kamchatka Standard Time' | 'Fiji Standard Time' | 'New Zealand Standard Time' | 'UTC+12' | 'Tonga Standard Time' | 'Samoa Standard Time';
/**Specifies whether the vertical scrollbar is visible, allowing users to scroll content vertically when necessary. Set to true to display the vertical scrollbar, or false to hide it. */
export declare type VerticalScrollBarVisibility = 'auto' | 'disabled' | 'hidden' | 'visible';
/**Specifies the current view type of the Scheduler component (e.g., 'day', 'week', 'month'). When defining custom views, ensure that each view includes a valid type property matching one of the supported view types. Note: This property is managed internally by the Scheduler and should not be set manually in your configuration. */
export declare type SchedulerViewType = 'day' | 'week' | 'month' | 'agenda' | 'timelineDay' | 'timelineWeek' | 'timelineMonth';
export declare type SchedulerViews = SchedulerViewType[] | object[] | string[];
/**Specifies the type of view selector that appears in the element's header, which controls how content is displayed (e.g., as a list, grid, or table view). This setting determines the layout options available to the user within the header section of the component. */
export declare type SchedulerViewSelectorType = 'auto' | 'tabs' | 'menu';
/**Configures the rule used to determine the start date in Week and TimelineWeek views. By default, these views start from the current date, factoring in the value specified by the 'firstDayOfWeek' property. If the 'startDateRule' property is set to 'dateCurrent', the Week and TimelineWeek views will instead start from the date provided in the 'dateCurrent' property, overriding the default behavior. */
export declare type SchedulerViewStartDay = 'firstDayOfWeek' | 'dateCurrent';
/**Specifies how the names of the weekdays are displayed within the element (e.g., full names, short names, or initials). */
export declare type WeekDayFormat = 'short' | 'long' | 'narrow';
/**Specifies the date format used to display years within the timeline header. This setting controls how year values are rendered (e.g., "YYYY", "YY", or "yyyy") when the header represents years, ensuring consistent and readable date presentation. */
export declare type YearFormat = '2-digit' | 'numeric';