Calendar rangesClasses not working

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($ {
                            f = $ => {
                                //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 = $[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;


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) {

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

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

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