--- layout: default route: index fixed-navbar: false title: Quick-Start subtitle: bulma.io Calendar component with range selection capability --- {% capture component_include_css %} {% endcapture %} {% capture component_include_sass %} @charset "utf-8" // Import Bulma core @import 'bulma.sass' // Import component @import "bulmaCalendar.sass" {% endcapture %} {% capture component_include_es5 %} {% endcapture %} {% capture component_include_es6 %} import bulmaCalendar from '~bulma-calendar/dist/js/bulma-calendar.min.js'; {% endcapture %} {% capture component_example %} {% endcapture %} {% capture component_dataset %} {% endcapture %} {% capture component_init_es5 %} // 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 date:selected 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()); }); } {% endcapture %} {% capture component_init_es6 %} // 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); }); }); // 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()); }); } {% endcapture %} {% capture component_init_vuejs %} // 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:
Selected date: { { niceDate } }
{% endcapture %} {% include anchor.html name="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.

{% include anchor.html name="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

{% highlight shell %}npm install bulma-calendar{% endhighlight %}

Use the GitHub repository to get the latest development version

This method requires git installed on your computer.

{% highlight shell %}git clone git://github.com/Wikiki/bulma-calendar.git{% endhighlight %}
{% include anchor.html name="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.

{% include anchor.html name="HTML Structure" %}

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

{% highlight html %}{{ component_example }}{% endhighlight %}
{% include anchor.html name="Integration" %}
This component requires bulma.io to work. See bulma.io documentation first to know how to install it.

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

{% include anchor.html name="Options" %} {% include options.html %}
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: {% highlight html %}{{ component_dataset }}{% endhighlight %}
{% include anchor.html name="Methods" %}

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

{% include methods.html %}
{% include anchor.html name="Getters" %}

Calendar component provides some public Getters to manually access properties.

{% include getters.html %}
{% include anchor.html name="Setters" %}

Calendar component provides some public Setters to manually set properties.

{% include setters.html %}
{% include anchor.html name="Events" %}

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

{% include events.html %}