Beautiful Multifunctional Calendar Plugin For jQuery - PIGNOSE Calender
File Size: | 424 KB |
---|---|
Views Total: | 58310 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.