Show flatpickr calendar in two columns

Question

I want to display two columns in the Flatpickr calendar. I've searched the Flatpickr documentation but couldn't find how to do this.

JavaScript:

var calendar = flatpickr(el, {
    mode: "range",
    onChange: function (calendar) {
        if (calendar.length == 2) {
            var start =  numeroAdosCaracteres(calendar[0].getDate()) + "-" + numeroAdosCaracteres(calendar[0].getMonth() + 1) + "-" + calendar[0].getFullYear();
            var end = numeroAdosCaracteres(calendar[1].getDate()) + "-" + numeroAdosCaracteres(calendar[1].getMonth() + 1) + "-" + calendar[1].getFullYear();

            $("#az-start-date").val(start);
            $("#az-end-date").val(end);
        }
        function numeroAdosCaracteres(az_date) {
            if (az_date > 9) {
                return "" + az_date;
            } else {
                return "0" + az_date;
            }
        }
    },
});

HTML:

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

The result that I am looking for :

Answer 1

I found how to add 2 cols (2 cols means 2 months).

To use two months we have to use the config option showMonths: 2

Example:

var calendar = flatpickr(el, {
  mode: "range",
  showMonths: 2
}