Cell mode on month view?

Scheduler Javascript
#1

Hi there,

I’m trying to create a custom month view, where I want to display the number of events per day instead of the events themselves. Is this possible with the month view? I have found something similar in the cell mode in timeline views, but timeline view is not appropriate as you have days spanning only x axis.

Thanks
Dimitris

#2

There is no simple way for such task - it will require relative complex customization.
You can contact sales@dhtmlx.com about that ( they will provide costs and estimates )

#3

In case, if anyone else encounters a similar issue:

It can be implemented using scheduler.addMarkedTimespan() method. You need to iterate all days during the month, count events for each day by scheduler.getEvents() and then specify the result in the html parameter of addMarkedTimespan.

scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){
  scheduler.deleteMarkedTimespan();
  return true;
});			


scheduler.attachEvent("onViewChange", function (new_mode , new_date){
  if(new_mode == "month")
    addEvCount();
});


function addEvCount(){
  var startDate = scheduler.getState().min_date;
  var endMonthDate = scheduler.getState().max_date;
  
  while(startDate.getTime() < endMonthDate.getTime()){
    var endDayDate = scheduler.date.add(startDate, 1, 'day');
    var evs = scheduler.getEvents(startDate, endDayDate);
    
    if(evs.length){
      scheduler.addMarkedTimespan({
        start_date: startDate,
        end_date: endDayDate,
        html:"<div style='text-align:center;'><b>"+evs.length+"</b></div>",
        css: "color"
      });
    }
  
    startDate = endDayDate;
  }

  scheduler.updateView();
}

Please check how it works in the snippet.

To hide all events, use also Filtering Events.

 scheduler.filter_month = function(id, event){
       return false; // event will not be rendered
 }

The updated demo only with numbers and without rendered events.

Related docs: addMarkedTimespan(), getEvents(), Filtering.