Calendar Control

The Calendar control is a display control that is used to provide calendar interface in apps.

Properties

UI Properties

  • Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the file parser control. Visibility of Label can be toggled using the hidden property toggle option. Furthermore, size, weight, color and alignment of Label text can be altered.
  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property.
  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the visibility toggle property
  • External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.
  • Grid Configurations
    Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the fields even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.
    Hidden : The hidden option helps to hide the control from the user. This helps when you don’t want the user to view the control.
    Trigger Dependents : When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here ..By default Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.
  • Hide on desktop : This option hides the selected control in the desktop view
  • Hide on Mobile : This option hides the selected control in the mobile view.
  • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.
  • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.
  • Maximum height : This option is used to set the maximum height of the control. Height can be in following units :- px, em , vh, %. For more information about these units, refer here.

Note :- Hide on desktop, Hide on Mobile, Dynamic Height and Maintain space when hidden are available in Basic Freeflow Editor Only.

Control Properties

  • Title:- Used to set the title of a task, this is a required field.

  • Body:- Used to set the body of a task.

  • Start Date:- Used to set the start date of a task, this is a required field.

  • End Date:- Used to set the end date of a task, this is a required field.

  • Category:- Used to set the category of a task.

  • Time- this is the default category incase task doesn’t have a category

  • Allday- this category specifies the task to be running whole day long, even if the start and end date for this task is not specified

  • Milestone- this category is used for tasks that are of critical importance for a day. These tasks are NOT visible in other views except the daily view.

  • Task- this category is for tasks but not critically important for a day. These tasks are NOT visible in other views except the daily view.

  • Default Calendar View:- Used to set the calendar view of a task, which can be Daily, weekly or monthly.

  • Open detailed view on click:- when enabled, a detailed view of the task is provided in a tray when a task is clicked on.

  • Specific Date Formats:- Calendar control receives data in the form of tasks. Each task is generally defined in similar manner.

      {
      "COMPANY NAME": value,
      "SECURITY TYPE": value,
      "ISSUE PRICE": value,
      "Symbol": value,
      "ISSUE START DATE": value,
      "ISSUE END DATE": value,
      "PRICE RANGE": value,
      "DATE OF LISTING": value
      }
    

Here, we can notice for 3 fields ie Issue Start date, Issue end date and Date of listing, we have to assign dates. Calendar control accept date in all universally recognised timestamp formats

For example

2022-03-23T17:31:00+09:00
2022-03-23 02:30:00 pm
2022-03-23 06:30:00

Incase you want to provide date in another format, you would have to define it in Calendar control > properties > toggle Specific format and specify your date format

You can use D,M,Y,H,M and S to substitute for respective date and time values.

For more information on custom date formats and local time formats, refer here.

UI Configs

Theme:- This option is used to set theme color of selected date and New Event button
Fit height to screen: Enable to set the Height of the Calendar control to fit the screen. The Calendar Control fits the screen and you can scroll within the control area.

On grid layout if you have stretched the control height more than page than fit to height will leave some extra wight space before starting the next control.

image

`

Note: Avoid using two calendar controls simultaneously on a single screen with one having Fit Height to screen property toggled on.

`

Calendar UI

  • Header Background color:- This option is used to set the theme color of the header that contains Days/ Date depending on the selected view.
  • Font Size:- This option is used to set the font size of individual dates in the calendar grids.

Font Color

  • Sunday:- This option is used to set theme color of Sunday’s of a month
  • Weekday:- This option is used to set theme color of Weekdays of a month
  • Saturday:- This option is used to set theme color of Saturday’s of a month

Schedule

  • Background:- This option is used to set the background color of schedules.
  • Text color:- This option is used to set the font color of schedules.

Actions (UI settings)

We can additionally introduce specific actions that can be performed on tasks. For the action’s styling user can configure following properties

  • Show:- toggle to set visibility of action
  • Text:- used to set the text for action
  • Color:- used to set the text color of the action
  • Icon:- used to set the icon for action

Actions (Actionflow)

Certain actions can be configured for the calendar control

  • Schedule_click:- This action is triggered when a user clicks on a task. The Calendar control provides the details of the task i.e a side panel having all details about a particular task. Using which an actionflow can be created to perform certain logical tasks.
  • new_schedule:- This action is triggered when a user clicks on a date or on the New Schedule button. The Calendar control provides with the clicked date, using which an actionflow can be created to perform certain tasks.
  • Action_click:- This action is triggered when the user clicks the custom designed by them. At most, there can be 4 actions for a task.

How to use Calendar control

From the controls option on the left sidebar, search for Calendar control, pick and drop this control on your screen.

You can use the data option to bind data to Calendar Control. You can learn more about validations here. There are different ways in which you can bind data.

Static Data: You can add Static data as an array of objects. Data will be a URL endpoint that will point to data. Data should be in similar format given below

{
  "COMPANY NAME": value,
  "SECURITY TYPE": value,
  "ISSUE PRICE": value,
  "Symbol": value,
  "ISSUE START DATE": value,
  "ISSUE END DATE": value,
  "PRICE RANGE": value,
  "DATE OF LISTING": value
  }

Sheets: You can use data from sheets as well.

image6

You can specify the sheet, the columns and in case you want additional filters and sorting, you can apply them. To learn more about the filters and sorting, refer here.

Controls: You can select Controls > fieldname to fetch data from for the file parser control.

Variables and Keywords: You can make use of the Variables and Keywords to get data for the file parser control.

Query String: This assigns the value returned by the Query string.

Logged In User: This allows you to select properties for the Logged In user like UserName, UserMail that would be the data for the file parser control.

Connectors: This allows you to add a Connector and select the values returned by the respective Connectors.

Custom Formula: This can be used to apply formulas and use the output of those formulas to set the control. You can learn more about formulas here.

Preview

Calendar control

Calendar control view options