Calendar¶

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

Calendar Properties¶

CalendarType¶

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

• type: enum
• default: "Month"

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

CalendarType Known Values¶

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

Footer¶

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

• type: Footer

Header¶

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

• type: Header

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.

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.

• type: ActionOrRule
• Formatter and Binding are not supported

SelectedDate¶

Default selected date when the calendar is rendered. 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

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¶

Styles¶

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

• type: object with following properties.

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

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

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¶

{
  "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"
          },
          "_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 */
}

.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;
  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 */
}