Post
Ask Question

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
  1. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  2. <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  3. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">  
  4. </script>  
Html Code
  1. <div id='calendar'>  
  2. </div>  
JavaScript code
  1. <script type='text/javascript'>  
  2.     $(document).ready(function()  
  3.         {  
  4.   
  5.         $("#calendar").datepicker  
  6.         ({  
  7.             defaultDate: '01/01/' + new Date().getFullYear(),  
  8.             minDate: '01/01/' + new Date().getFullYear(),  
  9.             maxDate: '12/31/' + (new Date().getFullYear() + 1),  
  10.             numberOfMonths: [3, 4],  
  11.         });  
  12.     });  
  13. </script>  
Output

output
Events we can work on,
  1. <script type='text/javascript'>  
  2.     $(document).ready(function()   
  3.          {  
  4.   
  5.         $("#calendar").datepicker  
  6.         ({  
  7.             beforeShowDay: function highlightDays(date) { // highlight date  
  8.   
  9.                 // u r logic  
  10.   
  11.             },  
  12.             onSelect: function(dateText, inst) { // selected date event  
  13.   
  14.                 // u r logic  
  15.   
  16.             },  
  17.             defaultDate: '01/01/' + new Date().getFullYear(),  
  18.             minDate: '01/01/' + new Date().getFullYear(),  
  19.             maxDate: '12/31/' + (new Date().getFullYear() + 1),  
  20.             numberOfMonths: [3, 4],  
  21.         });  
  22.     });  
  23. </script>  
Next Recommended Reading How To Export HTML Table To Excel, PDF, CSV Using jQuery DataTable