You are here:
Calendar Control
Use the CalendarControl element to add a special calendar view that contains date and time-related data. The CalendarControl element provides an input field to select the date and time.
Required Editions
| Available in: Enterprise, Performance, and Unlimited Editions |
The table lists the CalendarControl attributes.
| Attribute | Description | Value or Pattern | Required | Validation |
|---|---|---|---|---|
| name | Unique name of this Calendar control | string | Yes | uniqueness (contract) |
| dataSource | Defines the data linked to the calendar control. | string | Yes | ListObject Reference |
| dateFromAttribute | Attribute of the data source for the item (call) shown on the calendar. | string | ||
| dateThruAttribute | Attribute of the data source for the item (call) shown on the calendar. | string | ||
| timeFromAttribute | Attribute of the data source for the item (call) shown on the calendar. | string | ||
| timeThruAttribute | Attribute of the data source for the item (call) shown on the calendar. | string | ||
| allDayAttribute | Attribute of the data source for the item (call) shown on the calendar. | string | ||
| firstLine | The first line of information is shown on a call tile. Data comes from an attribute of the data source for the item (call) shown on the calendar. | string | ||
| secondLine | The second line of information is shown on a call tile. Data comes from an attribute of the data source for the item (call) shown on the calendar. | |||
| backgoundColorAttribute | Attribute of the data source for the item (call) shown on the calendar. | string |
The CalendarControl element contains these sub-elements.
- Bindings
- Settings
- Items
- Events
Bindings
The Bindings element consists of the Resource and Binding elements.
The table lists the DateRangeStartDate and Show Calendar Week attributes supported for binding the CalendarControl element. The DateRangeStartDate attribute refers to the first date of the date range to display when the calendar is opened. The Show Calendar Week attribute controls the display of calendar week at the top of the control.
| Attribute | Description | Value or Pattern |
|---|---|---|
| target | Describes the actual UI element. | string |
| binding | DateRange Binding | string |
| binding | Show Calendar Week | string |
| bindingMode | Binding mode is used to control the updating process. | string [One Way] |
Settings
The CalendarControl Settings node consists of settings elements that can be used in the Calendar control element. Aspects of the default display behavior of the CalendarControl can be controlled from Consumer Goods Cloud Mobile App Framework Web Edition using the personal settings of the user.
| Attribute | Description | Value or Pattern |
|---|---|---|
| dataSource | List object with user settings from Web model. | string |
| KeyAttribute | The list object is a simple property that holds the name of the setting. | string |
| ValueAttribute | The list object is a simple property that holds the value of the setting. | string |
Items
The CalendarControl Items node consists of the Item elements that can be used in the Calendar control element. The table list the attributes of the CalendarControl Items node.
| Attribute | Description | Value or Pattern |
|---|---|---|
| name | Unique name of this Items element. | string [Items] |
| itemPattern | Specifies the Item Pattern used for the list items | string [calendarItemPattern] |
Events
The CalendarControl Items node consists of Event elements that can be used in the Calendar control element. The table lists the events available for the CalendarControl element.
| Event Name | Fired when | Required? |
|---|---|---|
| ItemSelectedEvent | This event triggers when an application user has tapped a list item. | no |
| CalendarDropEvent | This event triggers when an application user drags a job list, trip list, or customer, to a place on the calendar and drops it in weekly view. | no |
| CalendarItemMoveEvent | This event triggers when an application user drags a call to a new time slot in a weekly view. | no |
| CalendarItemOverlappingOpeningEvent | This event triggers in the weekly view, when an application user clicks an item that indicates that two or more additional calls are scheduled at the indicated time, but aren’t currently visible. | no |
| CalendarDateRangeChangedEvent | This event triggers when an application user changes the dates displayed in the weekly view using either the forward or back arrows or the calendar button on the toolbar. | no |
| CalendarItemResizeEvent | This event triggers when an application user clicks an appointment on the calendar in the weekly view and drags its frame up or down to make it longer or shorter. | no |
| CalendarLongTapEvent | This event triggers when an application user clicks and holds an empty time slot on the calendar in weekly view. | no |
| ContextOpeningEvent | This event triggers when the context menu is popped up. | no |
| ContextSelectedEvent | This event triggers when an item from the context menu is selected. | no |
Here’s an example snippet of the CalendarControl element:
<CalendarControl name="cc1" dataSource="itemsDataSource" dateFromAttribute="dateFrom" dateThruAttribute="dateThru" timeFromAttribute="timeFrom" timeThruAttribute="timeThru" allDayAttribute="allDay" firstLine="firstLine" secondLine="secondLine" backgroundColorAttribute="bgcAttribute">
<Bindings>
<Binding target="DateRangeStartDate" binding="dateRangeBinding" bindingMode="ONE_WAY" />
</Bindings>
<Items name="Items" itemPattern="calendaritemPattern">
<ContextMenu>
<Bindings>
<Binding target="DataSource" binding="source" bindingMode="ONE_WAY" />
</Bindings>
<Items name="ContextMenuItems">
<Bindings>
<Binding target="Icon" type="Image" binding="iconBinding" />
<Binding target="Text" type="Label" binding="textBinding" />
<Binding target="Editable" type="Editable" binding="editableBinding" />
<Binding target="Visible" type="Visible" binding="vsibleBinding" />
</Bindings>
</Items>
</ContextMenu>
<Bindings>
<Binding target="CalendarItemAttribute1" type="Text" binding="binding" bindingMode="ONE_WAY" />
</Bindings>
</Items>
<Settings dataSource="dataSource" KeyAttribute="keyAttribute" ValueAttribute="valueAttribute" />
</CalendarControl>