Create a Custom Date

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.

Customize Date Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar({ displayDate: new Date('2014/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>

Customize Date Script

Copy Code

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
    $("#calendar1").wijcalendar({
        displayDate: new Date('2014/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.

Widgets

Quick Start

Reference

wijcalendar API

displayDate Option

customizeDate Option