PIGNOSE Calendar

View project on Github Download zip

Latest version

Calendar

PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin.

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

Input type

You can use calendar by input power ups.

<input type="text" id="text-calendar" class="calendar" />
$(function() {
    $('input.calendar').pignoseCalendar({
		format: 'YYYY-MM-DD' // date format string. (2017-02-02)
	});
});

Modal

You can display calendar by modal popup.

Open Modal 
<a href="#" class="calendar"></a>
$(function() {
    $('a.calendar').pignoseCalendar({
		format: 'YYYY-MM-DD' // date format string. (2017-02-02)
	});
});

Dark theme support

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

<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		theme: 'dark' // light, dark
	});
});

Multiple range Calendar

PIGNOSE Calendar supports multiple range picker.

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

Toggle Calendar

You can toggle date and get those dates as array.

<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		toggle: true,
		select: function(dates, obj) {
			console.log('toggle active dates', obj.storage.activeDates);
		}
	});
});

Disabled Dates Calendar

You can turn off the specific dates.

You turned off dates below [random]
<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		disabledDates: [
			'2017-01-01',
			'2017-06-01',
			'2017-06-02'
		]
	});
});

Disabled Weekdays Calendar

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

<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		disabledWeekdays: [0, 6] // SUN (0), SAT (6)
	});
});

Disabled Range Calendar

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

<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		minDate: '2017-04-01',
		maxDate: '2017-06-24'
	});
});

Disabled Multiple Ranges Calendar

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

<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		disabledRanges: [
			['2016-10-05', '2016-10-21'],
			['2016-11-01', '2016-11-07'],
			['2016-11-19', '2016-11-21'],
			['2016-12-05', '2016-12-08'],
			['2016-12-17', '2016-12-18'],
			['2016-12-29', '2016-12-30'],
			['2017-01-10', '2017-01-20'],
			['2017-02-10', '2017-04-11'],
			['2017-07-04', '2017-07-09'],
			['2017-12-01', '2017-12-25'],
			['2018-02-10', '2018-02-26'],
			['2018-05-10', '2018-09-17'],
		]
	});
});

Multiple Weeks Calendar

Advanced - You can turn on/off weeks date range by clicking.

<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
			pickWeeks: true,
			multiple: true,
	});
});

I18N Support

PIGNOSE Calendar supports various languages.

Korean
<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		lang: 'ko'
	});
});
Deutsch
<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		lang: 'de'
	});
});
Chinese
<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		lang: 'ch'
	});
});
Português
<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		lang: 'pt'
	});
});
Danish
<div class="calendar"></div>
$(function() {
    $('.calendar').pignoseCalendar({
		lang: 'da'
	});
});
Supported languages
en ko fr ch
de jp pt da
pl es

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
pickWeeks boolean If you set true this option, You can use multiple range picker by one click 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