Create a (micro)calendar with VueJS and good old Bootstrap in a breeze

Yesterday, I wanted to build a PoC of a week Calendar. I thought it would be hard, with VueJS, it’s easy, it took me half an hour.

The GIF is in French, sorry. I’m too lazy to re-capture screen. Code is in English though.

HTML Boilerplate

First, create a small HTML boilerplate (including VueJS and Bootstrap).

Initialize Weeks and Hours with Vue

Then, create a Vue instance with some data. The data has a days property. Each day has a name (the name of the week day, i.e “Monday, Tuesday, etc.”) and a set of hours (an object with an index from 8 am to 8 pm, and a selected property). So, add this in the <script> tag:

Display Calendar (week days and hours)

Add some HTML in the panel-body div . Iterate over the days with a v-for loop and over the hours of each day.

Now the calendar is rendered (and it’s a bit responsive, thanks to the bunch of col-* classes we put on the third div). Let’s make it alive.

Handle click on hours

Add a method to handle click with Vue.

Then change the tr that render hours: bind the td to the click handler and bind a class to the selected property.

It’s time for CSS. Add some style in the style tag, selected element will be blue (kind of):

It works!

You don’t have a real calendar, but it’s a good(?) start. You can check the source here:

Thanks.