Calendar

You have to go through a four-step form wizard to enable this Control, i.e., Design, API, Advance & Mobile. Let’s explain these steps below:

1st Step – Design

Database Field Name: Defines the name of the database field to which the component's data will be mapped and stored.
Date Mapping Field: This field maps the date values in the database to the form.
Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
Label Name: Specifies the display name or title for a field or control in the user interface.
Calendar (Default View): Select from the following options to set the default calendar view: Month, Week, or Day.

2nd Step – API

Data

Data Source: Select data source from the following HTTP, Workflow, No SQL, or RDBMS.
1. HTTP: Choose the HTTP-based data connection for accessing external data.
  1. Data Connection: The connection type used to access the data.
  2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE, or POCO.
  3. API URL (mandatory): The URL of the API endpoint.
  4. Query Parameters: Additional parameters passed in the query string to modify the API request.
    1. Key: The key of the query parameter.
    2. Value: The value corresponding to the key.
    3. Query Variable: The variable name used in the query.
    4. Select Type: Choose the type of query parameter.
  5. Headers: Additional headers sent along with the API request.
    1. Name: The name of the header.
    2. Value: The value of the header.
  6. Others: Other optional settings related to the HTTP request.
    1. Enable raw query: Option to send raw query data in the request.
Response Attribute: The attribute or field in the response to map or handle.
Is API Result Nested: Specify whether the API result is nested within other data.

Mapping

Load Card by FormUI: This is used to configure the card grid using a Custom Card design.
1. Form Id: The unique identifier for the form to load the card grid.
2. Horizontal Alignment: Choose alignment from the following options: Left, Right, Center, Between, or Around.
3. Hide Default Border?: Option to hide the default border around the card grid.
4. Custom Header: Customizable header settings for the card grid.
  1. Name: The name of the custom header.
  2. Custom Class: The custom CSS class for styling the header.
  3. Width: The width of the custom header.
5. Header Custom Class: The CSS class used for styling the header of the card grid.

Card Type: There are certain cards designs to choose from like List, Photo, Backdrop, Large, Profile, Contact, Product, Dynamic, etc.
Field Mapping: Click on “Add New” button depending on how many fields you want to map in the grid based on requirement. And click the refresh button to reload the API response. After that start mapping following fields:
1. Binding: Configuration settings for binding data to the form elements.
  1. Label: The label text associated with the field.
  2. Data Field: From API: The data field retrieved from the API to bind to the element.
  3. Data Type: Choose data type from the following options: None, Email, Date, Title, SubTitle, Image, Header Image, etc.
  4. Text Color: Select the color of the text from the dropdown menu.
2. Web View: Configuration settings for how the card appears in web view.
  1. Label Option: Select label option from the following: Name Only, Name & Icon, Icon Only, or None.
  2. Disable Word Wrap?: Option to disable word wrapping in the card content.
3. Mobile View: Configuration settings for how the card appears in mobile view.
  1. Label Option: Select label option from the following: Name Only, Name & Icon, Icon Only, or None.
  2. Number of Line: Specify the number of lines to display.
  3. Mobile Color: Choose the color for the mobile view card.
  4. Hide in Mobile: Option to hide the card in mobile view.
  5. Font Size: Set the font size for the card content.
  6. Is Font Bold?: Option to make the font bold.
  7. Is Font Italic?: Option to make the font italic.

Action

Action Button Position: Popover or Card Footer option to place the action button.
1. Card Footer: Position the action button in the card footer section.
  1. Position: The specific position of the action button in the card footer.
Custom Action: Click on “Add New” to configure actions for the card as per the requirement. Then configure the following details:
1. Action: Settings for the specific action associated with the button.
  1. Button Text: The text displayed on the action button.
  2. Button Type: Select the button type from the dropdown menu.
  3. Action Type: Choose the action type from the following options: Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
  4. Primary Key Field: The field representing the primary key for the action.
  5. Redirect URL: The URL to redirect after the action.
  6. Primary Key Node (optional): The optional node for the primary key.
2. Web View: Settings for the action button in web view.
  1. Label Option: Choose label option from the following: Name Only, Name & Icon, or Icon Only.
3. Mobile View: Settings for the action button in mobile view.
  1. Label Option: Choose label option from the following: Name Only, Name & Icon, or Icon Only.
  2. Button Background Color: The background color of the button in mobile view.
  3. Button Text Color: The text color of the button.
  4. Button Size: The size of the button in mobile view.
  5. Button Variant: The variant of the button, such as outlined, filled, etc.
  6. Border Radius: The radius of the button's corners.
  7. Padding Vertical: Vertical padding for the button.
  8. Padding Horizontal: Horizontal padding for the button.
  9. Font Size: Font size for the text on the button.
  10. Line Height: Line height for the button's text.
4. Advance: Advanced settings for the action button.
  1. Mark As Default Action [Click on card]: Option to mark the action as the default when the card is clicked.
  2. Action: Choose the action from the following options: Hide, Show, Enable, or Disable.
  3. Add Rule: Add a rule to the action based on specific conditions.
    1. API Field: The API field associated with the rule.
    2. Operator: The operator for comparison in the rule.
    3. Value: The value to compare against.
    4. Action: The action to perform if the rule conditions are met.
    5. Is Value From DataModel: Specify if the value comes from a data model.
      1. Model Value From Another Form: Option to use a model value from a different form.

3rd Step – Advance

Show Card Header: Option to display or hide the header of the card.
Default Date Param: Calendar will redirect to the sending date through the specified parameter.

4th Step – Mobile

Container Height: The height of the container element.
Container Max Height: The maximum height of the container element.
Popover Right: The horizontal position of the popover relative to its reference point.
Popover Top: The vertical position of the popover relative to its reference point.
Margin Top: The space above the element, outside the border.
Margin Right: The space to the right of the element, outside the border.
Margin Bottom: The space below the element, outside the border.
Margin Left: The space to the left of the element, outside the border.
Padding Top: The space inside the element, above the content.
Padding Right: The space inside the element, to the right of the content.
Padding Bottom: The space inside the element, below the content.
Padding Left: The space inside the element, to the left of the content.
Background Color: The background color of the element.
Border Color: The color of the element's border.
Border Width: The width of the element's border.
Border Radius: The radius of the element's border corners, determining the roundness.
Enable Shadow?: Option to enable or disable the shadow effect for the element.

Click “Confirm” and “Calendar” control is configured.