Scheduler

This component is used to display a calendar with events. Events are loaded through calling a target specified in the field definition. Events can be edited and created directly on the component.

Events with custom colors from target:

Targets

To display events on the scheduler you must provide target information that will be called and return your data.

The target must return the following columns:

• InstanceGUID
  • The InstanceGUID of the event
• Title
  • The title of the event that will be displayed on the scheduler
• StartDate
  • The start date (DateTime) of the event
• EndDate
  • The end date (DateTime) of the event
• AllDayEvent
  • A String field that either contains Yes or No to determine if the event spans all day for the date range.
• EventColor
  • A String field that returns a custom color for the event. To use default, return an empty string.
• TitleColor
  • A String field that returns a custom color for the event title. To use default, return an empty string.

IMPORTANT NOTE: The two color fields are hardcoded in the target and not pulled from a data model (View the template to see example). Find a list of possible color values here provided by W3Schools.

Event Type Requirements

An event type is simply a concept, it can be any concept that already exists so long as it has the required fields.

The minimum field requirements to have a concept display in the scheduler are the following:

• A string field with the XML Element Name Title – This will be the title used for the event.
• A GUID Field Options field with the possible options Yes and No with the XML Element Name AllDayEvent – This will be used to determine if the event is an all-day event.
• A Period field with the XML Element Name EventDateTime – This will be used as the events start/end date.

Component Code

The first section contains the standard parameters and the variables used by the component. Below are the various methods used by the component.

OnParametersSetAsync()

This method is called when the component is initialized and anytime there’s an update to its parent component. Its purpose is to initialize variables and pull updated event data by calling the GetSchedulerData() method.

SetupAutoRefreshTimer()

This method is called when data auto refresh is enabled and will configure a timer to refresh the data.

IDisposable.Dispose()

This method is called when the component is disposed to additionally dispose the auto refresh timer.

GetSchedulerData()

This method is used to call the target specified in the field definition. The StartDate and EndDate parameter values are determined by the current view of the scheduler. This is to ensure that only the events the user can currently see are loaded.

Once the target has been called, the data is parsed and converted into SchedulerEvent objects to be displayed on the scheduler.

OnViewChange()

This method is called when the view of the scheduler has changed. Its purpose is to correctly update the view and load the events that are visible in that view. For Example, the view is changed to monthly and December of 2022 is visible, only the events for December 2022 will be loaded and displayed.

OnDateChange()

This method is called when the selected date is changed. Its purpose is to correctly update the date and load the events that are visible for that date based on the current view of the scheduler. For Example, the view is monthly and the date December 7 2022 is selected, only the events for December 2022 will be loaded and displayed.

OnUpdateHandler(SchedulerUpdateEventArgs args)

This method is called when the update event on the Scheduler is called. This method handles updating the events start/end date and time. The update event is triggered by the following actions:

• Selecting an event and dragging it to a new day or time slot on the scheduler
• Selecting and dragging either the top or bottom of an event to adjust the events length

OnEditHandler(SchedulerEditEventArgs args)

This method is called when the edit event on the Scheduler is called. This method handles editing an existing event or creating a new one. The edit event is triggered by the following actions:

• Double clicking an existing event – This will open the event in a popup window
• Double clicking an empty timeslot on the scheduler – This will create a new event in that timeslot and display it in a popup window
  • If more than one types of events can be created (specified in the field definitions Allowed Scheduler Concepts field) then an additional popup window will be displayed asking the user to specify which event to create

CreateSelectedEventType()

This method is called when the user attempts to create a new event when there’s more than one event type specified in the field definitions Allowed Scheduler Concepts field.

Once the user has selected the event type then this method will create it and display it in a popup window.

BuildXML(SchedulerEvent myEvent)

This method is used to build the XML that will be added to the events InstanceData during creation or when being updated. It receives a SchedulerEvent object and uses the start and end datetimes to generate a new EventDateTime element.

DisposeInstanceWindow(DotNetObjectReference<InstanceWindow> instanceWindowObjRef)

This method is used to properly dispose the InstanceWindow component when it’s closed by the user. The InstanceWindow component is used to display events in a popup window.