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

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

page

prev

next

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: {link}
    },

    // 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

theme

format

date

week

initialized

modal

buttons

toggle

reversed

multiple

pickWeeks

selectOver

disabledDates

disabledWeekdays

disabledRanges

schedules

scheduleOptions

minDate

maxDate