new Schedule(client, oOptionsopt)
The ExSchedule/JS component provides scheduling of appointments into your application. Features include:
- Groups support (group or filter the events)
- Repetitive events support
- and much more
Every option of the Schedule.Options type has associated a property of the control. For instance, the option:
allowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlis associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlwhich means that the following statements are equivalent:
oSchedule.Options = {allowActions: "scroll"}where oSchedule is an object of Schedule type
oSchedule.SetOptions({allowActions: "scroll"})
oSchedule.AllowActions = "scroll"
oSchedule.SetAllowActions("scroll")
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
client |
any | The client parameter indicates the control's client area as:
|
|
oOptions |
object |
<optional> |
An object of Schedule.Options type that defines different options to display the control. |
Requires:
- module:exontrol.commmon.min.js
- module:exontrol.calendar.min.js
- module:exontrol.menu.min.js
Requires
- module:exontrol.commmon.min.js
- module:exontrol.calendar.min.js
- module:exontrol.menu.min.js
Classes
Members
(static, readonly) EventResizableEnum :number
The Schedule.EventResizableEnum type indicates the margins of the events that can be resized. The Resizable event property indicates the margins of the event that user can resize at runtime.
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exNoResizable |
number | The exNoResizable field indicates that the event can not be resized. |
exResizableStart |
number | The exResizableStart field indicates that only the starting point of the event can be resized. |
exResizableEnd |
number | The exResizableEnd field indicates that only the ending point of the event can be resized. |
exResizableBoth |
number | The exResizableBoth field indicates a sizeable event, so the user can resize at runtime the start or end point of the event. |
(static, readonly) OnResizeControlEnum :number
The Schedule.OnResizeControlEnum type defines the options to specify what the control does when the control or a portion of the control is resized.
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exResizePanelLeft |
number | The exResizePanelLeft value specifies that the left panel of the control is resized, once the entire-control gets resized. If this flag is set the calendar view is resized once the control is resized, unless the exChangePanels flag is set, as the schedule will be resized. |
exResizePanelRight |
number | The exResizePanelRight value specifies that the right panel of the control is resized, once the entire-control gets resized. If this flag is set the schedule view is resized once the control is resized, unless the exChangePanels flag is set, as the calendar will be resized. |
exDisableSplitter |
number | The exDisableSplitter flag disables the splitter, so the user can not resize the panels using the control's vertical split bar. |
exHideSplitter |
number | The exHideSplitter flag hides the splitter. This flag allows you to display a single panel, the calendar or the schedule view at once. If the exHideSplitter is used in combination with the exChangePanels, the schedule view is shown only, else the calendar panel is displayed only |
exChangePanels |
number | The exChangePanels flag exchanges the content of the panels. If this flag is present, the schedule view is displayed on the left, while the calendar panel is shown on the right side of the component. |
exCalendarFit |
number | The exCalendarFit flag ensures that the calendar fits to the panel that hosts it. If this flag is present, the Calendar panel can not show its content partially. |
exCalendarAutoHide |
number | The exCalendarAutoHide flag turns on or off the calendar panel when the cursor leaves the panels. The auto hide feature allows you to hide the calendar panel, while the cursor is not in it, so the schedule view gains the entire client area. |
(static, readonly) OnSelectDateEnum :number
The Schedule.OnSelectDateEnum type specifies the action the control performs once a new date is selected in the calendar panel. The OnSelectDate property indicates the operation to perform when user selects a new date in the calendar panel.
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exFitSelToView |
number | The exFitSelToView value specifies that once the selection is changed within the calendar panel, the day's size is updated and the view is scrolled to fit the calendar's selection (default). |
exNoViewChange |
number | The exNoViewChange value indicates that no change occurs once the user changes the selection within the calendar panel. |
exEnsureVisibleDate |
number | The exEnsureVisibleDate value specifies that once the selection is changed within the calendar panel, the view is scrolled to ensure that the calendar's selected date fits the schedule view |
(static, readonly) ShowViewCompactEnum :number
The Schedule.ShowViewCompactEnum type indicates the way the control displays the dates within the schedule panel. The ShowViewCompact property specifies the way the control arranges the dates in the schedule view.
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exViewCalendar |
number | The exViewCalendar value indicates that the schedule view arranges the days as they are shown in the calendar panel. |
exViewCalendarCompact |
number | The exViewCalendarCompact value indicates that the schedule view arranges the days as they are shown in the calendar panel, excepts that the first day of the month starts right after the last day of the previously month, or start to a new row (default). |
exViewSingleRow |
number | The exViewSingleRow value indicates that the schedule view arranges all days to a single row (horizontally). |
exViewSingleColumn |
number | The exViewSingleColumn value indicates that the schedule view arranges all days to a single column (vertically). |
exViewSingleRowLockHeader |
number | The exViewSingleRowLockHeader value indicates that schedule view arranges all days to a single row (horizontally), while the date header is shown/locked on the top while the chart is vertically scrolled. |
(static, readonly) SingleSelEnum :number
The Schedule.SingleSelEnum type defines flags the singleSel/SetSingleSel/GetSingleSel method uses.
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exDisableSel |
number | The exDisableSel value specifies that the control's selection is disabled. |
exEnableSel |
number | The exEnableSel flag specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set ). |
exSingleSel |
number | The exSingleSel flag specifies that the user can select a event only. |
exToggleSel |
number | The exToggleSel flag specifies that the event's selection state is toggled once the user clicks a event. |
exDisableCtrlSel |
number | The exDisableCtrlSel flag disables toggling the event's selection state when user clicks a event, while CTRL modifier key is pressed. |
exDisableShiftSel |
number | The exDisableShiftSel flag disables selecting events using the SHIFT key. |
exDisableDrag |
number | The exDisableDrag flag disables selecting events by drag. |
(static) version :string
The version field defines the version of the control
Type:
- string
Listeners :exontrol.Lts
The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The Events section lists the events the component supports.
Type:
- exontrol.Lts
Example
The following sample shows how you can get all events the component currently supports:
oSchedule.Listeners.forEach(function(name)
{
console.log(name);
});
The following sample displays information about the event being clicked:
oSchedule.Listeners.Add("onclick", function (oEvent)
{
console.log(oEvent);
});
where oSchedule is an object of Schedule type
oSV :SV
The oSV field defines the base schedule-view of control. Use the AddScheduleView() method to add a new view to the control. Use the RemoveScheduleView() method removes a schedule-view already created by AddScheduleView() method.
Type:
Shortcuts :exontrol.Sts
The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.
Type:
- exontrol.Sts
Example
The following sample removes the selection (calls the RemoveSelection() method) once the user presses the Delete key:
oSchedule.Shortcuts.Add( "Delete", oSchedule.RemoveSelection, oSchedule );
where oSchedule is an object of Schedule type
Methods
AddScheduleView(name, attributesopt) → {SV}
The AddScheduleView() method creates a new view to display the events. Use the RemoveScheduleView() method removes a schedule-view already created by AddScheduleView() method.
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
name |
string | defines the name of the schedule-view to be created. It must be an unique name. The "schedule" defines the control's default-schedule view, and it is reserved. If missing, the "schedule.split" is used instead | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
attributes |
exontrol.W.Options |
<optional> |
A exontrol.W.Options that defines the attributes of the window
Properties
|
Returns:
Returns the newly created view as an object of SV type. Returns null, in case there is already a window with specified name.
- Type
- SV
Example
oSchedule.AddScheduleView("2nd",{Background: "black", Foreground: "white", Dock: 3}), adds a new schedule-view panel, docked to the left-size, with a black-background and a white-foreground
BeginUpdate()
The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. You can use the Update() method to perform multiple changes at once.
EndUpdate()
The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method.
Event(id) → {Event}
The Event() method returns the event based on its index or identifier/key. The Event(id) method is equivalent with Event(id) method of the Events object
Parameters:
Name | Type | Description |
---|---|---|
id |
any | The event parameter could be any of the following:
|
Returns:
Returns null or an object of Event type
- Type
- Event
feE(callback, thisArgopt)
The feE/forEachEvent() method invokes the callback for each event of the control (unscrolled(top,bottom events) and scrolled events as well)
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | A function of callback(oEvent) type that's called for every event, where oEvent is:
|
|
thisArg |
any |
<optional> |
Indicates the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Schedule type. |
feEU(callback, thisArgopt) → {any}
The feEU/forEachEventUnit() method invokes the callback for each event of the control (unscrolled(top,bottom events) and scrolled events as well), until the callback returns a not-empty value
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | A function of callback(oEvent) {any} type that's called for every event, where oEvent is
|
|
thisArg |
any |
<optional> |
Indicates the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Schedule type. |
Returns:
Returns the last-value of the callback
- Type
- any
GetEvents() → {Event}
The GetEvents() method returns the control's events.
Returns:
Returns an object of Events type.
- Type
- Event
Example
The following statements are equivalents:
oSchedule.GetEvents(), returns the control's events
oSchedule.Events, returns the control's events
where oSchedule is an object of Schedule type
GetGroups() → {Group}
The GetGroups() method returns the control's groups.
Returns:
Returns an object of Groups type.
- Type
- Group
Example
The following statements are equivalents:
oSchedule.GetGroups(), returns the control's groups
oSchedule.Groups, returns the control's groups
where oSchedule is an object of Schedule type
GetLayout(base64opt) → {string}
The GetLayout() method saves the layout of the entire control to a base-64 encoded string. The layout can be restored using the SetLayout() method.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
base64 |
boolean |
<optional> |
Indicates whether the layout should be encoded as BASE64. If missing/null/undefined the base64 is generated. |
Returns:
Returns a base64-encoded string that holds the current UI layout of the entire control.
- Type
- string
Example
The following statements are equivalents:
oSchedule.GetLayout(), gets the control's layout
oSchedule.Layout, gets the control's layout
where oSchedule is an object of Schedule type
GetMarkZones() → {MarkZone}
The GetMarkZones() method returns the control's mark-zones.
Returns:
Returns an object of MarkZones type.
- Type
- MarkZone
Example
The following statements are equivalents:
oSchedule.GetMarkZones(), returns the control's mark-zones
oSchedule.MarkZones, returns the control's mark-zones
where oSchedule is an object of Schedule type
GetSelection() → {array}
The GetSelection() method gets the control's selection.
Returns:
The GetSelection can return one of the following:
- null, indicates that the control has no selected-events
- {Event}, indicates a single-selected event (while the control support single-selection only)
- {Event[]}, defines a collection of selected-events within the control
- Type
- array
Example
The following statements are equivalents:
oSchedule.GetSelection(), gets the control's selection
oSchedule.Selection, gets the control's selection
where oSchedule is an object of Schedule type
GetSingleSel() → {Schedule.SingleSelEnum}
The GetSingleSel() method specifies whether the control supports single, multiple, toggle selection.
Returns:
Returns an OR combination of Schedule.SingleSelEnum flags that specifies how to select events
GetStatistics() → {string}
The GetStatistics() method gives statistics data of objects being hold by the control
Returns:
Returns statistics data of objects being hold by the control such as:
Size: 1,536x754
Zoom: 100%
Event: 32/55
Sel: 1
- Type
- string
Example
The following statements are equivalents:
oSchedule.GetStatistics(), gives statistics data of objects being hold by the control
oSchedule.Statistics, gives statistics data of objects being hold by the control
where oSchedule is an object of Schedule type
Group(id) → {Group}
The Group() method returns the group based on its index or identifier. The Group(id) method is equivalent with Group(id) method of the Groups object
Parameters:
Name | Type | Description |
---|---|---|
id |
any | The group parameter could be any of the following:
|
Returns:
Returns null or an object of Group type
- Type
- Group
MarkZone(id) → {MarkZone}
The MarkZone() method returns the mark-zone based on its index or identifier. The MarkZone(id) method is equivalent with MarkZone(id) method of the MarkZones object
Parameters:
Name | Type | Description |
---|---|---|
id |
any | The mark-zone parameter could be any of the following:
|
Returns:
Returns null or an object of MarkZone type
- Type
- MarkZone
onUI()
The onUI() method requests to update the windows UI layout
Refresh()
The Refresh() method refreshes the entire control
RemoveScheduleView(name)
The RemoveScheduleView() method removes the view already created by the AddScheduleView() method
Parameters:
Name | Type | Description |
---|---|---|
name |
string | defines the name of the schedule-view to be removed. The "schedule" defines the control's default-schedule view, and it can not be removed. |
RemoveSelection() → {number}
The RemoveSelection() method deletes the selected-events.
Returns:
Returns the number of the events being deleted
- Type
- number
SelectAll(toSelect)
The SelectAll(toSelect) method selects all events within the control.
Parameters:
Name | Type | Description |
---|---|---|
toSelect |
any | Specifies the events to select within the control as one of the following values:
|
Example
SelectAll("vis"), selects the visible events only
SetEvents(oEventsDef)
The SetEvents() method defines the events of the control
Parameters:
Name | Type | Description |
---|---|---|
oEventsDef |
object | Defines the events to add. The oEventsDef field can be any of the following:
|
Example
Events = [{start: "#1/1/2001 10:00#", end: "#1/1/2001 12:00#"}], {array} defines a single event
Events =
{
"E1":
{
start: "#1/1/2001 10:00#",
end: "#1/1/2001 12:00#"
},
"E2":
{
start: "#1/1/2001 12:00#",
end: "#1/1/2001 14:00#",
visible: false
}
}, {object} defines two events "E1" and "E2"
SetGroups(oGroupsDef)
The SetGroups() method defines the groups of the control
Parameters:
Name | Type | Description |
---|---|---|
oGroupsDef |
object | Defines the groups to add. The oGroupsDef field can be any of the following:
|
Example
Groups = "G1", {string} defines a single group with the identifier/caption "G1"
Groups = ["G1",{caption: "G2", visible: true}], {array} defines two groups "G1" and "G2"
Groups =
{
"G1":
{
},
"G2":
{
visible: true
},
"G3":
{
eventShape: "red",
visible: true
}
}, {object} defines three groups "G1", "G2" and "G3"
SetLayout(base64opt, A)
The SetLayout() method restores the layout of the control. The layout should be any result of the Layout/GetLayout() method.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
base64 |
boolean |
<optional> |
Indicates whether the layout should be decoded from BASE64. If missing/null/undefined the base64 is decoded. |
A |
string | string expression that defines the layout of control. |
SetMarkZones(oMarkZonesDef)
The SetMarkZones() method defines the mark-zones of the control
Parameters:
Name | Type | Description |
---|---|---|
oMarkZonesDef |
object | Defines the mark-zones to add. The oMarkZonesDef field can be any of the following:
|
Example
MarkZones = ["Z1",{shape: "red"}], {array} defines two mark-zones "Z1" and "Z2"
MarkZones =
{
"Z1":
{
},
"Z2":
{
},
"Z3":
{
shape:
{
pattern: 6,
patternColor: "lightgray"
},
visible: false
}
}, {object} defines three mark-zones "Z1", "Z2" and "Z3" (hidden)
SetSelection(value)
The SetSelection() method sets the control's selection.
Parameters:
Name | Type | Description |
---|---|---|
value |
any | The value can be any of the following:
|
SetSingleSel(value)
The SetSingleSel() method changes the control's selection to single, multiple or toggle
Parameters:
Name | Type | Description |
---|---|---|
value |
Schedule.SingleSelEnum | An OR combination of Schedule.SingleSelEnum flags to specify how user can select events |
Example
0 or exontrol.Schedule.SingleSelEnum.exDisableSel {number}, disables selecting any event
3 or exontrol.Schedule.SingleSelEnum.exSingleSel | exontrol.Schedule.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single event can be selected
6 or exontrol.Schedule.SingleSelEnum.exToggleSel | exontrol.Schedule.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a event is selected it gets unselected once it is clicked, or reverse, and only a single-event can be selected at once.
SurfaceView(name) → {SV}
The SurfaceView() method gets the schedule-view by name (which was previously created by the AddScheduleView() method)
Parameters:
Name | Type | Description |
---|---|---|
name |
string | defines the name of the schedule-view to request ("schedule" defines the control's default-schedule view) |
Returns:
Returns null or the an object of SV type associated with the name
- Type
- SV
UnselectAll()
The UnselectAll() method clears the control's selection.
Update(callback, thisArgopt)
The Update() method locks the control's paint during the callback, and invalidates the control once the method ends.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | Indicates a callback to perform changes within the control | |
thisArg |
any |
<optional> |
Specifies the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Schedule type |
Events
onaddevent
The onaddevent() method notifies your application that a new event has been added to the control
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
Event | Indicates an object of Event type being added |
Example
The following samples display the event being added:
oSchedule.onaddevent = function (oEvent)
{
console.log(oEvent);
}
or
oSchedule.Listeners.Add("onaddevent", function (oEvent)
{
console.log(oEvent);
})
where oSchedule is an object of Schedule type
oncalselchange
The oncalselchange() method notifies that the control's selection has been changed (events).
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
object | holds the control's selection, as explained: |
Example
The following samples display the control's selection once it changes:
oSchedule.oncalselchange = function (oEvent)
{
console.log(oEvent);
}
or
oSchedule.Listeners.Add("oncalselchange", function (oEvent)
{
console.log(oEvent);
})
where oSchedule is an object of Schedule type
onremoveevent
The onremoveevent() method occurs once an event has been removed from the Events collection
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
Event | Indicates an object of Event type being removed |
Example
The following samples display the event being removed:
oSchedule.onremoveevent = function (oEvent)
{
console.log(oEvent);
}
or
oSchedule.Listeners.Add("onremoveevent", function (oEvent)
{
console.log(oEvent);
})
where oSchedule is an object of Schedule type
onselchange
The onselchange() method notifies that the control's selection has been changed (events).
Parameters:
Name | Type | Description |
---|---|---|
oEvent |
object | holds the control's selection, as explained: |
Example
The following samples display the control's selection once it changes:
oSchedule.onselchange = function (oEvent)
{
console.log(oEvent);
}
or
oSchedule.Listeners.Add("onselchange", function (oEvent)
{
console.log(oEvent);
})
where oSchedule is an object of Schedule type