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.

Installation:

# NPM
$ 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.

$('.calender').pignoseCalender();

5. Default plugin settings.

$('.calender').pignoseCalender({

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

});

Changelog:

2019-07-11

• v1.4.31: updated

2018-07-30

• v1.4.30:  feature update

2018-04-02

• v1.4.29:  feature update

2018-03-23

• v1.4.28:  Support ES6 with babel

2017-11-28

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

2017-11-27

• v1.4.26: update translation / add david badge

2017-09-07

• v1.4.23: solve configure issue

2017-09-04

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

2017-08-20

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

2017-06-12

• v1.4.19: Less is supported.

2017-05-07

• v1.4.17: Fixed click callback bugs.

2017-04-24

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

2017-04-20

• v1.4.14: Update setting feature.

2017-03-03

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

2017-03-02

• Theme bugs are fixed.

2017-02-03

• Change wrong wordings 

2017-01-17

• Toggle initialize a date issue are fixed.

2016-11-30

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

2016-11-25

• Setting range and new language.

2016-11-15

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

2016-11-10

• Initialized date option are added.

2016-11-08

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

2016-11-05

• Performance for rendering is optimized for lower version browsers.

2016-11-04

• Added Disabled date range.

2016-10-22

• enabledDates are added and today click bug are fixed.

2016-10-21

• Reverse toggle type be added.

2016-10-09

• 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.