Webix scheduler - select a day

Webix JS
#1

Hi,

I am enhancing the accessibility support of the webix scheduler

  1. Go to http://docs.webix.com/samples/62_scheduler/04_customization/02_templates.html
  2. Select month view
  3. Use tab to focus on a day
  4. Use arrow keys to move between days
  5. My problem is that only the focus moves between days, you can’t select that day and see the events just by using the keyboard (enter or space do nothing). You have to click on the day to see the events of that day. How can you simulate that click, so that when you use the arrows you also see the events of the day? $(".webix_cal_day ").click() does not work.

Thank you,
Stefanos

#2

I can confirm the issue. We will include a fix in the next build ( Februray )
If you have a support subscription and need the fix ASAP, please contact us by email.

#3

Thank you for the reply.

We do have a licence, I’m trying to find more about it right now and request a fix.

PS: the reason I couldn’t simulate the click with JQuery was that the DOM is destroyed and the nodes are attached again when you click on a day, which makes customization with JQuery painful.

#4

Is there a suggestion for this problem, that the DOM is destroyed every time we click on a day?

I want to enhance the keyboard accessibility, but the event does not fire because the DOM element is destroyed. The only trick I can think of is mark that element, wait for the dom to be generated again, and fire the event on the new element, which feels hacky,

#5

I can suggest the following solution for simulating click events:

webix.UIManager.addHotKey("enter", function(view){
       webix.html.triggerEvent(document.activeElement, "MouseEvents", "click");
},$$("scheduler").$$("calendar"));

http://webix.com/snippet/3f4f5d8e

But note that this solution will work stable only with the month view.

#6

Or, even better, you can directly call the click logic:

webix.UIManager.addHotKey("enter", webix.bind(function(view){
     var date = view.getSelectedDate();
     if(date) this.setDate(date);
}, $$("scheduler")), $$("scheduler").$$("calendar"));

http://webix.com/snippet/9d45ce4b