Only allow bookings in specific time slots per day



I need to be able to create bookings in the schedular within specific time instances. As an example we have two slots on a Monday 10am to 12ok and then from 2pm to 4pm. Once set I only want the schedular to accept appoints on the calendar that are in the 10am to 12 or 2 to 4pm slots

many thanks


Hi @aaronbrockhurst,

The scheduler provides few options for that:

1.) Blocking and Marking Dates:

This functionality allows you, to block some time ranges, which will forbid creating events on them, like in the following section:

You are unable to create events in the gray area.

2.) For the “Timeline view”:
Exactly in the timeline view, you can just remove unnecessary hours from the “x-scale” using the ignore_{viewName} property:

Code fragment:

//the cell interval will be daytime from 10.00 till 18.00
scheduler.ignore_timeline = function(date){   // "timeline" is the name of the view
    // non-working hours
    if (date.getHours() < 10 || date.getHours() > 18) return true;


3.) The option is to remove the unnecessary time options from the lightbox select. Unfortunately, there is no built-in function for that, but you can do it manually with the “onBeforeLightbox” event.

The code(for 1 hour time step and default time section) may look like follows:

scheduler.attachEvent("onBeforeLightbox", function(){ 
  var node = scheduler.formSection("time").node; 
  var timeInputs = node.getElementsByTagName("select"); 
  for(i=0; i< timeInputs[0].options.length; i++){
    if(i < 12 || i > 18)
	timeInputs[0].options[i].style.display = "none"
    for(i=0; i< timeInputs[4].options.length; i++){
    if(i < 12 || i > 18)
	timeInputs[4].options[i].style.display = "none"
  return true;

Here is a demo:


Hi @aaronbrockhurst ,

Also, there is another option that I missed, as you can just block event creating, if it’s time out of the allowed range, from the onBeforeEventChanged event:

scheduler.attachEvent("onBeforeEventChanged", function(ev, e, is_new, original){
    var startHours = new Date(ev.start_date).getHours();
    // forbid creating events before the 5 day of the month
    if(startHours > 10 && startHours < 12 || startHours > 14 && startHours < 16){
      return true;
  dhtmlx.message("Events allowed only 10-12 and 14-16")
  return false;

Here is a sample(you can only create events in the range 10-12 and 14-16 hours):

In this case, the only thing that you should implement - is some UI which lets user set allowed time ranges. For example, some date inputs or another UI that will fit your requirements.