Calendar¶

Calendar is a container that provides a calendar view for the users to select a date or scroll between months/weeks.

When assigning a rule to a property of Calendar, the rule will be passed an instance of the following proxy class as an argument:

CalendarProxy

Calendar Properties¶

Property	Type	Required	Default
CalendarType	`enum`	No	`"Month"`
EndDate	`string`	No
Event	`object`	No
EventLoadRange	`number`	No	`1`
Events	complex	No
Footer	Footer	No
Header	Header	No
Height	`integer`	No	`0`
Indicators	complex	No
IsPersistentSelection	`boolean`	No	`true`
OnSelectedDateChange	ActionOrRule	No
OnSelectedDateRangeChange	ActionOrRule	No
SelectedDate	`string`	No
SelectedDateRange	complex	No
Separators	Separators	No
StartDate	`string`	No
StartDayOfWeek	`enum`	No
Styles	`object`	No
Targets	complex	No
Visible	`boolean`	No	`true`
_Name	`string`	No
_Type	`const`	Yes

CalendarType¶

Choose how you want the calendar view to be displayed. Supported only in iOS and Android. In Web, only Month is supported.

DateRange is to enable range selection and displays the dates similar to the month style. If the calendar section is the only section in the container, the calendar would take the entire screen space unless custom Height value is provided. This date range view allows the user to select a contiguous range of dates. The IsPersistentSelection property is disregarded in DateRange CalendarType, the selected date range stays selected regardless of scrolling to another month.

The first date selected is the start date of the range and when a second date is selected it becomes the end date of the range, with the entire range of dates between the start and end dates (inclusive) being selected. The end date of the range must be a later date than the start date. If start date is selected, when selecting another date that is earlier than the start date, the new date becomes the new selected start date.

For modifying the set of selected dates, on iOS, click on a selected date within existing range and it becomes the new end date with all the dates later than that getting deselected. To unselect the entire range, click outside the range, anywhere in the calendar view. While for Android, any click on date within or outside the existing range would result in unselecting the existing range. If the user clicks on a date earlier than the start date, then the newly selected date now becomes the start date and the original start date is deselected.

type: enum
default: "Month"

The value of this property must be one of the known values listed below.

CalendarType Known Values¶

Value	Description
`Week`
`Month`
`Expandable`
`DateRange`

EndDate¶

End date of the calendar. Users cannot scroll or select beyond the specified date. Specify the value in yyyy-MM-dd or yyyy-MM-ddThh:mm:ss format for date. For example, 2016-01-01 or 2016-01-01T00:00:00Z. Supports JavaScript Date Object as well. Value given will be set based on the local time zone of the device.

If no value is set, the default EndDate will be December 31st of two years following the initially selected date. The StartDate will be set to the first day of the same year as the EndDate if the value of this property is earlier than the StartDate.

type: string

Event¶

Event configuration for the calendar section. This is used to define the rule that will be executed for each event in the Events array. The rule should return an object with the properties IndicatorName, which is the name of the indicator to be displayed on the calendar for the event.

type: object with following properties.

Property	Type	Required	Default
`IndicatorName`	Rule	No

IndicatorName¶

The rule name of the indicator to be displayed on the calendar for the event, it will be executed for each date of the event.

Rule

EventLoadRange¶

The number of months before and after the currently selected month to load events. This is used to optimize the loading of events in the calendar. For example, if set to 1, events for the current month, the previous month, and the next month will be loaded. If set to 2, events for the current month, the two previous months, and the two next months will be loaded. If set to 0, all events will be loaded.

Specifically for when CalendarType is set to DateRange, if the calendar is displayed in full screen mode (single section scenario), the EventLoadRange would not be applicable and all events will be loaded, if calendar is set with custom height which displays more than 1 month within the view, please adjust the load range accordingly.

type: number
default: 1

Events¶

An array of events to be displayed on the calendar. Each event is represented by a date and an indicator link. Events is ignored if Event and Targets are defined.

type: complex

Events Value¶

Any following options needs to be fulfilled.

Option 1¶

An array of events.

Array type:

All items must be of the type:

CalendarEvent

Option 2¶

Expects return of CalendarEvent in array format.

Rule

Footer¶

Footer bar to be displayed below this control's content section.

type: Footer

Header bar to be displayed above this control's content section.

type: Header

Height¶

The height of the calendar in Device Independent Pixel. Only applicable to DateRange CalendarType. The DIP value will be converted to pixels of the platform (based on scale and on density for iOS and Android respectively).

If set to 0, for multi-sections scenario, the calendar would be displayed with default height (600 for Android and 450 for iOS), while for single-section scenario, the calendar will display in full screen.

type: integer
default: 0

Indicators¶

An array of indicators to be displayed on the calendar, each indicator is represented by an icon and a title. If no indicators are provided, the calendar will not display any indicators.

type: complex

Indicators Value¶

Any following options needs to be fulfilled.

Option 1¶

An array of indicators.

Array type:

All items must be of the type:

Indicator

Option 2¶

Expects return of Indicator in array format.

Rule

IsPersistentSelection¶

Set whether the date selection should be persistent when scrolling through the calendar.

When set to false, the selected date will change to the 1st day of the month or week that you have scrolled to. For example, if the selected date is May 10, 2023, and you scroll to June 2023, the selected date will change to June 1, 2023.

When set to true, the selected date will remain as it is when you scroll the calendar to another month or week. For example, if the selected date is May 10, 2023, and you scroll to June 2023, the selected date will remain as May 10, 2023.

This property is disregarded when the CalendarType is set to DateRange, for DateRange CalendarType, the selection is always retained. Supported in iOS and Android only. In Web, by default, it is set to true.

type: boolean
default: true

OnSelectedDateChange¶

Action/Rule to be triggered when the selected date is changed, including scenarios where the selected date is adjusted to the nearest date within the range specified by StartDate and EndDate. Not applicable to DateRange CalendarType.

If the selected date is displaying indicator, user may access information related to the indicator such as IndicatorName, EntitySets, and Date itself through the context binding object.

type: ActionOrRule
Formatter and Binding are not supported

OnSelectedDateRangeChange¶

Action/Rule to be triggered when the selected date range is changed. Only applicable to DateRange CalendarType. This event is only triggered when a valid range is formed, which means the selected start date is earlier or equal to the selected end date.

If date(s) within the selected date range is displaying indicator, user may access information related to the indicator such as IndicatorName, EntitySets, and Date itself through the context binding array.

type: ActionOrRule
Formatter and Binding are not supported

SelectedDate¶

Default selected date when the calendar is rendered. Not applicable to DateRange CalendarType. If not set, today's date will be selected by default. If the value set falls outside the range specified by StartDate and EndDate, it will be adjusted to the nearest date within that range. Supports JavaScript Date Object as well. Value given will be set based on the local time zone of the device. For example, 2016-01-01T00:00:00Z.

When the calendar is redrawn, the selected date is retained.

type: string

SelectedDateRange¶

Initial selected date range when the calendar is rendered. Only applicable to DateRange CalendarType. If not set, today's date will be selected by default. If one of the date value set falls outside the range specified by StartDate and EndDate, it will be adjusted to the nearest date within that range.

When the calendar is redrawn, the selected date is retained.

type: complex

SelectedDateRange Value¶

Any following options needs to be fulfilled.

Option 1¶

Calendar date range object containing selected StartDate and EndDate.

CalendarDateRange

Option 2¶

Expects return of CalendarDateRange object.

Rule

Separators¶

Visibility of the separator lines can be controlled to provide more flexibility to render controls and sections.

type: Separators

StartDate¶

Start date of the calendar. Users cannot scroll or select beyond the specified date. Specify the value in yyyy-MM-dd or yyyy-MM-ddThh:mm:ss format for date. For example, 2016-01-01 or 2016-01-01T00:00:00Z. Supports JavaScript Date Object as well. Value given will be set based on the local time zone of the device.

If no value is set, the default StartDate will be January 1st of two years prior to the initially selected date. The StartDate will be set to the first day of the same year as the EndDate if the value of this property is later than the EndDate.

type: string

StartDayOfWeek¶

Choose the start day of the week for the calendar view. Supported only in iOS and Android. In Web, it is always Sun.

If no value is provided, the device's local calendar settings determine the default StartDayOfWeek. Only Friday, Saturday, and Sunday are supported as start days. If the local start day of the week doesn't match these supported values, Sunday is selected as default.

type: enum

The value of this property must be one of the known values listed below.

StartDayOfWeek Known Values¶

Value	Description
`Sun`
`Sat`
`Mon`

Styles¶

A style to be applied to the CalendarSection. Not support Web but Mobile only.

type: object with following properties.

Property	Type	Required
Calendar	string	No
ExpandableHandle	string	No
Buttons	string	No
InnerMonthLabel	string	No
WeekDayLabel	string	No
LegendLabel	string	No
Header	string	No
Dates	string	No

Calendar¶

The string value is a style class name of Calendar. This applies the color to main calendar background.

Calendar style class

ExpandableHandle¶

The string value is a style class name of ExpandableHandle. This applies the color to the expandable handle for the calendar's expandable view. Supported only in Android.

Calendar style class

Buttons¶

The string value is a style class name of Buttons. This applies the color styling for the buttons in the calendar's header. Supported only in Android.

Calendar style class

InnerMonthLabel¶

The string value is a style class name of InnerMonthLabel. This applies the font color and style to the month name label embedded in calendar month view. Supported only in iOS.

TextPaint style class

WeekDayLabel¶

The string value is a style class name of WeekDayLabel. This applies the font styling to the days of the week.

Calendar style class

LegendLabel¶

The string value is a style class name of LegendLabel. This applies the font color and style to all legend labels.

TextPaint style class

Header¶

The string value is a style class name of Header. This applies the fonts styling and background color to the calendar header.

TextPaint style class

Dates¶

The string value is a style class name of Dates. This applies the fonts styling and colors to the dates specified in the style class.

CalendarDates style class

Targets¶

An array of targets to be used for the calendar section. Each target is represented by a binding or rule that returns an array of data items. The calendar will use these targets to populate the events and execute the rules defined in the Event/IndicatorName to determine the events in the calendar.

type: complex

Targets Value¶

Any following options needs to be fulfilled.

Option 1¶

An array of targets.

Array type:

All items must be of the type:

CalendarQueryTarget

Option 2¶

Expects return of CalendarQueryTarget in array format.

Rule

Visible¶

Sets the visibility of this control.

type: boolean
default: true

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Section.Type.Calendar"

Examples¶

static indicators¶

{
  "Caption": "Calendar Section",
  "OnLoaded": "/MDKDevApp/Rules/Calendar/InitializeCalendarProps.js",
  "ActionBar":{
    "Items":[
      {
        "Position":"right",
        "Caption":"Get Date",
        "OnPress": "/MDKDevApp/Rules/Calendar/GetSelectedDate.js"
      }
    ]
  },
  "Controls" : [
    {
      "Sections": [
        {
          "Header": {
            "Caption": "Calendar Section"
          },
          "CalendarType": "Week",
          "StartDayOfWeek": "Mon",
          "StartDate": "2023-01-01T00:00:00Z",
          "EndDate": "#Page:CalendarPage/#ClientData/#Property:CalendarEndDate",
          "IsPersistentSelection": false,
          "SelectedDate": "2023-08-01T00:00:00Z",
          "OnSelectedDateChange": "/MDKDevApp/Actions/Messages/Message.action",
          "Styles": {
            "Calendar": "Calendar",
            "ExpandableHandle": "CalendarExpandableHandle",
            "Buttons": "CalendarButtons",
            "InnerMonthLabel": "CalendarInnerMonthLabel",
            "WeekDayLabel": "CalendarWeekDayLabel",
            "Header": "CalendarHeader",
            "Dates": "CalendarDates"
          },
          "Indicators": [
            {
              "Icon": "font://&#xe011;",
              "Title": "Due Date",
              "Styles": {
                "Icon": "OrangeColor"
              },
              "_Name": "DueDateIndicator"
            },
            {
              "Icon": "/MDKDevApp/Images/icon.png",
              "Title": "Start Date",
              "_Name": "StartDateIndicator"
            }
          ],
          "Events": [
            {
              "Date": "2025-06-30T08:00:00",
              "Indicator": "DueDateIndicator"
            },
            {
              "Date": "2025-06-01T08:00:00",
              "Indicator": "StartDateIndicator"
            }
          ],
          "_Name": "CalendarSection1",
          "_Type": "Section.Type.Calendar"
        }
      ],
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable"
    }
  ],
  "_Type": "Page",
  "_Name": "CalendarPage"
}

dynamic indicators¶

{
  "Caption": "Calendar Section",
  "OnLoaded": "/MDKDevApp/Rules/Calendar/InitializeCalendarProps.js",
  "ActionBar":{
    "Items":[
      {
        "Position":"right",
        "Caption":"Get Date",
        "OnPress": "/MDKDevApp/Rules/Calendar/GetSelectedDate.js"
      }
    ]
  },
  "Controls" : [
    {
      "Sections": [
        {
          "Header": {
            "Caption": "Calendar Section"
          },
          "CalendarType": "Week",
          "StartDayOfWeek": "Mon",
          "StartDate": "2023-01-01T00:00:00Z",
          "EndDate": "#Page:CalendarPage/#ClientData/#Property:CalendarEndDate",
          "IsPersistentSelection": false,
          "SelectedDate": "2023-08-01T00:00:00Z",
          "OnSelectedDateChange": "/MDKDevApp/Actions/Messages/Message.action",
          "Styles": {
            "Calendar": "Calendar",
            "ExpandableHandle": "CalendarExpandableHandle",
            "Buttons": "CalendarButtons",
            "InnerMonthLabel": "CalendarInnerMonthLabel",
            "WeekDayLabel": "CalendarWeekDayLabel",
            "LegendLabel": "LegendLabel",
            "Header": "CalendarHeader",
            "Dates": "CalendarDates"
          },
          "Indicators": [
            {
              "Icon": "font://&#xe011;",
              "Title": "Due Date",
              "Styles": {
                "Icon": "OrangeColor"
              },
              "_Name": "DueDateIndicator"
            },
            {
              "Icon": "/MDKDevApp/Images/icon.png",
              "Title": "Start Date",
              "_Name": "StartDateIndicator"
            }
          ],
          "Event": {
            "IndicatorName": "/MDKDevApp/Rules/Calendar/GetIndicatorName.js"
          },
          "Targets": [
            {
              "EntitySet": "MyWorkOrderHeaders",
              "Service": "/MDKDevApp/Services/Amw.service",
              "QueryOptions": "$filter=OrderType ne 'PM02'",
              "DateProperties": [
                "CreationDate",
                "DueDate"
              ]
            },
            {
              "EntitySet": "MyWorkOrderOperations",
              "Service": "/MDKDevApp/Services/Amw.service",
              "DateProperties": [
                "SchedEarliestStartDate",
                "SchedEarliestEndDate"
              ]
            }
          ],
          "_Name": "CalendarSection1",
          "_Type": "Section.Type.Calendar"
        }
      ],
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable"
    }
  ],
  "_Type": "Page",
  "_Name": "CalendarDynamicPage"
}

GetIndicatorName.js¶

export default function GetIndicatorName(context) {
  let matchedDate = context.binding.Date;
  console.log("Matched Date:", matchedDate);
  let entitySets = context.binding.EntitySets;
  if (entitySets.MyWorkOrderHeaders && entitySets.MyWorkOrderHeaders.length > 0) {
    return "DueDateIndicator";
  } else if (entitySets.MyWorkOrderOperations && entitySets.MyWorkOrderOperations.length > 0) {
    return "StartDateIndicator";
  } else {
    return null;
  }
}

Calendar Date Range Example¶

{
  "Caption": "Calendar Section",
  "OnLoaded": "/MDKDevApp/Rules/Calendar/InitializeCalendarProps.js",
  "ActionBar":{
    "Items":[
      {
        "Position":"right",
        "Caption":"Get Date",
        "OnPress": "/MDKDevApp/Rules/Calendar/GetSelectedDate.js"
      }
    ]
  },
  "Controls" : [
    {
      "Sections": [
        {
          "Header": {
            "Caption": "Calendar Section"
          },
          "CalendarType": "DateRange",
          "StartDayOfWeek": "Mon",
          "StartDate": "2023-01-01T00:00:00Z",
          "EndDate": "#Page:CalendarPage/#ClientData/#Property:CalendarEndDate",
          "IsPersistentSelection": false,
          "Height": 700,
          "SelectedDateRange": {
            "StartDate": "2025-08-01T00:00:00Z",
            "EndDate": "2025-08-09T00:00:00Z",,
          },
          "OnSelectedDateRangeChange": "/MDKDevApp/Actions/Messages/Message.action",
          "Styles": {
            "Calendar": "Calendar",
            "Dates": "CalendarDates"
          },
          "_Name": "CalendarSection1",
          "_Type": "Section.Type.Calendar"
        }
      ],
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable"
    }
  ],
  "_Type": "Page",
  "_Name": "CalendarPage"
}

Style Classes Definition¶

.Calendar {
  background-color: #ffe6e6;
}

/* Android Only */
.CalendarButtons {
  background-color: blue;
  font-color: red;
}

/* Android Only */
.CalendarExpandableHandle {
  color: black;
}

/* iOS Only */
.CalendarInnerMonthLabel {
  font-color: blue;
  font-style: largeTitle;
}

.CalendarWeekDayLabel {
  font-color: black;
  font-color-highlighted: purple; /* iOS Only */
  font-style: title3; /* iOS Only */
  font-typeface: italic; /* Android Only */
  font-size: 32; /* Android Only */
}

.LegendLabel {
  font-color: red;
}

.CalendarHeader {
  background-color: green;
  font-color: blue;
  font-style: largeTitle; /* iOS Only */
  font-typeface: italic; /* Android Only */
  font-size: 32; /* Android Only */
}

.CalendarDates {
  font-color: blue;
  font-style: body; /* iOS Only */
  font-typeface: italic; /* Android Only */
  font-size: 14; /* Android Only */
  ripple-color: red; /* Android Only */

  font-color-highlighted: purple;
  font-style-highlighted: title3; /* iOS Only */
  font-typeface-highlighted: bold; /* Android Only */
  font-size-highlighted: 18; /* Android Only */
  border-color-highlighted: black; /* Android Only */

  background-color-selected: @mdkYellow1;
  background-color-range-selected: @mdkGreen3; /* Android Only */
  font-color-selected: red;
  font-style-selected: callout; /* iOS Only */
  font-typeface-selected: bold; /* Android Only */
  font-size-selected: 20; /* Android Only */
  border-color-selected: cyan; /* Android Only */
  ripple-color-selected: blue; /* Android Only */

  font-color-enabled: #895600;
  font-style-enabled: footnote; /* iOS Only */
  font-typeface-enabled: italic; /* Android Only */
  font-size-enabled: 11; /* Android Only */
}

.OrangeColor {
  color: #f8a509;
}

.RedColor {
  font-color: red;
}