Creating a Custom VisualStyle for C1Calendar

Styling a control to match your website or app may seem overwhelming at first, but if you start with a base style, it's pretty easy. ArcticFox is our most flexible theme and gives you a good head start on the theming process.

For this walkthrough let's use C1Calendar with ArcticFox VisualStyle and give it a more modern look. The best way to set up the structure for this is to create a new folder with the name of your custom style. Let's call the folder 'Azure,' and copy the C1Calendar folder from within the ArcticFox VisualStyle and place it in the new Azure folder. In order for this new style to work, we have to rename all the selectors in the CSS file from 'ArcticFox' to 'Azure,' using a simple find and replace.

Now to set up the C1Calendar control on the page, here is the CSS we'll use:

<cc1:C1Calendar ID="C1Calendar1" runat="server" Height="170px" Width="200px"

WeekDayFormat="FirstTwoLetters"

ShowWeekNumbers="false"

UseEmbeddedVisualStyles="false"

VisualStylePath="~/VisualStyles"

VisualStyle="Azure" NavigationButton="Normal">

</cc1:C1Calendar>

When we view the project, we'll have a C1Calendar styled like ArcticFox, but using the Azure VisualStyle. We want the Azure style to be very flexible and able to change the background colors and still have a glass or gradient effect overtop using a transparent PNG. There are three elements that use a repeating graphic in C1Calender; they are the navigation bar where it displays arrows and the month name, the selected day, and the day hover.

First, we'll style the navigation area. Once this is styled, we can copy the properties and use it for the selected day and day hover, but change the background color. Here is how we'll style it:

.C1Calendar_Azure .C1NavTable

{

width:100%;

height:100%;

text-align:center;

color:#fff;

font-weight: bold;

background: #1b5790 url(Images/overlay.png) repeat-x top;

border: solid 1px #038DBE;

text-transform: uppercase;

margin-bottom: 5px;

}

The overlay image here is just a white gradient that fades to transparent, this will give a glass or gradient look to the background color that can be set to anything, the result will look like this:

To style the selected day and day hover, use the same code in the NavTable and swap out the background color. The CSS will look like this:

.C1Calendar_Azure .C1MonthView .Today,

.C1Calendar_Azure .C1MonthView .SelectedDay

{

background: #7aa13d url(Images/overlay.png) repeat-x top;

color: #182D0A;

}

.C1Calendar_Azure .C1MonthView .DayHover

{

background: #b2d281 url(Images/overlay.png) repeat-x top;

color: #182D0A;

}

The result:

This is a pretty simple change and these colors could be changed to anything and still retain the look.

All that's left is to change the arrow graphic. The arrow images are all contained in one file called 'calendar.png'. All that really needs to be done to make this theme work is to change the color of all the arrows to white. Let's use a subtle light blue to white to make it look a little fancier. Here's what it looks like at this stage:

There are a few more extra tweaks we can do to finish off the modern look of this. Let's use some CSS3 declarations such as border-radius and text-shadow (note that these are only supported across the modern browsers, except IE8 support which is coming soon). We can also easily add rounding and shadows without having to add extra images. You can learn more about CSS3 here.

After completing these extra tweaks, here is what we'll end up with:

Hopefully this gives you some motivation to create your own custom VisualStyles. The overlay graphic with a background color can be used in every control to achieve the same effect because it scales infinitely. You could just keep copying and pasting the same line of CSS and end up with your whole site or app with a custom style in no time.

The 'Azure' VisualStyle: Azure.zip