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, blue
	});
});

Blue theme support

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

Schedule Calendar

<div class="calendar"></div>
$('.calendar').pignoseCalendar({
	scheduleOptions: {
		colors: {
		    offer: '#2fabb7',
			ad: '#5c6270'
		}
	},
	schedules: [{
		name: 'offer',
	    date: '2017-02-08'
	}, {
		name: 'ad',
	    date: '2017-02-08'
	}, {
		name: 'offer',
	    date: '2017-02-05',
	}],
	select: function(date, obj) {
		console.log('events for this date', obj.storage.events);
	}
});

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'
	});
});
Spanish
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, blue). 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()
week number Your first day of week (0: Sunday ~ 6: Saturday). 0
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'. []
schedules array 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. []
scheduleOptions colors object Set a dictionary with class 'key' and color code 'value' used for pin events class by date. {}
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