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

  • ES5
  • ES6

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

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

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