# Quick-Start

## bulma.io Calendar component with range selection capability

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.

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:

- Npm
- Github

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:

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

Options

Name | Description | Type | Default value
--- | --- | --- | ---
Name | Description | Type | Default value
`type` | Component type: date|time|datetime | `String` | `datetime`
`color` | Picker dominant color | `String` | `primary`
`isRange` | Range capability (start and end date/time selection | `Boolean` | `false`
`allowSameDayRange` | Possibility to select same date as start and end date in range mode | `Boolean` | `true`
`lang` | Display lang (from language supported by date-fns 2.x) | `String` | `navigator.language || "en-US"`
`dateFormat` | Date format pattern | `String` | `MM/dd/yyyy`
`timeFormat` | Time format pattern | `String` | `HH:mm`
`displayMode` | Display mode: default|dialog|inline | `String` | `default`
`position` |  | `String` | `auto`
`showHeader` | Show/Hide header block (with current selection) | `Boolean` | `true`
`headerPosition` | Header block position: top|bottom | `Boolean` | `top`
`showFooter` | Show/Hide footer block | `Boolean` | `true`
`showButtons` | Show/Hide buttons | `Boolean` | `true`
`showTodayButton` | Show/Hide Today Button | `Boolean` | `true`
`showClearButton` | Show/Hide Clear Button | `Boolean` | `true`
`cancelLabel` | Cancel button label | `String` | `Cancel`
`clearLabel` | Clear button label | `String` | `Clear`
`todayLabel` | Today button label | `String` | `Today`
`nowLabel` | Now button label | `String` | `Now`
`validateLabel` | Validate button label | `String` | `Validate`
`enableMonthSwitch` | Enable/disable month switch | `Boolean` | `true`
`enableYearSwitch` | Enable/disable year switch | `Boolean` | `true`
`startDate` | Pre-selected start date | `Date | String` | `undefined`
`endDate` | Pre-selected end date | `Date | String` | `undefined`
`minDate` | Minimum date allowed | `Date | String` | `null`
`maxDate` | Maximum date allowed | `Date | String` | `null`
`disabledDates` | List of disabled dates | `Date[] | String[] | Function(this, day)` | ``
`disabledWeekDays` | List of disabled week days | `Number[] | String '1,2,3,...'` | `undefined`
`highlightedDates` | List of highlighted dates | `Date[] | String[] | Function(this, day)` | ``
`weekStart` | Default weekstart day number (sunday by default) | `Integer` | `0`
`startTime` | Pre-selected start time | `Date | String` | `undefined`
`endTime` | Pre-selected end time | `Date | String` | `undefined`
`minuteSteps` | Steps for minutes selector | `Integer` | `5`
`labelFrom` | From label | `String` | ``
`labelTo` | To label | `String` | ``
`closeOnOverlayClick` | Close picker on overlay click (only for dialog display style) | `Boolean` | `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. | `Boolean` | `true`
`toggleOnInputClick` | Automatically open datepicker when click into input element | `Boolean` | `true`
`onReady` | Callback to trigger once picker initiated | `Function` | ``
`onValidate` | Callback for manual validation before save() | `Function` | ``
`formats.header` | Header format pattern month / year | `String` | `LLLL yyyy`
`formats.navigationMonth` | Month format pattern for the navigation bar | `String` | `LLLL`
`formats.navigationYear` | Year format pattern for the navigation bar | `String` | `yyyy`
`formats.selectMonth` | Format pattern for the month selection | `String` | `LLL`
`formats.selectYear` | Format pattern for the year selection | `String` | `yyyy`
`formats.weekday` | Format pattern for the weekdays | `String` | `ccc`
`icons.previous` | Previous button icon | `String` | `Svg content`
`icons.next` | Next button icon | `String` | `Svg content`
`icons.time` | Time icon | `String` | `Svg content`
`icons.date` | Date icon | `String` | `Svg content`

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)

refresh()
Force calendar refresh
Parameters
`none` |  |
Return values
`none` |

save()
Force to set calendar data into UI inputs
Parameters
`none` |  |
Return values
`none` |

clear()
Clear date selection (startDate and endDate are set to undefined)
Parameters
`none` |  |
Return values
`none` |

Getters

Calendar component provides some public Getters to manually access properties.

Name | Description
--- | ---
Name | Description
`id` | Get component instance ID
`lang` | Get active lang
`date` | Get selected date
`startDate` | Get selected start date
`endDate` | Get selected end date
`minDate` | Get min possible date
`maxDate` | Get max possible date
`dateFormat` | Get date format pattern
`time` | Get selected time
`startTime` | Get selected start time
`endTime` | Get selected end time
`timeFormat` | Get time format pattern

Setters

Calendar component provides some public Setters to manually set properties.

Name | Description
--- | ---
Name | Description
`lang` | Set component lang
`date` | Set date
`startDate` | Se start date
`endDate` | Set end date
`minDate` | Set min possible date
`maxDate` | Set max possible date
`dateFormat` | Set date format pattern
`time` | Set time
`startTime` | Set start time
`endTime` | Set end time
`timeFormat` | Set time format pattern

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 (DO NOT USE IT but pass callback into the onReady option) | `bulmaCalendar instance`
`show` | Triggered when calendar is opened | `bulmaCalendar instance`
`hide` | Triggered when calendar is closed | `bulmaCalendar instance`
`save` | Triggered when a date/time is selected and validated (calendar is closed) | `bulmaCalendar instance`
`select` | Triggered when a date/time is selected (for range = when both start and end dates/times have been selected) | `bulmaCalendar instance`
`select:start` | Triggered when the start date is selected | `bulmaCalendar instance`