JQuery Full Calender

Introduction

JQuery date picker is very familiar and popular I want to show u how to display a year calendar along with 12 months using this date picker plugin.

Script required

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">
</script>

Html Code

<div id='calendar'>
</div>

JavaScript code

<script type='text/javascript'>
    $(document).ready(function()
        {

        $("#calendar").datepicker
        ({
            defaultDate: '01/01/' + new Date().getFullYear(),
            minDate: '01/01/' + new Date().getFullYear(),
            maxDate: '12/31/' + (new Date().getFullYear() + 1),
            numberOfMonths: [3, 4],
        });
    });
</script>

Output

Events we can work on,

<script type='text/javascript'>
    $(document).ready(function()
         {

        $("#calendar").datepicker
        ({
            beforeShowDay: function highlightDays(date) { // highlight date

                // u r logic

            },
            onSelect: function(dateText, inst) { // selected date event

                // u r logic

            },
            defaultDate: '01/01/' + new Date().getFullYear(),
            minDate: '01/01/' + new Date().getFullYear(),
            maxDate: '12/31/' + (new Date().getFullYear() + 1),
            numberOfMonths: [3, 4],
        });
    });
</script>