Only allow bookings in specific time slots per day

#1

Hi

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

#2

Hi @aaronbrockhurst,

The scheduler provides few options for that:

1.) Blocking and Marking Dates:
https://docs.dhtmlx.com/scheduler/limits.html

This functionality allows you, to block some time ranges, which will forbid creating events on them, like in the following section:
https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html

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:
https://docs.dhtmlx.com/scheduler/timeline_view.html

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;
};

Sample:
https://docs.dhtmlx.com/scheduler/samples/11_scales/04_timeline_ignore.html

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:
http://snippet.dhtmlx.com/5/c82a36f24

#3

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){
  if(is_new){
    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):
http://snippet.dhtmlx.com/5/5fcea0aa3

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.