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

I18N Support

PIGNOSE Calendar supports various languages.

Korean
Deutsch
Chinese
Supported languages
en ko fr ch de jp

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
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
disabledDates array You can disable dates by using a date array formatted like 'YYYY-MM-DD' strings. []
disabledWeekdays array You can disable by using a weekday number array (This is a sequential number start from 0 [sunday]). []
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.hypermodel('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'
	});
});