Building on the Quick Start example, you can add gridMajor and gridMinor objects, which contain styles for the axis grid lines.
- In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:
- Sets the displayDate option.
- Sets the customizeDate function.
Drop down and copy code
| Customize Date Script |
|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#calendar1").wijcalendar({
displayDate: new Date('2013/12/1'),
customizeDate: function ($daycell, date, dayType, hover, preview)
{
var $img;
if (date.getMonth() === 11 && date.getDate() === 24)
{
$img = $('<div></div>').width(16).height(16).css
('background-image', 'url(http://cdn.wijmo.com/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>
|
- No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the calendar.
- Save your HTML file and open it in a browser. The calendar appears like the one in the image below, with an image in the custom date.
See Also
Widgets
Reference
