Styles

• Aug 02, 2022
• 5 minutes to read

This topic describes how to customize the appearance of the scheduler control’s elements by using styles. The examples in this topic are based on the StylesDemo that ships with the ExpressScheduler Suite.

The scheduler control provides two ways for developers to customize its appearance – by using styles or performing custom drawing. The easiest way is to use styles.

The following image shows the scheduler’s elements:

Note: the scheduling area‘s background is only visible in the Day View that occupies a part of the scheduling area along the y-axis (the vertical scrollbar in the scheduling area disappears). For example, to make this available the following conditions should be met: the View’s TimeScale property is set to 60 and the scheduler’s parent is big enough to allow the scheduler control to show its content without the scrollbar. The Date Navigator‘s background can be visible if the scheduler’s OptionsCustomize.IntegralSizing property is set to False. The following images show the scheduling area’s and Date Navigator’s backgrounds:

There are classes that implement styles to custom paint the various elements of the scheduler control: the TcxSchedulerStyles (referenced by the TcxCustomScheduler.Styles property), TcxSchedulerDayViewStyles (referenced by the TcxSchedulerDayView.Styles property), TcxSchedulerTimeGridViewStyles (referenced by the TcxSchedulerTimeGridView.Styles property), TcxSchedulerYearViewStyles (referenced by the TcxSchedulerYearView.Styles property), and TcxSchedulerDateNavigatorStyles (referenced by the TcxSchedulerDateNavigator.Styles property).

The following table lists the properties that are responsible for specifying the styles of the appropriate scheduler control’s elements:

Property	Description
TcxSchedulerStyles.Background	Specifies the style settings for the scheduler control’s background. Note: the scheduling area’s background is only visible in the Day View that occupies a part of the scheduling area along the y-axis (the vertical scrollbar in the scheduling area disappears).
TcxSchedulerStyles.Content	Specifies the style settings for the time blocks in the scheduling area and the Date Navigator’s calendar.
TcxSchedulerStyles.Event	Specifies the style settings for the scheduled user event in the scheduling area.
TcxSchedulerStyles.DayHeader	Specifies the style settings for the headers of days (except for the current day).
TcxSchedulerStyles.HorzSplitter	Specifies the style settings for the horizontal splitter.
TcxSchedulerStyles.ResourceHeader	Specifies the style settings for the resource’s header.
TcxSchedulerStyles.Selection	Specifies the style settings for the currently selected time blocks.
TcxSchedulerStyles.VertSplitter	Specifies the style settings for the vertical splitter.
TcxSchedulerDayViewStyles.HeaderContainer	Specifies the style settings for the all-day event area located at the top of each day.
TcxSchedulerDayViewStyles.SelectedHeaderContainer	Specifies the style settings for the all-day event area which is located at the top of a day, when it is selected.
TcxSchedulerDayViewStyles.TimeLine	Specifies the style settings for the timeline bar.
TcxSchedulerDayViewStyles.TimeRuler	Specifies the style settings for time rulers.
TcxSchedulerTimeGridViewStyles.MajorScale	Specifies the style settings for the major time scale.
TcxSchedulerTimeGridViewStyles.MajorScaleUnitSeparator	Specifies the style settings for the major time scale’s splitter.
TcxSchedulerTimeGridViewStyles.MinorScale	Specifies the style settings for the minor time scale.
TcxSchedulerTimeGridViewStyles.SelectionBar	Specifies the style settings for the time selection bar.
TcxSchedulerYearViewStyles.MonthHeader	Specifies the style settings for the month headers.
TcxSchedulerYearViewStyles.UnusedContent	Specifies the style settings for the cells of the adjacent months.
TcxSchedulerDateNavigatorStyles.Background	Specifies the style settings for the Date Navigator’s background. Note: the Date Navigator’s background can be visible if the scheduler’s OptionsCustomize.IntegralSizing property is set to False.
TcxSchedulerDateNavigatorStyles.Content	Specifies the style settings for the Date Navigator month’s content.
TcxSchedulerDateNavigatorStyles.Header	Specifies the style settings for the Date Navigator’s month header.
TcxSchedulerDateNavigatorStyles.Selection	Specifies the style settings for the selected date(s) in the Date Navigator.

To apply the custom styles do the following:

1. Drop the TcxStyleRepository component (located on the DevExpress page) onto a form from the Component Palette. Double-click it to invoke the Styles editor. Create a style, name it and modify its settings.

2. Select the scheduler control and using the Object Inspector assign the newly created style to the property that represents the element the style is applied to:

This is the result when the application is running:

Do the same for the other elements of the scheduler control.

Besides the properties described above below the list of events that allow you to dynamically apply custom styles to some scheduling area’s elements:

• TcxSchedulerStyles.OnGetContentStyle – for the time block;

• TcxSchedulerStyles.OnGetDayHeaderStyle – for the day’s header;

• TcxSchedulerStyles.OnGetEventStyle – for the user event;

• TcxSchedulerStyles.OnGetResourceHeaderStyle – for the resource;

• TcxSchedulerTimeGridViewStyles.OnGetMajorScaleParams – for the major time scale in the TimeGrid View;

• TcxSchedulerTimeGridViewStyles.OnGetMinorScaleParams – for the minor time scale in the TimeGrid View;

• TcxSchedulerTimeGridViewStyles.OnGetSelectionBarParams – for the time selection bar in the TimeGrid View;

• TcxSchedulerYearViewStyles.OnGetMonthHeaderStyle – for the month header in the Year View;

• TcxSchedulerYearViewStyles.OnGetUnusedContentStyle – for the month’s cell in the Year View.

The following example implements the OnGetDayHeaderStyle event handler.

Using the TcxStyleRepository component, described above, invoke the Styles editor. Create a style, name it as stDayHeaderStyle and set the text color attribute as clBackground, the font’s name as Arial and activate the style’s bold attribute, as shown in the following image:

Next, provide implementation for the event handler with the newly created style:

// ...
var
  ACurrentDate : TDateTime;
begin
  ACurrentDate := Date;
  if ADate = ACurrentDate then
    AStyle := stDayHeaderStyle;
end;

This is the result when the implemented event handler is applied:

Note

the output shown is produced when the LookAndFeel.NativeStyle property is set to False and the LookAndFeel.Kind property is set to lfFlat.