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

select

The default event to catch date changes.

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

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

$('.calendar').pignoseCalendar({ click: 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]);
}

});

apply

Options