Skip to content

CalendarSection

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

CalendarSection Properties

Property Type Required Default
CalendarType enum Optional "Month"
EndDate string Optional
Footer Footer Optional
Header Header Optional
IsPersistentSelection boolean Optional true
OnSelectedDateChange ActionOrRule Optional
SelectedDate string Optional
Separators Separators Optional
StartDate string Optional
StartDayOfWeek enum Optional "Sun"
Styles object Optional
Visible boolean Optional true
_Name string Optional
_Type const Required

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 equal to one of the known values below.

CalendarType Known Values

Value Description
Week
Month
Expandable

EndDate

End date of the calendar. Users cannot scroll 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, December 31st of the following year from the selected date will be set as the default EndDate.

  • type: string

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


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


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.


SelectedDate

Default selected date when the calendar is rendered. If not set, today's date will be selected by default. 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.


StartDate

Start date of the calendar. Users cannot scroll 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, January 1st of the same year as the selected date will be set as the default StartDate.

  • 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.

  • type: enum
  • default: "Sun"

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

StartDayOfWeek Known Values

Value Description
Sun
Sat
Mon

Styles

A style to be applied to the Calendar section, Mobile only, not supported on the Web.

  • type: object with following properties.
Property Type Required Default
Calendar string Optional
ExpandableHandle string Optional
Buttons string Optional
InnerMonthLabel string Optional
WeekDayLabel string Optional
Header string Optional
Dates string Optional

Calendar

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

ExpandableHandle

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

Buttons

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

InnerMonthLabel

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

WeekDayLabel

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

Header

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

Dates

The string value is a style class name for Dates. This applies the fonts styling and colors to the dates specified in the 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 equal to:

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