Skip to content

Documentation

Jump to bottom
PIGNOSE edited this page Aug 19, 2017 · 30 revisions

Use Case

Default

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

$('.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 :trollface:

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

date

week

initialized

modal

buttons

toggle

reversed

multiple

pickWeeks

selectOver

disabledDates

disabledWeekdays

disabledRanges

schedules

scheduleOptions

minDate

maxDate

Clone this wiki locally