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:

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.

1. 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.