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

1. Database Field Name (mandatory): These are the attributes of the form
2. Date Mapping Field
3. Column Width
4. Label Name
5. Calendar (Default View): Select from the following Month, Week or Day

2nd Step – API

1. Data
1. Data Source: Select data source from the following HTTP, Workflow, No SQL or RDBMS
   1. HTTP
      1. Data Connection
      2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
      3. API URL (mandatory)
      4. Query Parameters
         1. Key
         2. Value
         3. Query Variable
         4. Select Type
      5. Headers
         1. Name
         2. Value
      6. Others
         1. Enable raw query
2. Response Attribute
3. Is API Result Nested

2. Mapping
1. Load Card by FormUI: This is used to configure card grid using a Custom Card design
   1. Form Id
   2. Horizontal Alignment: Choose alignment from the following Left, Right, Center, Between or Around
   3. Hide Default Border?
   4. Custom Header
   1. Name
   2. Custom Class
   3. Width
   5. Header Custom Class

2. Card Type: There are certain cards designs to choose from like List, Photo, Backdrop, Large, Profile, Contact, Product, Dynamic, etc.
3. 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
      1. Label
      2. Data Field: From API
      3. Data Type: Choose data type from the following None, Email, Date, Title, SubTitle, Image, Header Image, etc.
      4. Text Color: Select option from the dropdown menu
   
   2. Web View
      1. Label Option: Select label option from the following Name Only, Name & Icon, Icon Only or None
      2. Disable Word Wrap ?
   
   3. Mobile View
      1. Label Option: Select label option from the following Name Only, Name & Icon, Icon Only or None
      2. Number of Line
      3. Mobile Color
      4. Hide in Mobile
      5. Font Size
      6. Is Font Bold ?
      7. Is Font Italic ?
   
3. Action
1. Action Button Position: Popover Or Card Footer
   1. Card Footer
      1. Position
2. Custom Action: Click on “Add New” button depending on how many actions you want to configure on the card based on requirement. Then configure the following details:
   1. Action
      1. Button Text
      2. Button Type: Select option from the dropdown menu
      3. Action Type: Choose action type from the following Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
      4. Primary Key Field
      5. Redirect URL
      6. Primary Key Node (optional)
   
   2. Web View
      1. Label Option: Choose label option from the following Name Only, Name & Icon or Icon Only
   
   3. Mobile View
      1. Label Option: Choose label option from the following Name Only, Name & Icon or Icon Only
      2. Button Background Color
      3. Button Text Color
      4. Button Size
      5. Button Variant
      6. Border Radius
      7. Padding Vertical
      8. Padding Horizontal
      9. Font Size
      10. Line Height
   
   4. Advance
      1. Mark As Default Action [Click on card]
      2. Action: Choose action from the following Hide, Show, Enable or Disable
      3. Add Rule
         1. API Field
         2. Operator
         3. Value
         4. Action
         5. Is Value From DataModel
            1. Model Value From Another Form
   

3rd Step – Advance

1. Show Card Header
2. Default Date Param: Calendar will redirect to the sending date through parameter

4th Step – Mobile

1. Container Height
2. Container Max Height
3. Popover Right
4. Popover Top
5. Margin Top
6. Margin Right
7. Margin Bottom
8. Margin Left
9. Padding Top
10. Padding Right
11. Padding Bottom
12. Padding Left
13. Background Color
14. Border Color
15. Border Width
16. Border Radius
17. Enable Shadow ?

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