Month: CSS Class Styling

dpm-css600x262.png

It is possible to set selected style properties using CSS class rather than by control properties: 

Usage

Prefix

The prefix defined in CssClassPrefix property is always added to the beginning of the class name. Example:

CssClassPrefix="month_silver_"

Class names:

  • month_silver_event
  • month_silver_header
  • ...

Class names

The following class names are prefixed with a name defined in CssClassPrefix property.

  • event (event box)
  • header (day of week header cell)
  • cell (time cell)
  • cellheader (time cell header)

The day cells can have one of the following classes in addition to "cell":

  • previous (days that belong to the previous month)
  • next (days that belong to the next month)

You can also add a custom CSS class to the day cells using BeforeCellRender event handler:

    protected void DayPilotMonth1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeCellRenderEventArgs e)
    {
        e.CssClass = Week.WeekNrISO8601(e.Start)%2 == 0 ? "even_cell_row" : "odd_cell_row";
    }

Default values

The built-in DayPilot Month appearance properties override the CSS styles (they are specified using style attribute). You need to unset the default values in order to enable the CSS classes to prevail:

HeaderFontFamily=""
EventFontFamily=""
...

Declaration example:

Style:

<style type="text/css">
/* Month silver theme */
.month_silver_header 
{
 background-image: url(Media/month_silver_top20.gif);
 background-repeat: repeat-x;
 background-color: #CFCFCF;
}
.month_silver_event 
{
 background-image: url(Media/month_silver_event20.gif);
 background-repeat: repeat-x;
 background-color: #CFCFCF;
}
</style>

DayPilot Month:

<DayPilot:DayPilotMonth ID="DayPilotMonth1" runat="server" 
                    ...
                    CssClassPrefix="month_silver_"
                    >

DayPilot for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java