Calendar

Display a calendar with 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-small is-text">
        <svg viewBox="0 0 50 80" xml:space="preserve">
          <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "></polyline>
        </svg>
      </button>
    </div>
    <div class="calendar-month">March 2017</div>
    <div class="calendar-nav-next-month">
      <button class="button is-small is-text">
        <svg viewBox="0 0 50 80" xml:space="preserve">
          <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "></polyline>
        </svg>
      </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 calendar-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 calendar-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 the 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-small is-text">
        <svg viewBox="0 0 50 80" xml:space="preserve">
          <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "></polyline>
        </svg>
      </button>
    </div>
    <div class="calendar-month">March 2017</div>
    <div class="calendar-nav-next-month">
      <button class="button is-small is-text">
        <svg viewBox="0 0 50 80" xml:space="preserve">
          <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "></polyline>
        </svg>
      </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"><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">
        <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 calendar-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 calendar-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="date">

Overlay

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

Javascript

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

document.addEventListener('DOMContentLoaded', function () {
  var datePickers = bulmaCalendar.attach('[type="date"]', {
    overlay: true,
    minDate: '2018-01-01',
    maxDate: '2018-12-31'
  });
  // datePickers now contains an Array of all datePicker instances
  // To use Events API jus add a listener like below:
  // datepickerInstance.on(event, function(datepicker) {});
});

JavaScript Events #

You can use these events to react on plugin actions.

Name Description
Name Description
datepicker:ready triggered when DatePicker instance is ready to be used
datepicker:rendered Triggered once per datepicker instanciation
datepicker:show Triggered each time datepicker is showed
datepicker:hide Triggered when datepicker is closed
datepicker:date:selected Triggered when a date is selected

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()
weekStart Weekstart day (by default defined by language) null
minDate Minimum date selectable null
maxDate Maximum Date selectable null
disabledDates Dates to display in calendar null
dateFormat Date format to use (to change order or separator). See moment.js documentation for supported formats 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
toggleOnInputClick Activate/Deactivate show on input click (if false then call bulmaCalendarInstance.show() to display the datePicker) true
icons.month.previous Html content for previous month arrow inline svg
icons.month.next Html content for next month arrow inline svg
icons.year.previous Html content for previous year arrow inline svg
icons.year.previous Html content for previous year arrow inline svg
events: