PIGNOSE Calendar

📅 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, context) {
		console.log('events for this date', context.storage.schedules);
	}
});

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, context) {
			console.log('toggle active dates', context.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 fa it

cs uk ru

📐 Dependency

This plugin has dependencies some javascript library.

jquery

moment

or you can use full built-in script

<script type="javascript" src="dist/js/pignose.calendar.full.min.js"></script>

⚡ 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	You can change auto initialized date at first	`moment()`
`week`	number	Your first day of week (0: Sunday ~ 6: Saturday)	`0`
`initialize`	boolean	You can turn on/off initialized date or set the initial 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`
`selectOver`	boolean	If you set true this option, You can pass the check of disabled dates when multiple mode enabled	`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`

⚡ Callbacks

name	type	description
`init(context)`	function	This callback will be called once when you call the pignoseCalendar plugin and created calendar view
`page(info, context)`	function	This callback will be called when you click prev, next arrow button on the top of calendar
`prev(info, context)`	function	This callback will be called when you click prev arrow button on the top of calendar
`next(info, context)`	function	This callback will be called when you click next arrow button on the top of calendar
`select(date, context)`	function	This callback will be called when you select a date of calendar except disabled date (date click)
`click(event, context)`	function	This callback will be called when you click a date of calendar (date click)
`apply(date, context)`	function	This callback will be called when you apply a date of calendar. (OK button click)

⚡ Methods

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

name	type	description
`set(date)`	function	You can set the specific date on calendar dynamically. The first parameter must `string` or `moment` type.
`select(day)`	function	You can click day by using this method, First argument must be `number` type.
`setting(object)`	function	You can set the setting option dynamically, The option is the same you gave when initialize the plugin
`configure(object)`	function	You can set the global setting by using this method, If you set default language entirely, Use this method
`init()`	function	This method is used internal of the plugin. Use the syntax sugar `$element.pignoseCalendar()` pattern It is exactly the same one as above pattern

😗 do star it!

If you enjoyed it, please just click the star into below github link

GitHub

📦 npm

$ npm install pg-calendar

📦 yarn

$ yarn add pg-calendar