DHTMLX Scheduler Month View only event count

Question

1) In month view events are visible, instead of those events I want to show the counts only. How this can be achieved in DHTMLX Scheduler JS version.

2) Enable date area click event in month view, not the event_link which directs to day or week view. Just need an event when In month view a date box is clicked I have to load events of that day only on click.

Polina · Accepted Answer · 2020-03-16T16:34:47.930

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.

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.

There is onEmptyClick event which fires when the user clicks on an empty space in the scheduler (not on events). Demo.

DHTMLX Scheduler Month View only event count

1 Answers1