Documentation

Use Case

Default

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

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

Set initialize date.

You can set initialize 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;
    }
});

prev

This event will be called when you click previous arrow button on the top of 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;
    }
});

next

This event will be called when you click next arrow button on the top of 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
});

initialized

If this option is false, Calendar doesn't display active date at first time.

• type: boolean
• default: true
• example:

$('.calendar').pignoseCalendar({
    initialized: 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

disabledWeekdays

disabledRanges

schedules

scheduleOptions

minDate

maxDate