import Calendar

Use a Calendar widget to display or select a date from a calendar. Click the calendar icon to select a date. The date and the calendar display in the format you specify. The icon does not appear on Mobile Web platforms .

To learn how to use this widget programmatically, refer Quantum Visualizer Widget guide.

Important Considerations

The following are important considerations for a Calendar widget:

Look Properties

Look properties define the appearance of the widget. The following are the major properties you can set:

For descriptions of the properties available on the Look tab of the Properties pane, see Look.

Skin Properties

Skin properties define a skin for the widget, including background color, borders, and shadows. If the widget includes text, you can also specify the text font.

For a Calendar widget, you can apply a skin and its associated properties for the following states:

Important: Custom border capability is now extended to iOS for the Calender widget.

Skin Definition
Normal The default skin of the widget.
Focus The skin applied when the focus is on the widget.
Grid

The skin properties applied for the grid calendar.

Cell The skin properties applied for the grid calendar cell.
Cell - Selected The skin applied when a grid calendar cell is selected.
Cell - Focus The skin applied when there is a focus on the grid calendar cell.
Cell - Today The skin applied for the grid calendar today cell.
Cell -Weekend

The skin applied for the weekend days of a grid calendar.

Cell - Inactive

The skin applied for non-working inactive days of a grid calendar.

Done Button The skin to be applied for Done button that appear on a calendar pop up.
Cancel Button The skin to be applied for a Cancel button that appear on a calendar pop up.
Day The day portion of the currently selected date.
Month The month portion of the currently selected date.
Hover Skin

The look and feel of a widget when the cursor hovers over the widget.

Note: Hover Skin is available only on the Windows (native) Tablet platform.

For more information about applying skins, see Understanding Skins and Themes.

Calendar Properties

Calendar properties specify properties that are available on any platform supported by Quantum Visualizer, and assign platform-specific properties.

Note: In this section, properties that can be forked are identified by an icon located to the left of the property. For more information, see Fork a Widget Property.

Start Date

Specifies the start date in the specified Data Format. The default start date is the current date.

To input a different default start date or to provide a platform-specific start date, click Edit to open the Start Date dialog box.

The Default value is the current date. To change this value, click the calendar icon and select a date from the calendar.

To provide a platform-specific start date, click the desired platform check box, and then click the calendar icon in the corresponding Value field. Select a date from the calendar.

End Date

Specifies the end date in the specified Data Format. The default end date is the current date.

To input a different default end date or to provide a platform-specific end date, click Edit to open the End Date dialog box.

The Default value is the current date. To change this value, click the calendar icon and select a date from the calendar.

To provide a platform-specific start date, click the desired platform check box, and then click the calendar icon in the corresponding Value field. Select a date from the calendar.

View Type

Specifies the calendar view type:

The View Type of the widget selected from this list becomes the default for all the platforms. You can provide a platform-specific value for a platform by forking the View Type property. See Fork a Widget Property for more details.

Default Date

Specifies a default date to be displayed on a Calendar widget. You can choose a date by clicking the calendar icon, and then selecting a date.

This date replaces any Placeholder value.

Data Format

Specifies the date format.

Default: DD/MM/YYY

Following date formats are supported:

Calendar Icon

Specifies the calendar icon.

Quantum Visualizer provides a default calendar icon. You can replace the default icon or provide a platform-specific icon by clicking the Edit button to open the Calendar Icon dialog box.

Select the platform and click the value field to open the Select Image dialog box. You can either select an image in the dialog box or provide an image URL.

Left Nav Image

Specifies the left navigation image that appears on the calendar popup. Click this image to navigate and select a past date from the calendar.

To specify an image, click the Edit button to open the Left Nav Image dialog box. You can either select an image in the dialog box or provide an image URL.

Right Nav Image

Specifies the right navigation image that appears on the calendar popup. Click this image to navigate and select a future date from the calendar.

To specifiy an image, click the Edit button to open the Right Nav Image dialog box. You can either select an image in the dialog box or provide an image URL.

Weekend Selectable

Select the check box to enable selection of weekend dates.

Mode

Specifies the calendar mode. (iOS only)

Following are the options:

Hide Days Header

This property is available only when View Type is set to Onscreen Grid or Popup Grid. It specifies whether the weekdays are hidden on the header of a grid calendar.

Note: This property is specific to iOS and Android platforms.

Hide Months Header

This property is available only when View Type is set as Onscreen Grid or Popup Grid. It indicates whether the months header is hidden for the grid calendar, including the navigation buttons.

Note: This property is specific to iOS and Android platforms.

Day Text Alignment In Cell

This property is available only when the View Type is set to Onscreen Grid or Popup Grid. It specifies the alignment of the text for a Calendar Day cell, regarding its boundaries. The alignment values are:

Note: This property is specific to iOS and Android platforms.

Cell Template

This property is available only when the View Type is set to Onscreen Grid or Popup Grid. It specifies the common template to be used for a Calendar Day cell. A template is used only when the data is present for a Calendar Day cell. If the data is not set to a cell, the cell appears with the default look, which has no template.

To assign a template for cell template:

  1. Click Edit to display the cellTemplate window.
  2. From the list of templates, select a template.
  3. Click OK.

Note: This property is specific to iOS and Android platforms.

Data

To modify the Data property, you need to assign a grid template to the Cell Template property.

Data represents the actual data to be rendered in each cell.

To specify the data:

  1. Click Edit to display the Master Data for GridCalendar window.
  2. From the Data column, click the calendar icon.
  3. Select a date.
  4. From the Template Data column, click the ellipsis button to display the Template Data window and update the data or skin of the widget.
  5. Click OK.

Note: This property is specific to iOS and Android platforms.

Height

This property is available only when View Type is set as Onscreen Grid or Popup Grid. It specifies the available height of the container in terms of percentage. The percentage is with reference to the value of Height Reference property.

Note: This property is specific to the iOS and Android platforms.

Height Reference

This property is available only when View Type is set as Onscreen Grid or Popup Grid and when you set the Height property.

The container height percentage is calculated based on the following:

Note: This property is specific to iOS and Android platforms.

Popup Title

For the SPA platform, specifies the title text to be displayed on the calendar popup.

Tool Tip

For the Windows platform, specifies a message that displays when you hover the mouse pointer over the widget.

Actions

Actions define what happens when an event occurs. On a Calendar widget, you can run an action when the following event occurs:

For more information, see Add Actions.

Placement Inside a Widget

The following table summarizes where a Calendar widget can be placed:

Flex Form Yes
VBox Form Yes
FlexContainer Yes
FlexScrollContainer Yes
HBox Yes
VBox Yes
ScrollBox Horizontal Orientation - Yes
Vertical Orientation- Yes
Tab Yes
Segment No
Popup Yes
Template

 

Header- No
Footer- No

 

 

 

 

Rev Author Edits
8 SHS SHS
7.2.1 SHS SHS
Copyright © 2020 Temenos. All rights reserved.