Calendar

Calendar extension.

Get Started

1

Legacy Calendar

Inline Calendar

Bulkit used to come with a very versatile Bulma calendar UI extension. At the time it was released, the extension had only a few features. It has now a lot more. However, we kept the legacy calendars in case you need it. Please note that the legacy UI is purely static.

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
2

Legacy Calendar

Large Calendar

You can make the legacy calendar bigger by adding the .is-large class to the .calendar element. It also supports events.

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
3

Calendar Datepickers

New3.0.0

Regular Datepicker

Since it was released, the Bulma calendar extension has been growing in terms of features. It now offers a full set of time and date pickers that you can mix in many different ways. Let's start with the regular datepicker. You can find more examples and a full documentation for this extension by visiting this link.

New3.0.0

Datepicker Modal

The Datepicker can be displayed as a modal, with an opaque overlay. It can come very handy for certain particular use cases.

New3.0.0

Datepicker Inline

The Datepicker can be displayed inline, like a work calendar. That can be interesting if you need the users to always see the calendar while working with it.

New3.0.0

Datepicker Range

Sometimes, you need to be able to enter a date range. This component does it easily and in a very elegant way.

4

Calendar Timepickers

New3.0.0

Regular Timepicker

The Calendar can behave like a timepicker when wired to a text input. It has to be initialized with Javascript.

New3.0.0

Timepicker Inline

The Timepicker can be displayed inline, if you need to always see it while working with it.

New3.0.0

Timepicker Range

Sometimes, you need to be able to enter a time range. This component does it easily and in a very elegant way.

5

Calendar DateTimepickers

New3.0.0

Regular DateTimepicker

What if we simply mix the features from the two last sections? Is it even possible? Indeed it is. This component lets you choose date and time in a row.

New3.0.0

Datepicker Modal

The same result can be obtained while opting in for the modal approach. The component keeps looking nice and sharp.

New3.0.0

Datepicker Inline

Like the previous examples, the DateTimepicker can be shown inline, if you need to.