Skip to content

kaore/CibulCalendar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Overview

CibulCalendar is a date picker that enables users to easily pick dates or date ranges.

Here is the simplest way to get it running:

function onload() { setCibulCalendar('basic'); // will stick to element <input type="text" id="basic"/> }

You can see used here

Features include:

  • Drag and drop range selection
  • Single date selection
  • Multilingual
  • Helper function for single line setup
  • Fully Customizable (see details below)

How to use

The script can be used directly in the browser or using CommonJs or AMD

Browserify example (CommonJs): var cLib = require('./CibulCalendar/src/CibulCalendar') )

There are two ways to use the calendar:

The easiest way is to use the helper function to bind the calendar to an input field:

setCibulCalendar(id, options)

But you might want to handle the Calendar in a script rather than applying it directly on an input field, in which case you should use:

var cCal = new CibulCalendar(canvasElem, options)

Options

  • init (default: today): date defining initially displayed month
  • range (default: true): if false, range date picking is disabled. Here is an example.
  • enabled (default: true): state of the calendar at init
  • lang (default: ‘en’): Language of the calendar. can be english (en), french (fr), italian (it) or spanish (es). You can extend this with any other language (see below).
  • firstDayOfWeek (default: 1): first day of the week on the calendar. 0 for sunday and onwards.
  • selected (default: false): default selection at initialization. Should be a object: {begin: Date, end: Date}
  • filter: (default: false): callback called on each calendar render to handle date classes. If set, function is given a date and an array of classes and should return the array of classes that will be set on the rendered calendar. Click here for an example highlighting weekends. navDomContent (default: {prev: ‘<', next: '>‘}): html content for the month navigation links. In case you want to set something more fancy like icons or images.
  • classes: in case you want to change the name of the classes used in the calendar.
  • monthNames: add a new month set in the language of your choice. See here for an example of a calendar in icelandic
  • weekDays: add a new week set in the language of your choice
  • switchMonthOnHoverDelay: on a range selection spanning over multiple months, the delay during which next month days should be hovered over before the calendar goes to the neighboring month

Methods

  • disable: disable the calendar
  • enable: enable the calendar
  • showNext: render following month
  • showPrevious: render previous month
  • setSelected(newSelection, updateMonth): set new selection. newSelection is an object containing two indexes: begin and end, each referring to a date.
  • updateMonth is a boolean indicating if the month of the start of the selection should be displayed.

About

A javascript date range picker

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published