[solved] RangesClasses Calendar

Hi. Ask for advice. I use different colors to highlight dates in the calendar.

var calendarInline = app.calendar.create({
  ...
  rangesClasses: [
        {
        cssClass: 'day-busy',
            range: [ new Date(2018, 03, 04), ... , ... ], 
        },
        {
        cssClass: 'day-off',
            range: [new Date(2018, 01, 01), ... , ... , ... ],
        }
    ],
...
});

Get a list of dates from the mysql table. But I don’t understand the syntax of inserting an array into the calendar when it is loaded…
Thanks fo help

var calendar = app.calendar.create(...);

// after you have your ajax data
calendar.params.rangeClasses = [ ... new range classes ... ];

// call update
calendar.update();

I have problems with the format of the array for the calendar

app.request.postJSON('php/dates.php', function (data) { 
var dates = [];
var i=1;
while (data[i] != null)
{ dates[i]= [ new Date(data[i]) ];
  i++;
} 

calendarInline.value = dates; // this line work     
calendarInline.update(); 
});

values are added well, but if I change the line with the values to:

calendarInline.params.rangesClasses = [ 
    { 
      cssClass: 'day-busy',
      range: dates
    }
 ];

then rangesClasses not work.
May be an incorrect format for the dates array ?

app.request.postJSON - data console.log:

{1: "2018-03-28", 2: "2018-03-07", 3: "2018-03-08", 4: "2018-03-10", 5: "2018-03-02", 6: "2018-03-25", 7: "2018-03-31", 8: "2018-03-31", 9: "2018-04-20", 10: "2018-04-13", 11: "2018-03-23", 12: "2018-03-09", 13: "2018-03-23", 14: "2018-03-07", 15: "2018-03-08"}

can’t also set events
After an attempt to set Events or RangesClasses, the console writes that the CalendarInLine is undefined

It is not an array, it is an object, but must be array

yes, but I’m using dates … this is not array?

...
var dates = [];
var i=1;
while (data[i] != null)
{ dates[i]= [ new Date(data[i]) ];
  i++;
} 
...

Not really
instead of

dates[i]= [ new Date(data[i]) ]

Try

dates.push( new Date(data[i]) )

Thank You, Vladimir.
I tried… the array returned like this, but without success. Didn’t understand this magic.
After long manipulations, the code that works:

  app.request.postJSON('php/dates.php', function (data) { 
    var i=1;
    var dates = [];
      while (data[i] != null) {
        var date = new Date(data[i]);
        dates[i-1] = new Date(date.getFullYear(), date.getMonth(), date.getDate());
        i++;
      } 
      calendarInline.params.rangesClasses = [{ cssClass: 'day-busy', range: dates }]; 
      calendarInline.update();
  });

I divide the date into parts and collect it again. Miracle

var data={1:"2018-03-28",2:"2018-03-07",3:"2018-03-08",4:"2018-03-10"};
var dates=[];
for(var k in data){
  dates.push(data[k]); //=> need to convert after
  //dates.push(new Date(data[k]));//=> no need to convert after
}
console.log(dates); //=> ["2018-03-28","2018-03-07","2018-03-08","2018-03-10"]
var convert=dates.map(function(d){return new Date(d)});
console.log(convert); //=>[Wed Mar 28 2018 02:00:00 GMT+0200 (CEST), Wed Mar 07 2018 01:00:00 GMT+0100 (CET), Thu Mar 08 2018 01:00:00 GMT+0100 (CET), Sat Mar 10 2018 01:00:00 GMT+0100 (CET)]
1 Like

Ok. Try this array in the rangeClasses… will not work. It’s unexplainable

http://framework7.io/kitchen-sink/
open console:

var data={
  red:["2018-03-01","2018-03-02","2018-03-03","2018-03-04"],
  green:["2018-03-05","2018-03-06","2018-03-07"],
  yellow:{
    from:"2018-03-08",
    to:"2018-03-11"
  },
  convert:function(d){
    var i=d.split(/[-]/);return new Date(i[0],i[1]-1,i[2]);
  }
};

var converted={
  red:data.red.map(function(d){return data.convert(d);}),
  green:data.green.map(function(d){return data.convert(d);}),
  yellow:{}
};
for (var k in data.yellow){
  converted.yellow[k]=data.convert(data.yellow[k]);
}

var calendar=app.calendar.create({inputEl:'#app',
  rangesClasses:[
    {// range:function
      cssClass:'bg-color-red',
      range:function(date){
        return converted.red.filter(function(d){
          return d.getTime()===date.getTime();
        }).length;
      }
    },
    {// range:array
      cssClass:'bg-color-green',
      range:converted.green
    },
    {// range:obj
      cssClass:'bg-color-yellow',
      range:converted.yellow
    }
  ]
}).open();

// your code

var calendar=app.calendar.create({
  inputEl:'#app',
  rangesClasses:[]
}).open();

function convert(d){
  var i=d.split(/[-]/);
  return new Date(i[0],i[1]-1,i[2]);
}
app.request.postJSON('php/dates.php',function(data){
  var dates=[]
  for (var k in data){
    dates.push(convert(data[k]));
  }
  app.calendar.get().params.rangesClasses.push({
    cssClass:'bg-color-green',
    range:dates
  });
  app.calendar.get().update();
});

// kitchen-sink

var calendar=app.calendar.create({
  inputEl:'#app',
  rangesClasses:[]
}).open();

function convert(d){
  var i=d.split(/[-]/);
  return new Date(i[0],i[1]-1,i[2]);
}

setTimeout(function(){
  var data={1:"2018-03-01",2:"2018-03-02",3:"2018-03-03",4:"2018-03-04"};
  var dates=[]
  for (var k in data){
    dates.push(convert(data[k]));
  }
  app.calendar.get().params.rangesClasses.push({
    cssClass:'bg-color-green',
    range:dates
  });
  app.calendar.get().update();
},0);

Thank you for the detailed comments!