--- 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 "bulma-timeline.sass" {% endcapture %} {% capture component_example %}
Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End
{% endcapture %} {% include anchor.html name="Features" %}

Responsive

Calendar works fine on any device: desktop, tablet or mobile.

Customization

Use of sass variables to easily customize design.

{% 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-timeline{% 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-timeline.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 1 simple step to work with bulma-timeline.