Properties

• StartDate:
  • To set the current year that will be shown when the tooltip is opened
  • Although a date it will ignore day and month part
  • Default: CurrDate()
• SelectedDate:
  • Initial Month marked as active
  • Although a date it will ignore day and year part
• Language:
  • Using Javascript Locale to get Month Name
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
  • Default: en-US
• ExtendedClass:
  • Add extended class to main widget container
• Position:
  • As it uses the Tooltip widget, you can use this property to set position
  • Default: Bottom
• MinDate:
  • Limit selection range
• MaxDate:
  • Limit selection range

Events

• InvalidDate:
  • When user select a month/year outside the allowed range
• SelectedDate:
  • Return values of selected month/year to parent page or web block were it is used
  • Year, Month, First Day of Selected Month, Last Day of Selected Month*

* Sometimes in our projects we must save a date and not only a string with "Month/Year" or Month and Year as an apart attribute

Style

I'm using the OutSystems UI color pattern and guidelines (css var colors)

Primary color for arrows, selected month and hover month

Using

As it could be used in many ways, I put a placeholder that triggers the calendar month to open.

With the event handler SelectedDate you can set your main variables on your form or screen and show as you want.

In my Demo app, I use an input text and with the handler, I print a string with "Month/Year" on that field. You can save apart the Month and Year value.

You can also use only an Expression to show the selected month and uses a simple icon or button inside this placeholder to triggers the Calendar Month Widget to open up.