PIGNOSE Calendar

View project on Github Documentation Download

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, 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 ka
ar ca

πŸ“ Dependency

This plugin has dependencies some javascript library.

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