Quick-Start

bulma.io Calendar component with range selection capability

Features

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:

  • dist
    • css
      • bulma-calendar.min.css Minified version of all required CSS in one file
      • bulma-calendar.sass Copy of Sass sources from src/
    • js
      • bulma-calendar.js JavaScript code
      • bulma-calendar.min.js Minified version of JavaScript code
  • src
    • js
      • index.js Javascript ES6 source code
    • sass
      • index.sass SASS source code

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 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);
    	});
    });

    // 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('date:selected', 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
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
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
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)
clear()
Clear date selection (startDate and endDate are set to undefined)
Parameters
none
Return values
none
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 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