Beautiful Multifunctional Calendar Plugin For jQuery - PIGNOSE Calender

File Size: 424 KB
Views Total: 58591
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Beautiful Multifunctional Calendar Plugin For jQuery - PIGNOSE Calender

PIGNOSE Calender is a jQuery plugin used for creating a beautiful, responsive, mobile-friendly calendar on the webpage that supports date (and date range) selection and various languages.


$ npm install pg-calendar

# Bower
$ bower install pg-calendar

Basic usage:

1. The plugin requires jQuery library and moment.js loaded in the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Add the PIGNOSE Calender's stylesheet and JavaScript files to the webpage.

<link rel="stylesheet" href="pignose.calender.css">
<script src="pignose.calender.js"></script>

3. Create a placeholder element for the calendar.

<div class="calender"></div>

4. Generate a default calendar inside the DIV container.


5. Default plugin settings.


  // en, ko, fr, ch, de, jp, pt, fr
  lang: 'en',

  // You can change auto initialized date at first.
  date: moment(),

  // light, dark
  theme: 'light',

  // date format
  format: 'YYYY-MM-DD',

  // 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: 0,

  // 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,

  // shows buttons
  buttons: false,

  // reverse mode
  reverse: false,
  // display calendar as modal
  modal: false,

  // add button controller for confirm by user
  buttons: false,

  // minimum disable date range by 'YYYY-MM-DD' formatted string
  minDate: null,

  // maximum disable date range by 'YYYY-MM-DD' formatted string
  maxDate: null,

  // called when you select a date on calendar (date click).
  select: functon (){},

  // If you set true this option, You can pass the check of disabled dates when multiple mode enabled.
  selectOver: false,

  // called when you apply a date on calendar. (OK button click).
  apply: functon (){},

  // called when you apply a date on calendar. (OK button click).
  click: null




  • v1.4.31: updated


  • v1.4.30:  feature update


  • v1.4.29:  feature update


  • v1.4.28:  Support ES6 with babel


  • v1.4.27: update locale uk, ru of controls


  • v1.4.26: update translation / add david badge


  • v1.4.23: solve configure issue


  • v1.4.22: fix set method's module bugs


  • v1.4.21: Added prev, next, page, init events


  • v1.4.19: Less is supported.


  • v1.4.17: Fixed click callback bugs.


  • v1.4.16: Fix input calendar bug when buttons option is .


  • v1.4.14: Update setting feature.


  • Storage key rename.
  • AMD, CommonJS module are supported.


  • Theme bugs are fixed.


  • Change wrong wordings 


  • Toggle initialize a date issue are fixed.


  • Update new features (weeks clicking, French language fixs).


  • Setting range and new language.


  • Disable option priority is changed.
  • Delete useless files.


  • Initialized date option are added.


  • Disabled multiple ranges feature and detail sub-classes added, Multiple input type single date format are changed.


  • Performance for rendering is optimized for lower version browsers.


  • Added Disabled date range.


  • enabledDates are added and today click bug are fixed.


  • Reverse toggle type be added.


  • ActiveDates bugs fixed.
  • Modal view type support.

This awesome jQuery plugin is developed by KennethanCeyer. For more Advanced Usages, please check the demo page or visit the official website.