Multiple Calendars

[alexander-code]

Hi congrats for your plugin.

I am wondering if can I have in one page more than one calendar on dynamic created divs and pass dynamic values in order to have each calendar it's own disabledRanges values.

I tried the following, the lang option works properly but the disabledRanges no.

<div class="btn-calendar" data-lang="en" data-disdata="[['2017-12-01', '2017-12-25'],['2018-02-10', '2018-02-12'],['2018-03-01', '2018-03-23']]">Open Modal</div>
<div class="btn-calendar" data-lang="pt" data-disdata="[['2017-12-01', '2017-12-25'],['2018-02-10', '2018-02-12'],['2018-03-25', '2018-03-29']]">Open Modal</div>

$('.btn-calendar').each(function () {    
            var $this = $(this);
            var disdates=$this.data('disdata');
            var lang = $this.data('lang');
            console.log(disdates); //has each time the right data
            $this.pignoseCalendar({
                modal: true,
                buttons: true,
                lang: lang,
                disabledRanges: disdates
            });
});     

Popup calendar shows up with the right language but the disabledRanges does not work.

Thank you @KennethanCeyer

[alexander-code]

Don't mind, I found a way to make it work properly. I will tweak it a little bit more in the next days and I'll post the solution in case anyone will need it in the future.

[KennethanCeyer]

Hi @alexander-code

I am glad you solved the problem.

Do you have any other issues?

[niallmccabe]

@alexander-code Can you please share your solution? I think I am having a similar issue

[alexander-code]

@niallmccabe Of course, sorry that I haven't share it yet cause I had a lot to do and I forgot it.

If I recall correctly the issues were on the format and solved it with moment and the structure of the data-disdata attr which will use later just the data of it in order to create a real array by pushing these values.

Use pignose.calendar.full.js

A working example follows:

1) Prepare your buttons with an attr for example data-disdata as the following

<div class="btn-calendar" data-lang="en" data-disdata="[['2017-12-01', '2017-12-25']@['2018-02-10', '2018-02-12']@['2018-03-01', '2018-03-23']]">Open Modal</div>
<div class="btn-calendar" data-lang="en" data-disdata="[['2017-12-01', '2017-12-25']@['2018-02-10', '2018-02-12']@['2018-03-25', '2018-03-29']]">Open Modal</div>

Use a separator such as @ between the date ranges subarrays in order to use it later to split them

2) Create the JS function which will iterate through the button elements and attach on them the pignoseCalendar with the proper data

function InitiateCalendars(){
    $('.btn-calendar').each(function () {    
        var $this = $(this);
        var disdates=$this.data('disdata'); //disabled date range data
        var spldisdt=disdates.split("@");
        var disarr=[];
        var lang = $this.data('lang');

        for (var i in spldisdt){
            var spl = spldisdt[i].split(",").join();
            spl = spl.replace("[", "");
            spl = spl.replace("]", "");
            spl = spl.split(",");

            // We need to format them through moment
            var dateFrom = moment(spl[0],'YYYY-MM-DD');
            var dateTo = moment(spl[1],'YYYY-MM-DD');
            //then push the date range into the array
            disarr.push([dateFrom,dateTo]); // this array will be the data of the disabledRanges

        }

        //once we have the proper data attach the pignose to the current button
        $this.pignoseCalendar({
            modal: true, 
            buttons: true, 
            lang: lang,
            disabledRanges: disarr
        });
    });

}

3) Call the function

InitiateCalendars();

Of course the function could have some improvements for example if you put the right data structure in the data attr you might not need to get rid of unnecessary brackets etc but it works...

If I have some time in the next days I'll post an improved function.

Please let me know if that works for you or you need any further help.