Calendar rangesClasses not working

Questions
1

i am having trouble with rangesClasses. if have debuged it and the return true is trigger on the right dates but the class isnt added. If i return true before the for-loop then all days are marked so it workes in this case and adds the class to all days.

calendarModal = $f7.calendar.create({
                    containerEl: '.popover .cal',
                    openIn: 'customModal',
                    disabled: function (date) {
                        let f;
                        if($f7.store.state.settings.holidays) {
                            f = $f7.store.state.settings.holidays.find(x => {
                                //todo fix reference to selected month
                                if (new Date(x.d_start) <= new Date(date) && new Date(x.d_end) >= new Date(date)) {
                                    return true;
                                }
                            });
                        }

                        //disable past and holidays
                        if (date < allowedCancelTime || f) {
                            //todo mark day
                            return true;
                        } else {
                            return false;
                        }
                    },
                    header: false,
                    footer: false,
                    rangesClasses: [
                        //mark chosen days
                        {
                            // string CSS class name for this range in "cssClass" property
                            cssClass: 'chosen', //string CSS class
                            // Date Range in "range" property
                            range: function (d) {
                                for(let i in doc.proposals) {
                                    let tmp = new Date(doc.proposals[i].d_proposal);

                                    if(tmp.getYear() == d.getYear() && tmp.getMonth() == d.getMonth() && tmp.getDate() == d.getDate()) {
                                        return true;
                                    }
                                }

                                return out;
                            }
                        }
                    ],
                    on: {
                        change: (e, date) => {
                            let s = $f7.store.state.settings.openings[date[0].getDay()];
                            let b = $f7.$('.popover-date button');
                            //exclude openings
                            b[0].disabled = !s.s1 && !s.e1;
                            b[1].disabled = !s.s2 && !s.e2;

                            renderDay(date[0]);
                        }
                    }
                });

then i tried a diferent approch by setting the ranges like this:
//refresh cal
let dates = [];
for (let i in doc.proposals) {
let tmp = new Date(doc.proposals[i].d_proposal);

        if(tmp) {
            dates.push(tmp);
        }
    }

    calendarModal.params.rangesClasses.push({cssClass: 'chosen', range: dates});
    calendarModal.update();

i checked in the debugger that dates is an array with 3 date objects in it. and still no success, what can i do? i got this idea from this topic

i am using f7 v6.x

2

Would be great if you can create a minimal reproduction live example using one of the templates mentioned here How to ask a good question on forum

3

i solved it by defining a constant function that steps through a array instead of trying to set a array in the calendarModal.

{
                        // string CSS class name for this range in "cssClass" property
                        cssClass: 'chosen', //string CSS class
                        // Date Range in "range" property
                        range: function (d) {
                            let out = false;
                            for(let i in doc.proposals) {
                                let tmp = new Date(doc.proposals[i].d_proposal);
                                if(tmp.toLocaleDateString() == d.toLocaleDateString()) out = true;
                            }
                            return out;
                        }
                    }