Quick-Start

bulma.io Calendar component with range selection capability

Features

Date Picker

Time Picker

Date & Time Picker

Responsive

Calendar works fine on any device: desktop, tablet or mobile.

Customization

Many options to customize behavior. Use of sass variables to easily customize design.

Javascript

Pure JavaScript to manage user interaction.

Installation
This component requires bulma.io to work. See bulma.io documentation first to know how to include it into your project.

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
Content

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.

HTML Structure

The best way to start with calendar is to use a simple HTML5 date input:

<input type="date">
Integration

You are only at 3 simple steps to work with bulmaCalendar.

  • Include Stylesheet

    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"

  • Include JavaScript

    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';

  • Initiate component

    Now all that remains is to intiate the component to all elements you want to transform into a Calendar / DatePicker

    The attach() method always return an array of datepicker instances (even if it targets only one element).

    // Initialize all input of type date
    var calendars = bulmaCalendar.attach('[type="date"]', options);
    
    // Loop on each calendar initialized
    for(var i = 0; i < calendars.length; i++) {
    	// Add listener to select event
    	calendars[i].on('select', date => {
    		console.log(date);
    	});
    }
    
    // To access to bulmaCalendar instance of an element
    var element = document.querySelector('#my-element');
    if (element) {
    	// bulmaCalendar instance is available as element.bulmaCalendar
    	element.bulmaCalendar.on('select', function(datepicker) {
    		console.log(datepicker.data.value());
    	});
    }

    // Initialize all input of date type.
    const calendars = bulmaCalendar.attach('[type="date"]', options);
    
    // Loop on each calendar initialized
    calendars.forEach(calendar => {
    	// Add listener to select event
    	calendar.on('select', date => {
    		console.log(date);
    	});
    });
    
    // To access to bulmaCalendar instance of an element
    const element = document.querySelector('#my-element');
    if (element) {
    	// bulmaCalendar instance is available as element.bulmaCalendar
    	element.bulmaCalendar.on('select', datepicker => {
    		console.log(datepicker.data.value());
    	});
    }

    // Thanks to @megapctr
    new Vue({
      el: '#app',
      data() {
        return {
          date: new Date(),
        }
      },
      mounted() {
        const calendar = bulmaCalendar.attach(this.$refs.calendarTrigger, {
          startDate: this.date,
        })[0]
        calendar.on('select', e => (this.date = e.start || null))
      },
      computed: {
        niceDate() {
          if (this.date) {
            return this.date.toLocaleDateString()
          }
        }
      }
    });
    
    
    // The view is like:
    <div id='app'>
    	Selected date: { { niceDate } }
    	<button ref='calendarTrigger' type='button'>Change</button>
    </div>

Options
Name Description Default value
Name Description Default value
type Component type: date|time|datetime datetime
color Picker dominant color primary
isRange Range capability (start and end date/time selection false
allowSameDayRange Possibility to select same date as start and end date in range mode true
lang Display lang (from language supported by date-fns) navigator.language.substring(0, 2) || "en"
dateFormat Date format pattern MM/DD/YYYY
timeFormat Time format pattern HH:mm
displayMode Display mode: default|dialog|inline default
position auto
showHeader Show/Hide header block (with current selection) true
headerPosition Header block position: top|bottom top
showFooter Show/Hide footer block true
showButtons Show/Hide buttons true
showTodayButton Show/Hide Today Button true
showClearButton Show/Hide Clear Button true
cancelLabel Cancel button label Cancel
clearLabel Clear button label Clear
todayLabel Today button label Today
nowLabel Now button label Now
validateLabel Validate button label Validate
enableMonthSwitch Enable/disable month switch true
enableYearSwitch Enable/disable year switch true
startDate Pre-selected start date undefined
endDate Pre-selected end date undefined
minDate Minimum date allowed null
maxDate Maximum date allowed null
disabledDates List of disabled dates
disabledWeekDays List of disabled week days undefined
weekStart Default weekstart day number (sunday by default) 0
startTime Pre-selected start time undefined
endTime Pre-selected end time undefined
minuteSteps Steps for minutes selector 5
labelFrom From label
labelTo To label
closeOnOverlayClick Close picker on overlay click (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
onReady Callback to trigger once picker initiated null
icons.previous Previous button icon Svg content
icons.next Next button icon Svg content
icons.time Time icon Svg content
icons.date Date icon Svg content
Options can be set using input data attributes. Just convert option name to dashes.
For example if you want to init a deta picker using inline display style with range capability and a validate button:
<input type="date" data-display-mode="inline" data-is-range="true" data-close-on-select="false">
Methods

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)
refresh()
Force calendar refresh
Parameters
none
Return values
none
save()
Force to set calendar data into UI inputs
Parameters
none
Return values
none
clear()
Clear date selection (startDate and endDate are set to undefined)
Parameters
none
Return values
none
Getters

Calendar component provides some public Getters to manually access properties.

Name Description
Name Description
id Get component instance ID
lang Get active lang
date Get selected date
startDate Get selected start date
endDate Get selected end date
minDate Get min possible date
maxDate Get max possible date
dateFormat Get date format pattern
time Get selected time
startTime Get selected start time
endTime Get selected end time
timeFormat Get time format pattern
Setters

Calendar component provides some public Setters to manually set properties.

Name Description
Name Description
lang Set component lang
date Set date
startDate Se start date
endDate Set end date
minDate Set min possible date
maxDate Set max possible date
dateFormat Set date format pattern
time Set time
startTime Set start time
endTime Set end time
timeFormat Set time format pattern
Events

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 (DO NOT USE IT but pass callback into the onReady option) bulmaCalendar instance
show Triggered when calendar is opened bulmaCalendar instance
hide Triggered when calendar is closed bulmaCalendar instance
select Triggered when a date/time is selected (for range = when both start and end dates/times have been selected) bulmaCalendar instance
select:start Triggered when the start date is selected bulmaCalendar instance