Customizing the ShieldUI Calendar Control

In this blog entry we look in greater detail into how to customize the ShieldUI Calendar widget. The final result is demonstrated in the following example.

The ShieldUI jQuery Calendar control comes with a rich preset of themes. There are a total of 16 preset themes, which cover a range set of visual scenarios. Nevertheless, there may be cases when these are not enough. These may be custom implementation and settings, where different fonts and sizes are required, or a completely custom approach is needed.

Getting started

The first step is setting up the default control. This is done following the steps listed below:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an div or span element for which to initialize the DatePicker functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield Calendar</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<div id="calendar"></div>

<script type="text/javascript">
   jQuery(function ($) {
        $("#calendar").shieldCalendar({
            footer: {
                enabled: false,
            },
            min: new Date("2009/2/23"),
            max: new Date("2039/3/1"),
            value: new Date()
        });
    });
</script>

</body>
</html>

Customizing the CSS

The next step in handling our custom scenario, is customizing the ShieldUI Calendar control to have the necessary background image, font size and hover colors. This is easy to do.
We can set a custom background directly on the div, which hosts the calendar control. This is demonstrated in the snippet below:

.container {
        background-image: url("/Content/img/calendar/Back12.jpg");
        background-repeat: no-repeat;
        background-position: left;
        height: 470px;
}

The next step is to set a transparent background for the calendar, in order to allow maximum visibility for the background image. This is applied directly to the div container, which will host the Calendar widget. The code looks like this:

#calendar {    
        width: 370px;
        margin-left: 27px;
        margin-top: 90px;
        background-color: transparent;
}

What is left to be done is to apply transparent background for some of the major elements of the Calendar, in order to secure proper visibility for the background image. Additionally, we need to set a proper color for the dates text, as well as proper font size and hover effects. This is straightforward to do and is handled by the following classes:

 .sui-calendar .sui-header {
        background-color: transparent;
        color: #6D6D6D;
    }
    .sui-calendar .sui-footer,
    .sui-calendar .sui-week-header th,
    .sui-calendar .sui-date,
    .sui-calendar .sui-month,
    .sui-calendar .sui-year,
    .sui-calendar .sui-years {
        line-height: 37px;
        color: white;
        border-bottom: 3px solid transparent;
    }
    .sui-calendar .sui-calendar-view .sui-focused {
        box-shadow: none;
    }
    .sui-calendar .sui-calendar-view .sui-selected {
        background-color: transparent;
        color: #FF7B00;
        border-bottom: 3px solid #FF7B00;
        font-size: 24px;
    }
    .sui-calendar .sui-hoverable .sui-date:hover,
    .sui-calendar .sui-hoverable .sui-month:hover,
    .sui-calendar .sui-hoverable .sui-year:hover,
    .sui-calendar .sui-hoverable .sui-years:hover {
        background-color: transparent;
        color: #FF7B00;
        border-bottom: 3px solid #FF7B00;
    }
    .sui-calendar {
        border: 0;
        font-family: Lucida Console;
        font-style: italic;
        font-size: 17px;
        font-weight: 700;
        color: white;
    }

This completes our setup and allows a complete makeover for the widget. It involved a major change in the visual appearance and yet included just a few css classes. This approach is in par with the ShieldUI widget architecture, which maintains a fully customizable appearance for all controls across the board.

Tags: 
HTML5, JavaScript