Calendar

The calendar component is used to display a calendar and allow the selection of one or multiple dates.

Component Code

The first section of the component contains all the variables needed for the component to function.

OnParametersSetAsync()

This method is called when the component if first loaded and when there’s an update to its parent component.

Inside this method, several field definitions are retrieved using their property names and set to object variables for later use. Additionally, the type of selection for the calendar is determined based on the CalendarSelectionType property and is set to the CalendarSelectionMode property accordingly. Disabled dates are also parsed from the CalendarDisabledDates property.

Finally, the selected values for the calendar are assigned from either the pending changes or database values (if none exist, default values are used). An await base.OnParametersSetAsync() statement is called to end the method.

ValueChangedRangeStart(DateTime startDate)

This method is called when the start date of a range is selected. Its purpose is to assign the value to the RangeStart variable.

ValueChangedRangeEnd(DateTime endDate)

This method is called when the end date of a range is selected. Its purpose is to assign the value to the RangeEnd variable. It also checks to make sure the value is not the default DateTime value, if it’s not then ValueChanged() is called to update the XML.

ValueChanged(DateTime selectedDate = new())

This method is called when the selected date has changed (when using single or multi date selection) and by ValueChangedRangeEnd() when the end date of a range has been selected.

Its purpose is to first ensure the field is modifiable, then validate the dates, if there are no validation errors then ChangeXML() is called.

ChangeXML()

This method is called by ValueChanged(). Its purpose is to save the selected date(s) to the instances XML.

Below are the XML formats depending on the calendars selection type.

Multiple Dates:

<CalendarExample>
     <Type>Multiple Dates</Type>
     <Value>
         <Date>23/12/23</Date>
         <Date>18/01/24</Date>
     </Value>
</CalendarExample>

Date Range:

<CalendarExample>
     <Type>Date Range</Type>
     <Value>
         23/12/23 - 18/01/24
         <StartDate>23/12/23</StartDate>
         <EndDate>18/01/24</EndDate>
     </Value>
</CalendarExample>

Single Date:

<CalendarExample>
     <Type>Single Date</Type>
     <Value>23/12/23</Value>
</CalendarExample>