Calendar

Display a calendar for date selection or for planning management, in different colors and sizes

Colors No
Sizes Yes
Javascript Yes
Variables Yes

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
<div class="calendar">
<div class="calendar-nav">
<div class="calendar-nav-previous-month">
<button class="button is-text">
<i class="fa fa-chevron-left"></i>
</button>
</div>
<div>March 2017</div>
<div class="calendar-nav-next-month">
<button class="button is-text">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<div class="calendar-container">
<div class="calendar-header">
<div class="calendar-date">Sun</div>
<div class="calendar-date">Mon</div>
<div class="calendar-date">Tue</div>
<div class="calendar-date">Wed</div>
<div class="calendar-date">Thu</div>
<div class="calendar-date">Fri</div>
<div class="calendar-date">Sat</div>
</div>
<div class="calendar-body">
<div class="calendar-date is-disabled"><button class="date-item">26</button></div>
<div class="calendar-date is-disabled"><button class="date-item">27</button></div>
<div class="calendar-date is-disabled"><button class="date-item">28</button></div>
<div class="calendar-date"><button class="date-item">1</button></div>
<div class="calendar-date"><button class="date-item">2</button></div>
<div class="calendar-date"><button class="date-item">3</button></div>
<div class="calendar-date tooltip" data-tooltip="Today"><button class="date-item is-today">4</button></div>
<div class="calendar-date tooltip" data-tooltip="Not available" disabled=""><button class="date-item">5</button></div>
<div class="calendar-date"><button class="date-item">6</button></div>
<div class="calendar-date"><button class="date-item">7</button></div>
<div class="calendar-date tooltip" data-tooltip="You have appointments"><button class="date-item">8</button></div>
<div class="calendar-date"><button class="date-item">9</button></div>
<div class="calendar-date"><button class="date-item">10</button></div>
<div class="calendar-date"><button class="date-item">11</button></div>
<div class="calendar-date"><button class="date-item">12</button></div>
<div class="calendar-date"><button class="date-item">13</button></div>
<div class="calendar-date"><button class="date-item">14</button></div>
<div class="calendar-date"><button class="date-item">15</button></div>
<div class="calendar-date calendar-range range-start"><button class="date-item is-active">16</button></div>
<div class="calendar-date calendar-range"><button class="date-item">17</button></div>
<div class="calendar-date calendar-range"><button class="date-item">18</button></div>
<div class="calendar-date calendar-range"><button class="date-item">19</button></div>
<div class="calendar-date calendar-range range-end"><button class="date-item is-active">20</button></div>
<div class="calendar-date"><button class="date-item">21</button></div>
<div class="calendar-date"><button class="date-item">22</button></div>
<div class="calendar-date"><button class="date-item">23</button></div>
<div class="calendar-date"><button class="date-item">24</button></div>
<div class="calendar-date"><button class="date-item">25</button></div>
<div class="calendar-date"><button class="date-item">26</button></div>
<div class="calendar-date"><button class="date-item">27</button></div>
<div class="calendar-date"><button class="date-item">28</button></div>
<div class="calendar-date"><button class="date-item">29</button></div>
<div class="calendar-date"><button class="date-item">30</button></div>
<div class="calendar-date"><button class="date-item">31</button></div>
<div class="calendar-date is-disabled"><button class="date-item">1</button></div>
</div>
</div>
</div>

Sizes #

You can use is-large modifier to display a large detailed calendar.

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
<div class="calendar is-large">
<div class="calendar-nav">
<div class="calendar-nav-previous-month">
<button class="button is-text">
<i class="fa fa-chevron-left"></i>
</button>
</div>
<div>March 2017</div>
<div class="calendar-nav-next-month">
<button class="button is-text">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<div class="calendar-container">
<div class="calendar-header">
<div class="calendar-date">Sun</div>
<div class="calendar-date">Mon</div>
<div class="calendar-date">Tue</div>
<div class="calendar-date">Wed</div>
<div class="calendar-date">Thu</div>
<div class="calendar-date">Fri</div>
<div class="calendar-date">Sat</div>
</div>
<div class="calendar-body">
<div class="calendar-date is-disabled"><button class="date-item">26</button></div>
<div class="calendar-date is-disabled">
<button class="date-item">27</button>
<div class="calendar-events">
<a class="calendar-event">Default event</a>
</div>
</div>
<div class="calendar-date is-disabled"><button class="date-item">28</button></div>
<div class="calendar-date"><button class="date-item">1</button></div>
<div class="calendar-date"><button class="date-item">2</button></div>
<div class="calendar-date"><button class="date-item">3</button></div>
<div class="calendar-date tooltip" data-tooltip="Today"><button class="date-item is-today">4</button></div>
<div class="calendar-date" disabled=""><button class="date-item">5</button></div>
<div class="calendar-date"><button class="date-item">6</button></div>
<div class="calendar-date"><button class="date-item">7</button></div>
<div class="calendar-date tooltip" data-tooltip="You have appointments">
<button class="date-item badge">8</button>
<div class="calendar-events">
<a class="calendar-event is-primary">Primary event</a>
<a class="calendar-event is-warning">Warning event</a>
<a class="calendar-event is-danger">Danger event</a>
</div>
</div>
<div class="calendar-date"><button class="date-item">9</button></div>
<div class="calendar-date"><button class="date-item">10</button></div>
<div class="calendar-date"><button class="date-item">11</button></div>
<div class="calendar-date">
<button class="date-item">12</button>
<div class="calendar-events">
<a class="calendar-event">Default event</a>
</div>
</div>
<div class="calendar-date"><button class="date-item">13</button></div>
<div class="calendar-date"><button class="date-item">14</button></div>
<div class="calendar-date"><button class="date-item">15</button></div>
<div class="calendar-date calendar-range range-start"><button class="date-item is-active">16</button></div>
<div class="calendar-date calendar-range"><button class="date-item">17</button></div>
<div class="calendar-date calendar-range"><button class="date-item">18</button></div>
<div class="calendar-date calendar-range"><button class="date-item">19</button></div>
<div class="calendar-date calendar-range range-end">
<button class="date-item is-active">20</button>
<div class="calendar-events">
<a class="calendar-event is-success">Success event</a>
</div>
</div>
<div class="calendar-date"><button class="date-item">21</button></div>
<div class="calendar-date"><button class="date-item">22</button></div>
<div class="calendar-date"><button class="date-item">23</button></div>
<div class="calendar-date"><button class="date-item">24</button></div>
<div class="calendar-date"><button class="date-item">25</button></div>
<div class="calendar-date"><button class="date-item">26</button></div>
<div class="calendar-date"><button class="date-item">27</button></div>
<div class="calendar-date"><button class="date-item">28</button></div>
<div class="calendar-date"><button class="date-item">29</button></div>
<div class="calendar-date"><button class="date-item">30</button></div>
<div class="calendar-date"><button class="date-item">31</button></div>
<div class="calendar-date is-disabled">
<button class="date-item">1</button>
<div class="calendar-events">
<a class="calendar-event">Second default event</a>
</div>
</div>
</div>
</div>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$calendar-border .1rem solid $grey-lighter
$calendar-border-radius $radius
$calendar-header-color $primary
$calendar-date-hover $white-ter
$calendar-today-background transparent
$calendar-today-border-color $primary
$calendar-today-color $primary

Javascript #

Default

<input id="datepickerDemo" class="input" type="text">

Overlay

set overlay option to true
<input id="datepickerDemo2" class="input" type="text" value="11-02-2018">

Javascript

The extension comes with a JavaScript implementation to handle a DatePicker input.

document.addEventListener( 'DOMContentLoaded', function () {
var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo' ), {
startDate: new Date(), // Date selected by default
dateFormat: 'yyyy-mm-dd', // the date format `field` value
lang: 'en', // internationalization
overlay: false,
closeOnOverlayClick: true,
closeOnSelect: true,
// callback functions
onSelect: null,
onOpen: null,
onClose: null,
onRender: null
} );
var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo2' ), {
overlay: true
} );
} );

JavaScript options #

You can use these options to customize the plugin instance. Simply set one or multiple of these options when instancing the plugin.

Name Description Value
Name Description Value
startDate Date selected by default when Datepicker is displayed new Date()
dateFormat Date format to use (to change order or separator). mm/dd/yyyy, dd/mm/yyyy, mm-dd-yyyy, dd-mm-yyyy yyyy-mm-dd
lang Lang in which display content (month and day names) en
overlay Display the Datepicker in fullscreen using an overlay ? false
closeOnOverlayClick Close the Datepicker when clicking on the overlay ? true
closeOnSelect Close the Datepicker when selecting a date ? true
onSelect Callback to call when selecting a date null
onOpen Callback to call when opening the Datepicker null
onClose Callback to call when closing the Datepicker null