Kendo UI Scheduler custom events

[Riccardo]

Hi all,

I use the Kendo UI Scheduler for simple agenda management. What I need to achieve is that a user can click in the scheduler and select a slot (basic behaviour). I don't want a popup to showup but I just need to respond to the selecting of a timeslot in the scheduler. I can use the change event but that one is fired multiple times when I select a few hours for example. 

Is there a way to attach events like mouseup or dragend to respond to this user behaviour? 

I would be thrilled to solve this.

Riccardo Becker

[Atanas Korchev]

Hi Riccardo,

You could still use the change event and check if there are any events selected:

    function scheduler_change(e) {
        if (e.events.length) {
          console.log(e.events[0].title)
        }
    }

Here is a live demo: http://trykendoui.telerik.com/@korchev/abUZ

You can use only jQuery and add a handler for the ".k-event" class: 

  $("#scheduler").on("click", ".k-event", function(e) {
    var scheduler = $("#scheduler").data("kendoScheduler");
    
    var event = scheduler.dataSource.getByUid($(e.currentTarget).attr("data-uid"));
    
    alert(event.title);
  });

Here is another demo: http://trykendoui.telerik.com/@korchev/Idug

Regards,
Atanas Korchev
Telerik

 

 

[Riccardo]

Thanks for your reply and sample!

The sample only calls on change when I select an already existing event. My requirement is that a user can simple select some slots in the scheduler and I save this selection.

regards,
Riccardo

[Atanas Korchev]

Hi Riccardo,

The change event is fired when the user selects slots too. They are available in e.slots. 

Regards,
Atanas Korchev
Telerik

 

 

[Riccardo]

Oh yes I see now. Selected 5 slots raise 5 events :-) Is there a way to detect when the user releases the mousebutton (dragend e.g.?). Because using the change event would cause multiple updates in the database and I only need to do that after the mouse was released.

regards

[Atanas Korchev]

Hi,

There is no such event right now. Perhaps you can use the mouseup event in a way similar to using the click event in my second example.

Regards,
Atanas Korchev
Telerik

 

 

[Riccardo]

$("#scheduler").on("mouseup", ".k-event", function(e) {
    alert('here mouseup!')
  });

this doesn't seem to work. Am I missing something?

thanks

[Atanas Korchev]

Hi,

For the free slots you will need the following code:

  $("#scheduler").on("mouseup", ".k-scheduler-content td", function(e) {
      alert("up");
  });

Regards,
Atanas Korchev
Telerik

 

 

[Riccardo]

Thanks, works like a charm now!

regards,
Riccardo