PIGNOSE Calendar

View project on Github Download zip

Latest version

Calendar

PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin.

Input type

You can use calendar by input power ups.

Modal

You can display calendar by modal popup.

Open Modal

Dark theme support

Dark theme type supports, And we have a plan to add other themes.

Multiple range Calendar

PIGNOSE Calendar supports multiple range picker.

Toggle Calendar

You can toggle date and get those dates as array.

Disabled Dates Calendar

You can turn off the specific dates.

You turned off dates below [random]

Disabled Weekdays Calendar

You can disable dates by specific weekday numbers (0 ~ 6, 0 is sunday).

Disabled Range Calendar

You can give disabled range(minimum, maximum) by date string(YYYY-MM-DD).

Disabled Multiple Ranges Calendar

Advanced - You can give multiple disabled date ranges by string(YYYY-MM-DD).

I18N Support

PIGNOSE Calendar supports various languages.

Korean
Deutsch
Chinese
Português
Supported languages
en ko fr ch de jp pt

Dependency

This plugin has dependencies some javascript library.

Check belows and import it.

Options

name type description default
lang string A language to set to the Calendar. en
theme string A theme to set to the Calendar. (light, dark). light
format string The date format that you want to print to input element by value. YYYY-MM-DD
date moment date object You can change auto initialized date at first. moment()
initialized boolean You can turn on/off initialized date by this option. true
modal boolean If you want display calendar as modal, You can use by setting modal option to true. false
buttons boolean If you are using input type calendar, You can add button controller for confirm by user. false
toggle boolean If you set true this option, You can use toggle on your Calendar. false
reverse boolean If you toggle option turned on and this option also set true, Inital calendar dates start as inactive. false
multiple boolean If you set true this option, You can use multiple picker on your Calendar. false
enabledDates array You can set enabled dates by using date string array by formatted to 'YYYY-MM-DD'. []
disabledDates array You can set disabled dates by using date string array by formatted to 'YYYY-MM-DD'. []
disabledWeekdays array You can set disabled date by using a weekday number array (This is a sequential number start from 0 [sunday]). []
disabledRanges array 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'. []
minDate string You can give a minimum disable date range by 'YYYY-MM-DD' formatted string. null
maxDate array You can give a maximum disable date range by 'YYYY-MM-DD' formatted string. null
select function This callback will be called when you select a date on calendar (date click).
apply function This callback will be called when you apply a date on calendar. (OK button click).

Methods

You can use the method like $element.pignoseCalendar('Method Name', arguments); format.

name type description
set function You can set specific date that you want for using on calendar, The argument type must be Options.format type that you gave (default format are YYYY-MM-DD).
select function You can click day by using this method, First argument must be integer type.

bower

If you use bower.

bower install pg-calendar

npm

If you use npm.

npm install pg-calendar

sample


<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		lang: 'en'
	});
});