Buy now!

NinjaCalendar

The NinjaCalendar plugin creates a small popup calendar when an input is clicked.

References

Add those references into your website:

And the plugin files:

Call ninjaCalendar method to initialize the plugin:

                        $(document).ready(function(){
                            $(".myCalendar").ninjaCalendar({options});
                        });

Options

                            .ninjaCalendar({
                                days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                                months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                                daysAbbreviated: true,      //-- how it will display the name of the day: Sunday or Sun.
                                monthsAbbreviated: false,   //-- how it will display the name of the month: January or Jan.
    
                                firstDay: 0,                //-- the index of the day that will be used as first date. Ex: Sunday.
                                weekendDays: [0, 6],        //-- array with the index of the days considered as weekends. Ex: Sunday and Saturday
                                dateFormat: 'Y-m-d',        //-- how the date will be presented when selected
                                type: ['y', 'm', 'd'],      //-- the view types y: year selection, m: month selection, d: days selection
                                startType: 'd',             //-- what is the default view type when calendar is opened
                                lblClearButton: 'Clear',    //-- set the label for clear button
                                lblTodayButton: 'Today',    //-- set the label for today button
                                showClearButton: true,      //-- set if the clear button will be displayed
                                showTodayButton: true,      //-- set if the today button will be displayed
                                showIcon: false,            //-- set if a small calendar icon will be displayed inside the input field
                                onSelect: null              //-- set a function to be fired when the a date is selected
                            });

Methods

Name

Description

Sample

ninjaCalendar({options})

Initialize the plugin to the specified selector.

$(".myCalendar").ninjaCalendar()