Documentation

Use Case

Default

You can use calendar plugin to insert single line, Easy .

$('.calendar').pignoseCalendar();

Set initial date.

You can set initial date to giving date option.

// This calendar is starting date to '2017-09-01'.
$('.calendar').pignoseCalendar({
    date: moment('2017-09-01')
});

Events

init

This event will be called when plugin is initialized.

$('.calendar').pignoseCalendar({
    init: function(context) {
        /**
         * @params context PignoseCalendarContext
         * @returns void
         */

         // This is chaining Element, It is exactly same as the each elements of $('.calendar').
         var $this = $(this);

         // You can get target element in `context` variable.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;
    }
});

select

The default event to catch date changes.

$('.calendar').pignoseCalendar({
    select: function(date, context) {
        /**
         * @params this Element
         * @params date moment[]
         * @params context PignoseCalendarContext
         * @returns void
         */

         // This is selected button Element.
         var $this = $(this);

         // You can get target element in `context` variable, This element is same `$(this)`.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;

         // Selected dates (start date, end date) is passed at first parameter, And this parameters are moment type.
         // If you unselected date, It will be `null`.
         console.log(date[0], date[1]);
    }
});

click

click event has difference when compare with select,

click catch only clicking some date button.

select catch date changes event and pass the selected dates.

$('.calendar').pignoseCalendar({
    click: function(event, context) { 
        /**
         * @params this Element
         * @params event MouseEvent
         * @params context PignoseCalendarContext
         * @returns void
         */

         // This is clicked button Element.
         var $this = $(this);

         // You can access event parameter.
         event.preventDefault();

         // You can get target element in `context` variable, This element is same `$(this)`.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;
    }
});

apply

apply event only working to modal type datepicker.

modal type means, When your calendar target element is <input /> or If you give modal: true option, It will be modal type.

$('.calendar').pignoseCalendar({
    apply: function(date, context) {
        /**
         * @params this Element
         * @params date moment[]
         * @params context PignoseCalendarContext
         * @returns void
         */

         // this is calendar element, It is exactly the same as `context.calendar`.
         var $this = $(this);

         // You can get target element in `context` variable.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;

         // Selected dates (start date, end date) is passed at first parameter, And this parameters are moment type.
         // If you unselected date, It will be `null`.
         console.log(date[0], date[1]);
    }
});

page

This event will be called when you click arrow button on the top of calendar.

$('.calendar').pignoseCalendar({
    page: function(info, context) {
        /**
         * @params context PignoseCalendarPageInfo
         * @params context PignoseCalendarContext
         * @returns void
         */

         // This is clicked arrow button element.
         var $this = $(this);

         // `info` parameter gives useful information of current date.
         var type = info.type; // it will be one of `next`, `prev`, `unkown`.
         var year = info.year; // current year (number type), ex: 2017
         var month = info.month; // current month (number type), ex: 6
         var day = info.day; // current day (number type), ex: 22

         // You can get target element in `context` variable.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;
    }
});

$('.calendar').pignoseCalendar({
    prev: function(info, context) {
        /**
         * @params context PignoseCalendarPageInfo
         * @params context PignoseCalendarContext
         * @returns void
         */

         // This is clicked arrow button element.
         var $this = $(this);

         // `info` parameter gives useful information of current date.
         var type = info.type; // it will be `prev`.
         var year = info.year; // current year (number type), ex: 2017
         var month = info.month; // current month (number type), ex: 6
         var day = info.day; // current day (number type), ex: 22

         // You can get target element in `context` variable.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;
    }
});

$('.calendar').pignoseCalendar({
    next: function(info, context) {
        /**
         * @params context PignoseCalendarPageInfo
         * @params context PignoseCalendarContext
         * @returns void
         */

         // This is clicked arrow button element.
         var $this = $(this);

         // `info` parameter gives useful information of current date.
         var type = info.type; // it will be `next`.
         var year = info.year; // current year (number type), ex: 2017
         var month = info.month; // current month (number type), ex: 6
         var day = info.day; // current day (number type), ex: 22

         // You can get target element in `context` variable.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;
    }
});

Methods

init

Initialize and Create calendar view.

$('.calendar').pignoseCalendar('init', {
    // options.
});

Yes it is meaningless

Use syntax sugar, It is exactly the same as above feature.

$('.calendar').pignoseCalendar({
    // options.
});

set

Set a specific date dynamically.

// You can give first parameter to `date-like string` type.
$('.calendar').pignoseCalendar('set', '2017-09-01');

// Also you can give first parameter to `moment` type.
$('.calendar').pignoseCalendar('set', moment('2017-09-01'));

// And also you can give first parameter to `number` type.
// It means set a day of current month.
$('.calendar').pignoseCalendar('set', 24);

select (deprecated at v1.4.22)

Set a specific day by using number dynamically. This method is deprecated. Use set method.

// You can give first parameter to `number` type.
// Below code describes how you set 24 day.
$('.calendar').pignoseCalendar('select', 24);

setting

Set the global options dynamically.

$('.calendar').pignoseCalendar('settings', {
    // default language.
    language: 'en',

    // additional custom languages.
    languages: {
        // Check schema of this value at below link.
        // link: https://github.com/KennethanCeyer/pg-calendar/wiki/Language#basic-best-practice
    },

    // default first week (0-6), 0 means sunday.
    week: 1,

    // default date format, it follow moment format rule.
    format: 'YYYY-MM-DD'
});

configure

Set the options dynamically.

$('.calendar').pignoseCalendar('configure', {
    // options.
});

Options

lang

The language to print on the each of calendars.

type: string
default: en
example:

$('.calendar').pignoseCalendar({
    lang: 'ko'
});

theme

The theme of calendar.

type: string
default: light
allowed: light, dark, blue
example:

$('.calendar').pignoseCalendar({
    theme: 'dark'
});

format

The date format string followed moment date format rule.

type: string
default: YYYY-MM-DD
example:

$('.calendar').pignoseCalendar({
    format: 'MM/DD YYYY'
});

date

The date to display when calendar is initialized.

type: string, moment
default: {today}
example:

// date-like string
$('.calendar').pignoseCalendar({
    date: '2017-06-12'
});

// moment
$('.calendar').pignoseCalendar({
    date: moment('2017-06-12')
});

week

First day of week, Start from 0(sunday) to 6(Saturday)

type: number
default: 0
allowed: 0 ~ 6
example:

$('.calendar').pignoseCalendar({
    week: 2 //Tuesday
});

initialize

If this option is false, Calendar doesn't display active date at first time. (*Additional: If this option is true, initial date will be set by date option, otherwise you can set the default initial date by this option)

type: boolean
default: true
example:

$('.calendar').pignoseCalendar({
    initialize: false // Active date (today or `date` option you gave) isn't displayed at first time.
});

modal

Display calendar to modal popup type.

type: boolean
default: false
example: $('.calendar').pignoseCalendar({ modal: true });

buttons

Display buttons (OK, Cancel) at the bottom of modal, It will be worked when modal type is turned on.

type: boolean
default: false
condition: calendar target is <input> or modal type.
example:

$('.calendar').pignoseCalendar({
    modal: true
});

toggle

If this option is true, Calendar date button will be worked toggle-mode.

type: boolean
default: false
example:

$('.calendar').pignoseCalendar({
    toggle: true
});

reversed

Toggle button's state (active, inactive) will be reversed.

type: boolean
default: false
condition: toggle option must be true
example:

$('.calendar').pignoseCalendar({
    reversed: true
});

multiple

If this option is true, You can set the date range.

type: boolean
default: false
condition: toggle option must be false
example:

$('.calendar').pignoseCalendar({
    multiple: true
});

pickWeeks

If this option is true, You can select the week by single click.

type: boolean
default: false
condition: multiple option must be true
example:

$('.calendar').pignoseCalendar({
    pickWeeks: true
});

selectOver

If this option is true, You can select date range over disable dates.

type: boolean
default: false
condition: multiple option must be true
example:

$('.calendar').pignoseCalendar({
    selectOver: true
});

disabledDates

You can set disabled dates to array type.

type: string[], moment[]
default: null
example:

// date-like strings.
$('.calendar').pignoseCalendar({
    disabledDates: [
        '2017-08-01',
        '2017-08-04',
        '2017-08-12',
    ]
});

// moment array.
$('.calendar').pignoseCalendar({
    disabledDates: [
        moment('2017-08-01'),
        moment('2017-08-04'),
        moment('2017-08-12'),
    ]
});

disabledWeekdays

You can set disabled week days to array type.

type: number
default: null
example:

// disable Monday, Tuesday.
$('.calendar').pignoseCalendar({
    disabledWeekdays: [
        1, // Monday
        2, // Tuesday
    ]
});

disabledRanges

You can set disabled date ranges to two dimension array type.

type: string[][], moment[][]
default: null
example:

// date-like strings.
$('.calendar').pignoseCalendar({
    disabledRanges: [
        ['2017-08-01', '2017-08-14'], // 2017-08-01 ~ 14
        ['2017-10-08', '2017-11-01'], // 2017-10-08 ~ 11-01
        ['2017-12-01', '2017-12-06'], // 2017-12-01 ~ 06
    ]
});

// moment array.
$('.calendar').pignoseCalendar({
    disabledDates: [
        [moment('2017-08-01'), moment('2017-08-14')], // 2017-08-01 ~ 14
        [moment('2017-10-08'), moment('2017-11-01')], // 2017-10-08 ~ 11-01
        [moment('2017-12-01'), moment('2017-12-06')], // 2017-12-01 ~ 06
    ]
});

schedules

You can register new schedule on calendar.

type: date-like string, moment
default: null
example:

// date-like string.
$('.calendar').pignoseCalendar({
    schedules: [{
        name: 'holiday',
        date: '2017-08-08'
    }, {
        name: 'meetup',
        date: '2017-09-16'
    },
});

// moment.
$('.calendar').pignoseCalendar({
    schedules: [{
        name: 'holiday',
        date: moment('2017-08-08')
    }, {
        name: 'meetup',
        date: moment('2017-09-16')
    },
});

scheduleOptions

You can give specific schedule information.

type: PignoseCalendarScheduleOption
default: null
example:

$('.calendar').pignoseCalendar({
{
    scheduleOptions: {
        colors: {
            holiday: '#2fabb7',
            seminar: '#5c6270',
            meetup: '#ef8080',
        }
    }
});

minDate

You can set the limit by minimum date.

type: date-like string, moment
default: null
example:

// date-like string.
$('.calendar').pignoseCalendar({
    minDate: '2017-06-01'
});

// moment.
$('.calendar').pignoseCalendar({
    minDate: moment('2017-06-01')
});

maxDate

You can set the limit by maximum date.

type: date-like string, moment
default: null
example:

// date-like string.
$('.calendar').pignoseCalendar({
    maxDate: '2019-02-04'
});

// moment.
$('.calendar').pignoseCalendar({
    maxDate: moment('2019-02-04')
});

Documentation

Use Case

Default

Set initial date.

Events

init

select

click

apply

page

prev

next

Methods

init

set

select (deprecated at v1.4.22)

setting

configure

Options

lang

theme

format

date

week

initialize

modal

buttons

toggle

reversed

multiple

pickWeeks

selectOver

disabledDates

disabledWeekdays

disabledRanges

schedules

scheduleOptions

minDate

maxDate

Clone this wiki locally