CSS Classes

Besides customizing the appearance of calendar views and items by using techniques described in Customizing the Appearance of Views and Customizing the Appearance of Items you can override the built-in CSS classes by providing your own. There are several ways to do that. The Item class exposes a CssClass property where the name of a particular user defined CSS class can be set, thus changing the appearance of individual items. To change the look of all visible items in a Calendar you may override directly the predefined visual styles of items.

Styling items

The following table lists the names of the predefined CSS classes, used to style items in a Calendar view:

Note
The tables below show the classes defined in the built-in Vista theme. The other themes use the same class names, just with a different theme identifier - for example instead of the .Vista class, the Windows2003 theme uses .Windows2003 as root class name; .WebPlannerPopupFormVista is named .WebPlannerPopupFormSilver in the Silver theme and so on.

Css class name	Description
.Vista .appointment .frame	Styles the background of items in non Timetable views.
.WebPlannerPopupFormVista  .appointment .frame	Styles the background of items inside an ItemsCueForm.
.Vista .appointment.timetable .wrapper	Styles the background of items in Timetable view.
.Vista .appointment .borders	Styles borders of items.
.WebPlannerPopupFormVista .appointment .borders	Styles borders of items inside an ItemsCueForm.
.Vista .appointment .subject	Styles the header text of items.
.WebPlannerPopupFormVista .appointment .subject	Styles the header text of items inside an ItemsCueForm.
.Vista .appointment .details	Styles the description text of items in a Timetable view.

Example

The following example shows how to style all items in the calendar by removing the default background image, setting different background, border and font of the header text:

CSS

.appointment .frame,
.appointment .wrapper
{
    background-image: none !important;
    background-color: Red !important;
}
.appointment .wrapper .borders
{
    border: solid 1px Blue !important;
}
.appointment .frame .subject
{
    font-family: Verdana !important;
}

The code above will produce the following result in the Standard theme:

The next example uses the same style from above, but defined only for particular item(s) by assigning to the CssClass property:

C#

Appointment appointment = new Appointment();
appointment.StartTime = DateTime.Now;
appointment.EndTime = appointment.StartTime.AddHours(5);
appointment.HeaderText = "CSS Styled Item";
appointment.CssClass = "MyCustomCssClass";

Calendar1.Schedule.Items.Add(appointment);

Visual Basic

Dim appointment As New Appointment()
appointment.StartTime = DateTime.Now
appointment.EndTime = appointment.StartTime.AddHours(5)
appointment.HeaderText = "CSS Styled Item"
appointment.CssClass = "MyCustomCssClass"Calendar1.Schedule.Items.Add(appointment)

CSS

.MyCustomCssClass .frame,
.MyCustomCssClass .wrapper
{
    background-image: none !important;
    background-color: Red !important;
}
.MyCustomCssClass .appointment .wrapper .borders
{
    border: solid 1px Blue !important;
}
.MyCustomCssClass .appointment .frame .subject
{
    font-family: Verdana !important;
}

Styling calendar views

Single Month view

The following table lists the names of the predefined CSS classes, used to style the Single Month calendar view:

Css class name	Description
.WebPlannerSingleMonth .Vista	Styles the background of the view.
.WebPlannerSingleMonth .Vista .header .title td	Styles the main header element of the view.
.WebPlannerSingleMonth .Vista .navButton td.year, .WebPlannerSingleMonth .Vista .navButton td.month	Styles the navigation buttons of the view.
.WebPlannerSingleMonth .Vista .header .weekDays .days td	Styles the week day names subheader of the view.
.WebPlannerSingleMonth .Vista .weekNumberLeft	Styles the week numbers subheader of the view.
.WebPlannerSingleMonth .Vista .month	Styles regular day cells.
.WebPlannerSingleMonth .Vista .padding	Styles padding day cells.
.WebPlannerSingleMonth .Vista .month .title	Styles regular day cells' headers.
.WebPlannerSingleMonth .Vista .padding .title	Styles padding day cells' headers.

Month Range view

The following table lists the names of the predefined CSS classes, used to style the Month Range calendar view:

Css class name	Description
.WebPlannerMonthRange .Vista	Styles the background of the view.
.WebPlannerMonthRange .Vista .mainHeader .title td	Styles the main header element of the view.
.WebPlannerMonthRange .Vista .navButton td.year	Styles the year navigation buttons of the view.
.WebPlannerMonthRange .Vista .header .title td	Styles the month header elements of the view.
.WebPlannerMonthRange .Vista .header .weekDays .days td	Styles the week day names subheader of the view.
.WebPlannerMonthRange .Vista .weekNumberLeft	Styles the week numbers subheader of the view.
.WebPlannerMonthRange .Vista .month	Styles regular day cells.
.WebPlannerSingleMonth .Vista .padding	Styles padding day cells.
.WebPlannerSingleMonth .Vista .month .title	Styles regular day cells' headers.
.WebPlannerSingleMonth .Vista .padding .title	Styles padding day cells' headers.

Week Range view

The following table lists the names of the predefined CSS classes, used to style the Week Range calendar view:

Css class name	Description
.WebPlannerWeekRange .Vista	Styles the background of the view.
.WebPlannerWeekRange .Vista .header .title td	Styles the main header element.
.WebPlannerWeekRange .Vista .header .week .days td	Styles the week days subheader.
.WebPlannerWeekRange .Vista .day	Styles the time cells.
.WebPlannerWeekRange .Vista .day .title	Styles the time cells' headers.

Timetable view

The following table lists the names of the predefined CSS classes, used to style the Timetable calendar view:

Css class name	Description
.WebPlannerTimetable .Vista	Styles the background of the view.
.WebPlannerTimetable .Vista .header .title .headerRow th	Styles the main header cells.
.WebPlannerTimetable .Vista .header .title .groupRow th	Styles the group header cells.
.WebPlannerTimetable .Vista .header .title .itemsRow td, .WebPlannerTimetable .Vista .header .title .emptyRow td	Styles the items header cells.
.WebPlannerTimetable .Vista .timeline, .WebPlannerTimetable .Vista .cornerCell	Styles the timeline.
.WebPlannerTimetable .Vista .navButton td.button	Styles the view's navigation buttons.
.WebPlannerTimetable .Vista .cell	Styles the time cells.
.WebPlannerTimetable .Vista .workCell	Styles the work-time time cells.

List view

The following table lists the names of the predefined CSS classes, used to style the List calendar view:

Css class name	Description
.WebPlannerListView .Vista	Styles the background of the view.
.WebPlannerListView .Vista .mainHeader .dates	Styles main header's cells.
.WebPlannerListView .Vista .navButton td.button	Styles the view's navigation buttons.
.WebPlannerListView .Vista .groupHeader td	Styles group header's cells.
.WebPlannerListView .Vista .day	Styles the time cells.
.WebPlannerListView .Vista .day .title	Styles the time cells' headers.

Resource view

The following table lists the names of the predefined CSS classes, used to style the Resource view:

Css class name	Description
.WebPlannerResourceView .Vista	Styles the background of the view.
.WebPlannerResourceView .Vista .mainHeader .dates, .WebPlannerResourceView .Vista .corner	Styles the timelines of the view.
.WebPlannerResourceView .Vista .groupHeader td	Styles group header's cells.
.WebPlannerResourceView .Vista .laneCell	Styles lane cells.

Styling selection

The following table lists the names of the predefined CSS classes, used to style the selection of cells in a calendar view:

Css class name	Description
.WebPlannerSingleMonth .Vista .content .frame .monthDays .week .bgRow .month .dayWrapper .borders.selection	Styles the selection of regular days in Single Month view.
.WebPlannerSingleMonth .Vista .content .frame .monthDays .week .bgRow .padding .dayWrapper .borders.selection	Styles the selection of padding days in Single Month view.
.WebPlannerMonthRange .Vista .content .frame .monthDays .week .bgRow .month .dayWrapper .borders.selection	Styles the selection of regular days in Month Range view.
.WebPlannerMonthRange .Vista .content .frame .monthDays .week .bgRow .padding .dayWrapper .borders.selection	Styles the selection of padding days in Month Range view.
.WebPlannerWeekRange .Vista .content .wrapper .weekRow .bgDays .day .dayWrapper .borders.selection	Styles the selection of days in Week Range view.
.WebPlannerListView .Vista .horizontal .wrapper .content .row .bgDays .day .dayWrapper .borders.selection	Styles the selection of cells in List view.
.WebPlannerTimetable .Vista .schedule .scheduleTable .column .row.selection .cell	Styles the selection of regular cells in Timetable view.
.WebPlannerTimetable .Vista .schedule .scheduleTable .column .row.selection .workCell	Styles the selection of working hours cells in Timetable view.

The following table lists the name of the predefined CSS class, used to style the indicator, visible when a drag operation is taking place:

Css class name	Description
.Vista .dragIndicator	Styles the overlay shown in time cells during dragging operations.

Example

The following example shows how to customize the selection in Single Month view, by settings its color to Yellow and the color of the titles of selected cell to Orange:

CSS

.WebPlannerSingleMonth .Vista .content .frame .monthDays .week .bgRow .padding .dayWrapper .borders.selection,
.WebPlannerSingleMonth .Vista .content .frame .monthDays .week .bgRow .month .dayWrapper .borders.selection
{
    background-color: Yellow !important;
}
.WebPlannerSingleMonth .Vista .content .frame .monthDays .week .bgRow .padding .dayWrapper .borders.selection .title,
.WebPlannerSingleMonth .Vista .content .frame .monthDays .week .bgRow .month .dayWrapper .borders.selection .title
{
    background-color: #ffa500 !important;
}

Styling built-in forms

The following table lists the names of the predefined CSS classes, used to style built-in popup forms in a calendar view:

Css class name	Description
.WebPlannerPopupFormVista .frame	Styles the outer frame of a form.
.WebPlannerPopupFormVista .frame #header	Styles the header of a form.
.WebPlannerPopupFormVista .frame #main-content	Styles the main content of a form.
.WebPlannerPopupFormVista .frame #main-content .dates-text	Styles the dates header in a NewForm.
.WebPlannerPopupFormVista .frame #main-content .buttons-row	Styles the buttons container in a form.
.WebPlannerPopupFormVista .frame #main-content .buttons-row a.button	Styles the buttons in a form.
.WebPlannerPopupFormVista .frame #main-content .text-area	Styles textarea elements in a form.
.WebPlannerPopupFormVista .frame #main-content .text-box	Styles textbox elements in a form.
.WebPlannerPopupFormVista .frame #main-content .dropDown-list	Styles drop-down elements in a form.
.WebPlannerPopupFormVista .frame #main-content .checkbox-list	Styles checkboxes in a form.
.WebPlannerPopupFormVista div.time-view-Vista table.timesHeader	Styles the header of a drop-down calendar in a form.
.WebPlannerPopupFormVista div.time-view-Vista table.times	Styles the contents of a drop-down calendar in a form.
.WebPlannerPopupFormVista div.time-view-Vista div.todayButton	Styles the 'today' button of a drop-down calendar in a form.
.WebPlannerPopupFormVista div.time-view-Vista td.button	Styles navigation buttons of a drop-down calendar in a form.
.WebPlannerPopupFormVista div.time-view-Vista table.times td.today	Styles the current day in a drop-down calendar in a form.
.WebPlannerPopupFormVista div.time-view-Vista table.times td.selected	Styles selected current day in drop-down calendar in a form.

Styling overlays

The following table lists the names of the predefined CSS classes, used to style the calendar's overlay elements:

Css class name	Description
.Vista .WebPlannerLoader	Styles the div overlay applied over the calendar before rendering on the client side is complete.
.WebPlannerDisabled	Styles the div overlay applied over the calendar when its Enabled property is set to false.