--- layout: default route: index fixed-navbar: false title: Quick-Start subtitle: bulma.io Calendar component with range selection capability tree: - name: dist open: true subtree: - name: css open: true subtree: - name: bulma-calendar.min.css details: Minified version of all required CSS in one file - name: bulma-calendar.sass details: Copy of Sass sources from src/ - name: js open: true subtree: - name: bulma-calendar.js details: JavaScript code - name: bulma-calendar.min.js details: Minified version of JavaScript code - name: src open: true subtree: - name: js open: true subtree: - name: index.js details: Javascript ES6 source code - name: sass open: true subtree: - name: index.sass details: SASS source code options: - name: startDate type: Date description: 'Pre-selected start date' value: undefined - name: endDate type: DateDa description: 'Pre-selected end date' value: undefined - name: minDate type: Date description: 'Minimum date allowed' value: 'null' - name: maxDate type: Date description: 'Maximum date allowed' value: 'null' - name: isRange type: Boolean description: 'Display image title at bottom if exists' value: false - name: disabledDates type: Array of Dates description: 'List of disabled dates' value: '[]' - name: disabledWeekDays type: String of day numbers separated by a comma description: 'List of disabled week days' value: undefined - name: lang type: String description: 'Display lang (from language supported by date-fns)' value: 'en' - name: dateFormat type: String description: 'Date format (based on formats supported by date-fns)' value: 'MM/DD/YYYY' - name: displayMode type: String description: 'Display style (default|dialog|inline)' value: 'default' - name: showHeader type: Boolean description: 'Show/Hide header section' value: true - name: showFooter type: Boolean description: 'Show/Hide footer section' value: true - name: todayButton type: Boolean description: 'Show/Hide today button in footer section' value: true - name: clearButton type: Boolean description: 'Show/Hide clear button in footer section' value: true - name: labelFrom type: String description: 'Label used for start date' value: empty string - name: labelTo type: String description: 'Label used for end date' value: empty string - name: weekStart type: Int description: 'Week day number to start week (Sunday = 0)' value: 0 - name: weekDaysFormat type: String description: 'Week days format' value: ddd - name: closeOnOverlayClick type: Boolean description: 'Enable close dialog when click on overlay (only for dialog display style)' value: true - name: closeOnSelect type: Boolean description: '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.' value: true - name: toggleOnInputClick type: Boolean description: 'Automatically open datepicker when click into input element' value: true events: - name: 'ready' description: 'Triggered when calendar is intialized' parameters: 'Calendar instance' - name: 'rendered' description: 'Triggered when calendar is rendered in DOM' parameters: 'Calendar instance' - name: 'show' description: 'Triggered when calendar is opened' parameters: 'Calendar instance' - name: 'hide' description: 'Triggered when calendar is closed' parameters: 'Calendar instance' - name: 'date:selected' description: 'Triggered when a date is selected (for range date = when both start and end dates have been selected)' parameters: 'Object{startDate, endDate}, Calendar instance' - name: 'startDate:selected' description: 'Triggered when the start date is selected' parameters: 'Object{startDate, endDate}, Calendar instance' - name: 'endDate:selected' description: 'Triggered when the end date is selected' parameters: 'Object{startDate, endDate}, Calendar instance' methods: - name: 'show()' description: 'Open date picker (not available with "inline" display style)' parameters: - name: 'none' type: '' description: '' returns: - type: 'none' description: '' - name: 'hide()' description: 'Close date picker (not available with "inline" display style)' parameters: - name: 'none' type: '' description: '' returns: - type: 'none' description: '' - name: 'isOpen()' description: 'Check if date picker is open or not' parameters: - name: 'none' type: '' description: '' returns: - type: 'boolean' description: 'True if date picker is open else False' - name: 'isRange()' description: 'Check if current instance is a range date picker' parameters: - name: 'none' type: '' description: '' returns: - type: 'boolean' description: 'True if the instance is a range date picker' - name: 'value()' description: 'Get the date picker value as formatted string if no parameter else set the passed value' parameters: - name: 'value' type: 'String|null' description: 'Formatted date value if no parameter passed else null' returns: - type: 'Object{startDate, endDate}' description: 'Date picker selected date (if not range calendar then endDate is undefined)' - name: 'clear()' description: 'Clear date selection (startDate and endDate are set to undefined)' parameters: - name: 'none' type: '' description: '' returns: - type: 'none' description: '' --- {% 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 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); }); } {% 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); }); }); {% endcapture %} {% include anchor.html name="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.

{% 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:

{% include tree.html tree=page.tree class="directory" %}

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="Events" %}

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

{% include events.html %}