bulma-extensions/bulma-calendar/src/demo/index.html

Set of extensions for Bulma.io CSS Framework

---
layout: default
route: index
fixed-navbar: false
title: Quick-Start
subtitle: bulma.io Calendar component with range selection capability
---


{% capture component_include_css %}
<link href="~bulma-calendar/dist/css/bulma-calendar.min.css" rel="stylesheet">
{% endcapture %}

{% capture component_include_sass %}
@charset "utf-8"

// Import Bulma core
@import 'bulma.sass'

// Import component
@import "bulmaCalendar.sass"
{% endcapture %}

{% capture component_include_es5 %}
<script src="~bulma-calendar/dist/js/bulma-calendar.min.js"></script>
{% endcapture %}

{% capture component_include_es6 %}
import bulmaCalendar from '~bulma-calendar/dist/js/bulma-calendar.min.js';
{% endcapture %}

{% capture component_example %}
<input type="date">
{% endcapture %}

{% capture component_dataset %}
<input type="date" data-display-mode="inline" data-is-range="true" data-close-on-select="false">
{% 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:
<div id='app'>
	Selected date: { { niceDate } }
	<button ref='calendarTrigger' type='button'>Change</button>
</div>
{% endcapture %}


{% include anchor.html name="Features" %}
<div class="columns is-multiline is-variable is-6">
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-calendar"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Date Picker</h1>
					<p></p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-clock"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Time Picker</h1>
					<p></p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-calendar-week"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Date & Time Picker</h1>
					<p></p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-desktop"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Responsive</h1>
					<p>Calendar works fine on any device: desktop, tablet or mobile.</p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-paint-brush"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Customization</h1>
					<p>Many options to customize behavior. Use of sass variables to easily customize design.</p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-one-third">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fab fa-2x fa-js"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Javascript</h1>
					<p>Pure JavaScript to manage user interaction.</p>
				</div>
			</div>
		</article>
	</div>
</div>

{% include anchor.html name="Installation" %}
<article class="message is-warning">
	<div class="message-body">
	This component requires bulma.io to work. See <a href="https://bulma.io/documentation/overview/start/" target="_blank">bulma.io documentation</a> first to know how to include it into your project.
	</div>
</article>
<p>There are several ways to get started with Bulma-extensions. You can either:</p>

<section class="section is-paddingless">
	<div class="tabs">
		<ul>
			<li class="is-active"><a href="#install-npm">Npm</a></li>
			<li><a href="#install-github">Github</a> </li>
		</ul>
	</div>

	<div class="tab-contents">
		<div id="install-npm" class="tab-content is-active">
			<p>Use npm to install and stay up to date in the future</p>
			{% highlight shell %}npm install bulma-calendar{% endhighlight %}
		</div>

		<div id="install-github" class="tab-content">
			<p>Use the GitHub repository to get the latest development version</p>
			<p class="help">This method requires git installed on your computer.</p>
			{% highlight shell %}git clone git://github.com/Wikiki/bulma-calendar.git{% endhighlight %}
		</div>
	</div>
</section>

{% include anchor.html name="Content" %}
<section class="section is-paddingless">
	<p>The component comes with various files:</p>
	<div class="file-tree">
		
	</div>
	<p>Depending on your need your can use either pre-compiled files from <code>dist</code> directory or sources from <code>src</code> directory.</p>
</section>

{% include anchor.html name="HTML Structure" %}
<section class="section is-paddingless">
	<p>The best way to start with calendar is to use a simple HTML5 date input:</p>
	{% highlight html %}{{ component_example }}{% endhighlight %}
</section>

{% include anchor.html name="Integration" %}
<section class="section is-paddingless">
	<article class="message is-warning">
		<div class="message-body">
			This component requires bulma.io to work. See <a href="https://bulma.io/documentation" target="_blank">bulma.io documentation</a> first to know how to install it.
		</div>
	</article>
	<p>You are only at 3 simple steps to work with bulmaCalendar.</p>
	<ul class="step-text">
		<li>
			<h6 class="title is-6">Include Stylesheet</h6>
			<p>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.</p>
			<div class="tabs">
				<ul>
					<li class="is-active"><a href="#include-css">Css</a></li>
					<li><a href="#include-sass">Sass</a></li>
				</ul>
			</div>
			
			<div class="tab-contents">
				<div id="include-css" class="tab-content is-active">
					<p>{% highlight html %}{{ component_include_css }}{% endhighlight %}</p>
				</div>
				<div id="include-sass" class="tab-content">
					<p>{% highlight html %}{{ component_include_sass }}{% endhighlight %}</p>
				</div>
			</div>
		</li>
		<li>
			<h6 class="title is-6">Include JavaScript</h6>
			<p>Second step is to include the JavaScript part of the component.</p>
			<div class="tabs">
				<ul>
					<li class="is-active"><a href="#import-es5">ES5</a></li>
					<li><a href="#import-es6">ES6</a></li>
				</ul>
			</div>

			<div class="tab-contents">
				<div id="import-es5" class="tab-content is-active">
					<p>{% highlight html %}{{ component_include_es5 }}{% endhighlight %}</p>
				</div>
				<div id="import-es6" class="tab-content">
					<p>{% highlight javascript %}{{ component_include_es6 }}{% endhighlight %}</p>
				</div>
			</div>
		</li>
		<li>
			<h6 class="title is-6">Initiate component</h6>
			<p>Now all that remains is to intiate the component to all elements you want to transform into a Calendar / DatePicker</p>
			<article class="message is-warning">
				<div class="message-body">
					The <code>attach()</code> method <strong>always</strong> return an array of datepicker instances (even if it targets only one element).
				</div>
			</article>
			<div class="tabs">
				<ul>
					<li class="is-active"><a href="#init-es5">ES5</a></li>
					<li><a href="#init-es6">ES6</a></li>
					<li><a href="#init-vuejs">VueJS</a></li>
				</ul>
			</div>

			<div class="tab-contents">
				<div id="init-es5" class="tab-content is-active">
					<p>{% highlight javascript %}{{ component_init_es5 }}{% endhighlight %}</p>
				</div>
				<div id="init-es6" class="tab-content">
					<p>{% highlight javascript %}{{ component_init_es6 }}{% endhighlight %}</p>
				</div>
				<div id="init-vuejs" class="tab-content">
					<p>{% highlight javascript %}{{ component_init_vuejs }}{% endhighlight %}</p>
				</div>
			</div>
		</li>
	</ul>
</section>

{% include anchor.html name="Options" %}
{% include options.html %}

<article class="message is-info">
	<div class="message-body">
		Options can be set using input data attributes. Just convert option name to dashes.<br />
		<i>For example if you want to init a deta picker using inline display style with range capability and a validate
			button:</i>
		{% highlight html %}{{ component_dataset }}{% endhighlight %}
	</div>
</article>

{% include anchor.html name="Methods" %}
<section class="section is-paddingless">
	<p>Calendar component provides some public methods to manually work with it.</p>
	{% include methods.html %}
</section>

{% include anchor.html name="Getters" %}
<section class="section is-paddingless">
	<p>Calendar component provides some public Getters to manually access properties.</p>
	{% include getters.html %}
</section>
{% include anchor.html name="Setters" %}
<section class="section is-paddingless">
	<p>Calendar component provides some public Setters to manually set properties.</p>
	{% include setters.html %}
</section>

{% include anchor.html name="Events" %}
<section class="section is-paddingless">
	<p>Calendar component comes with Events Management API so you can easily react to its behavior.</p>
	{% include events.html %}
</section>