Using the Calendar View

Go Up to VCL

TCalendarView provides month, year, and decade views. You can also select date ranges with animated transitions when navigating between views. TCalendarView fully supports VCL styling for Windows 10 and previous versions of Windows.

Switching between views

TCalendarView includes the following views:

• Month
• Year
• Decade

TCalendarView displays the month view by default, but allows you to configure a different default view.

• Click the header in the month view to open the year view
• Click the header in the year view to open the decade view
• Select a year in the decade view to open the year view
• Select a month in the year view to open the month view
• Use the chevron icons next to the calendar header to navigate in the month, year, and decades views.

Changing styles

TCalendarView allows you to set custom styles for your calendar. You can choose from a variety of VCL Styles and apply a selected style in a few steps:

1. Click Options in the Project menu to open the Project Options dialog box.
2. Click Application in the left-hand panel and select Appeareance.
3. Select a style from the list of Custom Styles and click OK.

Implementing an Event Handler

TCalendarView allows you to handle Drawing Parameters by using Drawing Events:

1. Click the Events tab in the Object Inspector
2. Double-click OnDrawDayItem to open the Code Time.
3. Type the required code to handle the Drawing Parameter.

E.g., Use the following code to assign a red color to weekend days:

Delphi:

if DayOfWeek(CalendarViewViewInfo.Date) in [1, 7] then
    DrawParams.ForegroundColor := clRed;

C++Builder:

if ((DayOfWeek(CalendarViewViewInfo->Date) == 1) ||
    (DayOfWeek(CalendarViewViewInfo->Date) == 7))
{
    DrawParams->ForegroundColor = clRed;
}

Tip: Set the Handled property to True to be able to draw elements of the calendar.

Customizing the TCalendarView header

The HeaderInfo property allows you to customize the following appearance settings of the Calendar header:

• Header font type
• Header font color
• Header highlight font color
• Days of the week font color

Setting colors

TClaendarView allows you to cutomize all colors displayed in the Calendar Control.

1. Use the HeaderInfo > FontColor property to set the font color in the header.
2. Use the HeaderInfo > DaysOfWeekFont property to set the font color used to display the days of the week.
3. Use the HighlightColor property to specify the color of the highlight rectangle.
4. Use the BorderColor property to modify the border color.
5. Use the TodayColor property to change the color used to display the current date.
6. Use the DisabledColor property to set the color used to display the disabled dates.
7. Use the FocusedColor property to specify the color of the dotted focus rectangle.
8. Use the SelectionColor property to specify the color of the selection rectangle.
9. Use the Color property to change the calendar background color.
10. Use the FontColor property to customize the font color of the dates.

Configuring year settings

TCalendarView allows you to specify a range of years to display. You can also configure a range of years for the users to select from:

1. Use the FirstYear property to set the initial year.
2. Use the LastYear property to set the final year.

Follow these steps to set a range of years the users can select from:

1. Use the MinYear property to configure the initial year users can select from.
2. Use the MaxYear property to set the final year users can select from.

Selecting dates

TCalendarView allows you to specify how many dates a user can select simultaneously. Use the SelectionMode property to allow Multiple or Single selection of dates. You can also prevent the user from selecting a date by setting the property to smNone.

Tip: Use the AddToSelectedDates and RemoveFromSelectedDates methods to manage the dates selection through code. Use the SelectedDates property to get a list of the selected dates.

Configuring days of the week

With TCalendarView you can specify which day of the week is displayed as the first day of the week. You can also choose to display or hide the names of the days of the week.

• Use the FirstDayOfWeek property from the Object Inspector to select which day is going to be displayed as the first day of the week.

• Use the ShowDayOfWeek property from the Object Inspector to enable (true) or disable (false) the visibility of the names of the days of the week.

See Also

Using the Calendar Picker