C1Calendar supports customizing the display of each date cells on the client. The date cell customization is achieved by implementing the client side call back function specified by the OnClientCustomizeDate property.
The arguments of the call back function are the following:
- daycell—jQuery object that represents table cell of the date to be customized.
- date—Date of the cell.
- dayType—Type of the day.
- Hover—Whether mouse is over the day cell.
- Preview—Whether rendering in preview container.
To create a custom date implement the client side call back function specified by the OnClientCustomizeDate property like the following:
To write code in Source View
<script type="text/javascript">
function customizeDate($daycell, date, dayType, hover, preview) {
if (date.getMonth() === 11 && date.getDate() === 25) {
var $img = $('<div></div>').width(16).height(16).css('background-image', 'url(images/xmas.png)');
$daycell.attr('align', 'right').empty().append($img);
if ($daycell.hasClass('ui-datepicker-current-day')) {
$daycell.css('background-color', '#aaa');
} else
$daycell.css('background-color', hover ? 'lightgray' : '');
return true;
}
return false;
}
</script>
<cc1:C1Calendar ID="C1Calendar1" runat="server" DisplayDate="2011-12-01"
onclientcustomizedate="customizeDate">
</cc1:C1Calendar>
This topic illustrates the following:
A custom image is specified for the custom date.
