Calendar

The Calendar control allows users to select and manage dates. It provides an organized view of days, weeks, months, and years, making it easy to choose a specific date or view scheduled events. 

Working 

The Calendar control allows users to view and select dates. It supports different views, including Month, Week, and Day. The selected date can also be displayed in other controls, such as a TextBox or Label. The control can be triggered either by selecting a date directly or by setting its value through a rule. 

Properties 

Here is the list of properties that are available.

General
S.No	Property name	Data Type	Description
1	Control Name	String	It specifies a unique name for the control within the form.
2	Control Type	String	It specifies the type of control.
3	ID	Int	The ID property specifies a unique identifier for the calendar control.
4	Calendar Navigation	String	Sets the configured value in the corresponding control of the navigated form.
5	Date Format	String	Specifies the format in which the selected date is displayed.
6	Display Event Time	Boolean	Determines whether the time associated with calendar events is shown alongside the event details in the calendar view.

Style
7	Width	String	The Width property of a Calendar control determines the horizontal size of the calendar on the user interface.
8	Height	String	It determines the vertical size of the calendar
9	Margin	String	It defines the space outside the control, creating distance between the calendar and other surrounding UI elements.
10	Box Shadow	String	It allows you to create depth, elevation, or highlighting effects by drawing a shadow outside or inside the element’s box.
11	Enable Custom Font	Boolean	It allows the user to apply a specific font style, size, and type to the calendar’s text, instead of using the default system font.
12	Font	String	Specifies the style of the text displayed in the calendar
13	Custom Font	String	Sets the custom font style of the control. This is available only on enabling “Enable custom font” property.
14	Font Color	String	Specifies the color of the text displayed in the calendar.
15	Visible	Boolean	It determines whether a control is displayed or hidden on the user interface.
16	Border Style	String	Specifies the appearance or pattern of the border around the calendar.
17	Padding	String	Defines the space between the content of a cell and its border.
18	Border	Boolean	Set the border for the control.
19	Border Thickness	Int	Specifies the width (or thickness) of the border around the calendar.
20	Border Radius	Int	Border-radius makes the corners of a box or calendar control curved instead of square.
21	Border Color	String	Specifies the color of the border around the calendar

DataSource
22	DataSource Type	String	Specifies the type of data source from which the calendar retrieves events.
23	Items	String	The Items property under the DataSource tab of a Calendar control is specifically used to manage and configure the collection of events or entries that are displayed on the calendar when using a data source.

Rules
24	Rules		After selecting the control, if the user clicks on the Rules tab, it will expand and display a Rules property. The “Create Rule” option can be selected from a drop-down list. Clicking on the “Create Rule” link button will navigate the user to the Rules Engine. The same control will be added as a trigger by default to execute the Rule.

Reports
25	Control Report		Selecting the Control Report option will redirect to the Reports tab, which will display all configurations, rules, and data source details associated with the selected control.

Template
26	Inherit Template	Boolean	Enable this option to inherit styles from templates.

Custom Style
27	CSS Class	String	Sets one or more CSS classes to Calendar control for styling purposes.

Custom Property
28	Html Attribute	String	The HTML Attribute property allows you to add custom HTML attributes to Calendar control when it is rendered on a web page.

Developer Option
29	Enable Custom Method	Boolean	The Enable Custom Method property of a calendar control allows you to attach or enable custom code (methods) to handle specific events or behavior of the calendar.

Responsive Options
30	Template Name	String	The HTML Attribute property allows you to add custom HTML attributes to Calendar control when it is rendered on a web page.
31	Custom Loader	String	Select a set busy indicator to display while events are loading.

Rules

Here is the fundamental list of properties that can be utilized from rules.

Action –        This displays the last action performed on the calendar trigger.

                    For instance: “MessageBox(Calendar1.Action)”

Month –       To display the month of the selected date.

                    For instance: “MessageBox(Calendar1.Month)”

Year –           To display the year of the selected date.

                    For instance: “MessageBox(Calendar1.Year)”

Date –          To display the date selected in the calendar control.

                   For instance: “MessageBox(Calendar1.Date)”

Event Id –    To display the event id of the selected event in the calendar control.

                   For instance: “MessageBox(Calendar1.EventId)”

Event –        To display the event selected in the calendar control.

                   For instance: “MessageBox(Calendar1.Event)”

DataSource

Step:1 – To configure the data source on the calendar, follow these steps:

1. Click on the calendar control.

2. Select ‘New DataSource Configuration’.

Step:2 –Choose a data source type to connect the Calendar control. In this example, the MS SQL data source is selected. 

Step:3 – Select the required data source. Click Next to continue. 

Step:4 – After clicking ‘Next,’ a list of all tables available in the selected database will be displayed. Select the table or tables from the list, then click ‘Next’.

Step:5 – If multiple tables are selected, establishing relationships is mandatory. The selected tables must be available for relationship configuration. Then, click the ‘Next’ button.

Step:6 – Choose the columns to be displayed from the selected tables and map the properties, and then click ‘Next’.

Step:7 – If required, click Add to define criteria for populating the search. Select a column from the first dropdown, choose an operator from the second dropdown, and select the control whose value will be used in the third field. Click the + icon to add additional criteria. Once the criteria are configured, click Next to continue. 

Step:8 – Click on ‘Add Trigger’ to automatically create a rule for initiating the fill of the calendar control based on the provided criteria.

Step:9 – Click on ‘Finish’ to complete the calendar configuration. The created rule can be viewed from the ‘Rule’ tab, along with the provided trigger.

Step:10– Go to form preview.

Calendar Navigation

Step:1 – Navigate to the ‘Property’ section; here, you can observe calendar navigation options.

Step:2 – Click the Settings icon to open the Calendar Navigation Wizard. 

Step:3 – In the Calendar Navigation wizard,

1. Choose any form.

2. Select the Target Field Name and Source Field Name.

3. After selecting the Target Field Name and Source Field Name, click the ‘Add’ button to include multiple Target Field Names and Source Field Names.

4. After adding them, click the ‘OK’ button to preview.

Step:4– In Preview mode, when a date is selected in the Calendar control, the selected value is automatically passed to the target field in the destination form during navigation. Configured events are displayed on their corresponding dates in the Calendar control.