UMG Calendar

Documentation
Back to Product Page

Purpose

UMG Calendar is a set of UMG Blueprints widgets intended to serve as a date picker in games and applications.

Content description

After adding to project, you will find all UMG Calendar content in a folder (hopefully) clearly named UMG_Calendar This folder contains the following sub-folders:

  • Blueprints
  • Demo
  • Materials
  • Styles
  • Textures

There are two main widgets destined to be integrated in projects (since release V1.2.0) :

  • The Calendar_Widget which displays the calendar itself
  • The DatePicker_Widget which displays a clickable textfield which will open the calendar on click.

Both use the same options as described below.

Integration

In UMG Designer

The Calendar_Widget or the DatePicker_Widget widgets are the widgets to use and integrate into your own UMG UI and are located under UMG_Calendar/Blueprints

Examples of integration in other widgets can be found in the Demo folder.

To integrate, look for Calendar_widget or DatePicker_widget in the UMG Palette: it's located under Calendar Base category.

UMG Palette

Then select the calendar in the widget hierarchy. You can customize your calendar in the details panel. 2 sections specific to UMG Calendar are available:

  • Options
  • Calendar Style
UMG Options

See Options section later on this page for details.

Several events are also available to implement in the events section. (see usage section for details):

UMG Calendar events panel

In blueprint graph

A new calendar can be created in any blueprint graph by calling the create widget node and selecting the Calendar_Widget or DatePicker_widget class:

Create UMG Calendar widget

Options

The following options can be modified when creating a calendar:

Starting month and starting year

Year and month the calendar should show when created.

Month must be a number between 1 and 12, 1 being January and 12 December

Year may be any number equals or superior to 1

Both fields must be correctly filled to be taken into account. If either is incorrectly filled, both are ignored and the calendar will start on the current month.

Input Date Range

Year rang this calendar should display.

For this option to be taken into account, the following requirements must be met:

  • Both MinYear and MaxYear must be superior or equals to 1
  • MaxYear must be superior or equals to MinYear

If either of these conditions is not met, the range is ignored.

Week starts on Monday

A simple boolean: if checked, the first day of the week is Monday. If unchecked, the first day of the week is Sunday.

Show Buttons bar

If checked, menu buttons are displayed at the bottom of the calendar:

  • Today Button: on click, go back to the current month (only if the current month is included in the calendar range if a range is set)
  • Clear Button: clear the selected date if any
  • OK Button : call the corresponding event dispatcher

In Designer, this option effect is immediately visible in the designer upon click.

Highlight Selected

If checked, the selected date will be highlighted on click. If unchecked, nothing visible happens when clicking on a day (though the onDateClicked event is still called)

Show month and year menus

If checked, a list is available to select month and year in the calendar header. If a range has been correctly set, the year list only shows the years included in the range. If no range is set, the year list shows 10 years prior to currently displayed year and 10 years after.

In Designer, this option effect becomes visible in the designer after compiling the widget.

Highlight Today

If checked, today day is highlighted in the calendar. If unchecked, today is displayed as any other day.

Calendar Style

Allows choosing a style amongst the provided styles. 4 styles are provided with the product.

In Designer, this option effect becomes visible in the designer after compiling the widget.

Picker mode (introduced in V1.2.0)

This calendar picker mode : either a single date or a date range (ie start and end dates). If picker mode is set to range, the 'OnRangeSelected' event dispatcher is called upon selecting the second date. This event is not called when picker mode is set to 'Date'

Highlight Within Range

If checked, the days within the selected range when a range is selected. Applicable only if picker mode is set to 'Range'.

Show OK Button (introduced in V1.2.0)

If checked, menu buttons displays the OK button along with Today and clear buttons. If 'show Buttons bar' is not checked, the OK button will not be visible.

In Designer, this option effect is immediately visible in the designer upon click.

Usage

To use the calendar, the following events dispatchers are available:

  • OnDateClicked: this is the main event and must be bound to get the selected date when the user clicks on a date on the calendar
  • OnClearSelectedDate: this event is called when the user clicks on the 'Clear' button. Useful only when the 'Show Today Button' option is checked then.
  • OnRangeSelected: this event is called when the second date in a range is selected if picker mode is set to 'Range'
  • OnOkClicked: this event is called when the user clicks on the OK button in the buttons panel.
Bind events of UMG Calendar widget

Styles

Predefined styles

4 predefined styles are provided and be found in UMG_Calendar/Styles

  • Default:
UMG Calendar default style
  • Style 1:
UMG Calendar style 1
  • Style 2:
UMG Calendar style 2
  • Style 3:
UMG Calendar style 3

Style description and principles

A style is a data asset of type UMGCalendarAssetStyle and a set of a maximum of 5 widgets inheriting base widgets for the different parts of the calendar:

  • header and header menus
  • calendar day
  • weekday
  • footer

A UMGCalendarAssetStyle has the following variables:

  • CalendarBackgroundColor : type : LinearColor
  • CalendarHeaderClass : type : CalendarWidgetHeaderBase class
  • CalendarDayClass : type : CalendarDayWidgetBase class
  • CalendarWeekDayClass : type : WeekDayWidgetBase class
  • CalendarFooterClass : type : CalendarFooterWidgetBase class
  • BodyBackgroundColor : type : LinarColor

Create a new style

To create a new style, the simplest way would be to copy an existing one and modify the different widgets to your liking. Please read through the following section to learn which elements are mandatory

To create a new style, you will need to create the following elements:

UMGCalendarAssetStyle

First step is to create a new UMGCalendarAssetStyle. To do so, right click in your content browser, and click on 'Data Asset' in the Miscellaneous categeory as shown below:

Create Data Asset

In the new window that opened, select the UMGCalendarAssetStyle:

Create UMGCalendarAssetStyle

Open the new created asset and update the default values:

UMGCalendarAssetStyle Defaults

You can pick new background colors for the calendar and the calendar body and pick widget class for the 4 elements of the calendar:

  • Header
  • A day in the calendar (ie everyday of the calendar that the user can click)
  • Week day (ie the way Monday / Tuesday... above the calendar days are displayed)
  • Footer

You can reuse the default widgets or those created for another style or create your own following the instructions below:

A new calendar header style widget must inherit the 'Calendar Header Widget Base' and must include the following elements in the design :

  • a TextBlock to display the current month and year => Content must be bound to property 'Header Text' from parent widget:
Calendar Header
  • 2 buttons to go back and forward within the calendar
  • A CalendarMenu_Style widget to be able to switch the header to the list mode.

The corresponding elements in the parent widget must be set with these values within the pre-construct event of the widget like so :

Calendar Header Pre-construct event
CalendarMenu

A new CalendarMenu widget must inherit the 'Calendar Menu Base' widget and must include the following elements in the design:

  • A comboBoxString to display the month list
  • A comboBoxString to display the year list

The corresponding elements in the parent widget must be set with these values within the construct event of the widget like so :

Calendar Menu construct event

Day widget

A new calendar day widget must inherit the 'Calendar Day Widget Base' widget and include the following elements in the design :

  • a TextBlock for the default day style => Content must be bound to property 'DayText' from parent widget:
Day Widget
  • a TextBlock for the selected day style (ie how a day is displayed in the calendar when selected) => Content must be bound to property 'DayText' from parent widget as well.
  • a TextBlock for the today day style (ie how a day is displayed in the calendar when it is current day) => Content must be bound to property 'DayText' from parent widget as well.

The corresponding elements in the parent widget must be set with these values within the pre-construct event of the widget like so :

Day Widget Pre-construct event

A new calendar footer widget must inherit the 'Calendar Footer Widget Base' and include the following elements in the design :

  • A today button (to go back to the current month if available in calendar)
  • A clear button ( to clear the selection if any)

The corresponding elements in the parent widget must be set with these values within the pre-construct event of the widget like so :

Footer Widget Pre-construct event

Release Notes

  • V1.0.0 : Initial Release
  • V1.1.0 :
    • Fix minor bug on year date display
    • Support for 4.24
  • V1.2.0 :
    • Add option to select a range
    • Add DatePicker_widget
  • V1.2.1 :
    • Minor visual fixes in demo options panel for 5.0 engine version
  • V1.2.2 :
    • Remove some warnings when inserting/starting calendar
Back to Product Page