'+' for add new event in every timeslot in dhx Scheduler?

Scheduler Javascript
#1

How can I add ‘+’ to add new events in every timeslot in dhx Scheduler?

#2

Hi!
You can check scheduler.addMarkerTimespan method and this example:
https://docs.dhtmlx.com/scheduler/api__scheduler_addmarkedtimespan.html

Each time a view is repainted (https://docs.dhtmlx.com/scheduler/api__scheduler_onbeforeviewchange_event.html), you can iterate visible dates of the view and add a marker into each slot.
In order to do this, you’ll need to get min/max dates of that view from API event arguments and the time step from your config:

scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){
    // getting min/max dates of the view
    var viewStart = scheduler.date[mode + "_start"](new Date(date));
    var viewEnd = scheduler.date.add(viewStart, 1, mode);
    
    // removing timespans added during previous onBeforeViewChange call
    scheduler.deleteMarkedTimespan({ type:"highlighted_timespan"});

    // iterate time slots
    var currentDate = viewStart;
    while(currentDate.valueOf() < viewEnd.valueOf()){
      if(currentDate.getHours() < scheduler.config.first_hour){
         currentDate.setHours(scheduler.config.first_hour);
      }
      var stepEnd = scheduler.date.add(currentDate, scheduler.config.time_step, "minute");

      var startDateString = scheduler.templates.format_date(currentDate);
      var endDateString = scheduler.templates.format_date(stepEnd);

      // add a marker into each time slot, 
      // for convenience you can put slot dates into data attributes of the marker element
      scheduler.addMarkedTimespan({
        start_date: currentDate,
        end_date: stepEnd,
        css: "highlighted_timespan",
        type:"highlighted_timespan",
        html: "<div style='width:100%;' " +  
        " data-start-date='"+startDateString+"' data-end-date='"+endDateString+"'>+</div>"
      });
      currentDate = stepEnd;
      
      if(currentDate.getHours() >= scheduler.config.last_hour){
        currentDate = scheduler.date.add(currentDate, 1, "day");
        currentDate.setMinutes(0);
        currentDate.setHours(scheduler.config.first_hour);
      }      
    }
    return true;
});

Then, you’ll be able to detect mouse click (https://docs.dhtmlx.com/scheduler/api__scheduler_onemptyclick_event.html) on a time slot and call scheduler.addEventNow in order to create a new event


scheduler.attachEvent("onEmptyClick", function(date, e){
   if(e.target.closest(".highlighted_timespan")){
      // read slot dates that we added into the marker element in scheduler.addMarkedTimespan
      var startAttr = e.target.getAttribute("data-start-date");
      var endAttr = e.target.getAttribute("data-end-date");
     
      scheduler.addEventNow({
         start_date: scheduler.templates.parse_date(startAttr),
         end_date: scheduler.templates.parse_date(endAttr)
      });
   }
});

here is the complete example:
https://snippet.dhtmlx.com/5/b093714e6

Please note that markers won’t be visible in the Month view, there are certain workarounds to display markers in months, but you won’t be able to have separate time slots inside a day in month view.