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.

• 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.

  • Css
  • Sass

  <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.

  • ES5
  • ES6

  <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).
  • ES5
  • ES6
  • VueJS

  // 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>

Calendar component provides some public methods to manually work with it.

Calendar component provides some public Getters to manually access properties.

Calendar component provides some public Setters to manually set properties.

Calendar component comes with Events Management API so you can easily react to its behavior.