Calendar

The simplest form of the calendar plugin is to show an interactive calendar. This is very easy to do. First, you'll need to create an element that will contain your calendar. Then you create the calendar using the Bulma.create method.

            <div id="calendar-demo1"></div>

    <script>
        window.addLoadScript(function() {
            Bulma.create('calendar', {
                parent: document.getElementById('calendar-demo1'),
                navButtons: true
            });
        });
    </script>
        

If you would like to hide the navigation buttons simply set navButtons to false.

Using the calendar as input

You can also use the calendar for input. By attaching it to an input field you can ask the user to select a date in an easy and visual way. When attaching the calendar to an input you have two options. You can either attach it inline, it'll be shown below the input field, or as an overlay, which will show the calendar as a modal.

To begin with, attaching the calendar to an input field couldn't be easier. Simply follow the same steps above, except instead of specifying the container as the element you instead specify an input field.

            <input type="text" id="calendar-demo3" class="input">

    <script>
        window.addLoadScript(function() {
            Bulma.create('calendar', {
                parent: document.getElementById('calendar-demo3'),
                navButtons: true
            });
        });
    </script>
        

To make the input show a modal, simply add overlay: true to the options object.

You change the format of the date by specifying the format option this will be a string containting yy, yyyy, mm or dd. These combinations of characters will be replaced with the correct value.