Implementing PIGNOSE Calendar in your webpage

PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin. It is easy to setup too. Lets see how it s done step by step.

You can download it from here.
https://github.com/KennethanCeyer/pg-calendar

The calendar looks like below when it is implemented.

Lets see how it is done.

1. Add a textbox to work as the date controller

 <input class="datePicker" type="text" id="dateFrom" name="dateFrom" readonly="readonly" placeholder="Date : du" data-input-style="box" data-label-style="stacked" value="">  

You can see that the class of the input is datePicker

2. In your JS file, write the following.

   $('.datePicker').each(function () {  
     $(this).on('focus', function () {  
       //console.log($(this).pignoseCalendar().settings)  
       $(this).pignoseCalendar({  
         // en, ko, fr, ch, de, jp, pt, fr  
         lang: 'fr',  
         // You can change auto initialized date at first.  
         date: moment(),  
         // light, dark  
         theme: 'light',  
         // date format  
         format: 'DD/MM/YYYY',  
         // CSS class array  
         classOnDays: [],  
         // array of enabled dates  
         enabledDates: [],  
         // disabled dates  
         disabledDates: [],  
         // You can disable by using a weekday number array (This is a sequential number start from 0 [sunday]).  
         disabledWeekdays: [],  
         // This option is advanced way to using disable settings, You can give multiple disabled range by double array date string by formatted to 'YYYY-MM-DD'.  
         disabledRanges: [],  
         // Set and array of events to pin on calendar.   
         // Each event is an object that must contain a date string formatted to 'YYYY-MM-DD' and class key that belong to classOnEvents dictionary indicating its color on calendar.   
         // Events with not color class suitable are all pin with #5c6270.   
         // Issues may arise when the number of color class increase, this could break the calendar cell.  
         schedules: [],  
         // Set a dictionary with class 'key' and color code 'value' used for pin events class by date.  
         scheduleOptions: {  
           colors: {}  
         },  
         // Your first day of week (0: Sunday ~ 6: Saturday).  
         week: 1,  
         // If you set true this option, You can use multiple range picker by one click on your Calendar.  
         pickWeeks: false,  
         // You can turn on/off initialized date by this option.  
         initialize: true,  
         // enable multiple date selection  
         multiple: false,  
         // use toggle in the calendar  
         toggle: false,  
         // reverse mode  
         reverse: false,  
         // display calendar as modal  
         modal: false,  
         // add button controller for confirm by user  
         buttons: true,  
         // minimum disable date range by 'YYYY-MM-DD' formatted string  
         minDate: moment().subtract(10, 'years').endOf('year'),  
         // maximum disable date range by 'YYYY-MM-DD' formatted string  
         maxDate: moment(),  
         // called when you select a date on calendar (date click).  
         select: disabledValidation,  
         // If you set true this option, You can pass the check of disabled dates when multiple mode enabled.  
         selectOver: true,  
         // called when you apply a date on calendar. (OK button click).  
         apply: disabledValidation,  
         // called when you apply a date on calendar. (OK button click).  
         click: disabledValidation  
       });  
     });  
   });  

Note that, if you have a calendar icon, add a css class and have the same as above. then both textbox and calendar will work with the control.

Finally make sure you have added all the necessary files in SRC folder and linked the JQuery as it is required to the page.

The result will be as below. (The language is set as French and you can easily change it to any language that it supports. )

Hope this calenar will give your website a nice look and feel.

Happy coding..