Custom Month Views

Scheduler Javascript
#1

Hi,

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?

Thanks

Neil :wink:

#2

Hello,

Please check the following sample:
\scheduler\samples\06_timeline\01_slots.html

For now there is no easy option to do so on Month view. If that’s really important for you project you can email us - sales [at] dhtmlx.com to customize it for you.

Kind regards,
Ilya

#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.