Cose lightbox on ESC key and outside click of lightbox

Scheduler Javascript
#1

How can I close the lightbox on ESC key and clicked on outside of lightbox(Gray area)

I called endLighbox handler but it is not triggering because when light box is opened I can not able to click anywhere in the screen. Lightbox gives light gray area to entire screen and I can not able to click anywhere excpet light box. So how can I close lightbox when i calicked on gray area or outside of lightbox and on ESC key.

Thank you.

#2

To hide lightbox onclick outside lightbox, you should just listen click event and if click target is cover you should close lightbox. Someting like this:

dhtmlxEvent(document.body, "click", function(e){
	var boxId = scheduler.getState().lightbox_id;
	if(boxId){
		var el=e?e.target:event.srcElement,
			cover = document.querySelector(".dhx_cal_cover");
			
		if(cover && cover.contains(el)){
			var box = scheduler.getLightbox();
			scheduler.endLightbox(false, box);
		}
	}
});

Lightbox cancels by default after clicking ESC key.

See example: docs.dhtmlx.com/scheduler/snippet/ad816bcc

1 Like
#3

dhtmlxEvent(document.body, “click” works to hide lightbox but ESC key does not work.
I am not using default lightbox. I have my custom lightbox(div). In my custom lightbox if I press ESC key it is not closing. I have also tried keys.edit_cancel = 27 but still it is not working.

following is my implementation code
…
scheduler.startLightbox(id, html(“event_info_form”));
…
scheduler.keys.edit_cancel = 27;

....
#4

You can try to use similar code for ESC key.

dhtmlxEvent(document.body, "keyup", function(e){
   var boxId = scheduler.getState().lightbox_id;
   if(boxId){
      var keyCode = e.keyCode || e.which;
         
      if(keyCode == 13){
         var box = scheduler.getLightbox();
         scheduler.endLightbox(false, box);
      }
   }
});
#5

I’m using the Scheduler 5.3.5 and can confirm that the lightbox is not closing on ESC key neither on outside click.
I’ve followed this step for outside click and it works great
[Cose lightbox on ESC key and outside click of lightbox]

Also for the ESC solution I’m using a combination of functions.
In fact I have two functions for the ESC key. One for in the scheduler window, and another for if lightbox is active

    document.onkeydown = function(evt) {
        evt = evt || window.event;
        if (evt.keyCode == 27) {
           var boxId = scheduler.getState().lightbox_id;
           if(boxId){
                 var box = scheduler.getLightbox();
                 scheduler.endLightbox(false, box);
           } else {
                scheduler.getView('timeline').scrollTo(new Date(Date.now() - 1800000));
           }
        }
    };

which is similar to this

I’m using the Esc to scroll to a particular position on the timeline

#6

Hi @Contente

Yes, you still need to customize the lightbox behaviour to close it on Esc key because it doesn’t work by default.

Regarding to the combination of functions you use - I tried to reproduce it in the snippet system with the Scheduler version 5.3.6 and it works fine, please check: http://snippet.dhtmlx.com/5/d0f1a67f6
If you need help, please provide with more details about it. Unfortunately, it is not very obvious from your post.

Best regards