Responsive
Calendar works fine on any device: desktop, tablet or mobile.
Calendar works fine on any device: desktop, tablet or mobile.
Many options to customize behavior. Use of sass variables to easily customize design.
Pure JavaScript to manage user interaction.
There are several ways to get started with Bulma-extensions. You can either:
Use npm to install and stay up to date in the future
npm install bulma-calendar
Use the GitHub repository to get the latest development version
This method requires git installed on your computer.
git clone git://github.com/Wikiki/bulma-calendar.git
The component comes with various files:
Depending on your need your can use either pre-compiled files from dist
directory or sources from
src
directory.
The best way to start with calendar is to use a simple HTML5 date input:
<input type="date">
You are only at 3 simple steps to work with bulmaCalendar.
The first step is to include the stylesheet into your project. You can use either the minified CSS version or the Sass source to integrate it into a more global project.
<link href="~bulma-calendar/dist/css/bulma-calendar.min.css" rel="stylesheet">
@charset "utf-8"
// Import Bulma core
@import 'bulma.sass'
// Import component
@import "bulmaCalendar.sass"
Second step is to include the JavaScript part of the component.
<script src="~bulma-calendar/dist/js/bulma-calendar.min.js"></script>
import bulmaCalendar from '~bulma-calendar/dist/js/bulma-calendar.min.js';
Now all that remains is to intiate the component to all elements you want to transform into a Calendar / DatePicker
// Initialize all input of date type.
var calendars = bulmaCalendar.attach('[type="date"]', options);
// Loop on each calendar initialized
for(var i = 0; i < calendars.length; i++) { // Add listener to date:selected event calendars[i].on('date:selected',
date=> {
console.log(date);
});
}
// Initialize all input of date type.
const calendars = bulmaCalendar.attach('[type="date"]', options);
// Loop on each calendar initialized
calendars.forEach(calendar => {
// Add listener to date:selected event
calendar.on('date:selected', date => {
console.log(date);
});
});
Name | Description | Default value |
---|---|---|
Name | Description | Default value |
startDate
|
Pre-selected start date |
undefined
|
endDate
|
Pre-selected end date |
undefined
|
minDate
|
Minimum date allowed |
null
|
maxDate
|
Maximum date allowed |
null
|
isRange
|
Display image title at bottom if exists |
false
|
disabledDates
|
List of disabled dates |
[]
|
disabledWeekDays
|
List of disabled week days |
undefined
|
lang
|
Display lang (from language supported by date-fns) |
en
|
dateFormat
|
Date format (based on formats supported by date-fns) |
MM/DD/YYYY
|
displayMode
|
Display style (default|dialog|inline) |
default
|
showHeader
|
Show/Hide header section |
true
|
showFooter
|
Show/Hide footer section |
true
|
todayButton
|
Show/Hide today button in footer section |
true
|
clearButton
|
Show/Hide clear button in footer section |
true
|
labelFrom
|
Label used for start date |
empty string
|
labelTo
|
Label used for end date |
empty string
|
weekStart
|
Week day number to start week (Sunday = 0) |
0
|
weekDaysFormat
|
Week days format |
ddd
|
closeOnOverlayClick
|
Enable close dialog when click on overlay (only for dialog display style) |
true
|
closeOnSelect
|
Automatically close the datePicker when date selected (or range date selected) - not available for inline display style. If set to False then a validate button will be displayed into the footer section. |
true
|
toggleOnInputClick
|
Automatically open datepicker when click into input element |
true
|
Calendar component provides some public methods to manually work with it.
show() | ||
---|---|---|
Open date picker (not available with "inline" display style) | ||
Parameters | ||
none
|
||
Return values | ||
none
|
hide() | ||
---|---|---|
Close date picker (not available with "inline" display style) | ||
Parameters | ||
none
|
||
Return values | ||
none
|
isOpen() | ||
---|---|---|
Check if date picker is open or not | ||
Parameters | ||
none
|
||
Return values | ||
boolean
|
True if date picker is open else False |
isRange() | ||
---|---|---|
Check if current instance is a range date picker | ||
Parameters | ||
none
|
||
Return values | ||
boolean
|
True if the instance is a range date picker |
value() | ||
---|---|---|
Get the date picker value as formatted string if no parameter else set the passed value | ||
Parameters | ||
value
|
String|null | Formatted date value if no parameter passed else null |
Return values | ||
Object{startDate, endDate}
|
Date picker selected date (if not range calendar then endDate is undefined) |
clear() | ||
---|---|---|
Clear date selection (startDate and endDate are set to undefined) | ||
Parameters | ||
none
|
||
Return values | ||
none
|
Calendar component comes with Events Management API so you can easily react to its behavior.
Name | Description | Values |
---|---|---|
Name | Description | Values |
ready
|
Triggered when calendar is intialized |
Calendar instance
|
rendered
|
Triggered when calendar is rendered in DOM |
Calendar instance
|
show
|
Triggered when calendar is opened |
Calendar instance
|
hide
|
Triggered when calendar is closed |
Calendar instance
|
date:selected
|
Triggered when a date is selected (for range date = when both start and end dates have been selected) |
Object{startDate, endDate}, Calendar instance
|
startDate:selected
|
Triggered when the start date is selected |
Object{startDate, endDate}, Calendar instance
|
endDate:selected
|
Triggered when the end date is selected |
Object{startDate, endDate}, Calendar instance
|