Adding events on top of other events

[Mario]

Hi all,

To put things in context first, this is the requirement I have got:
There are two groups of users - A and B. "A" users can create so-called "disponibility" events.
"B" users should be able to add "reservation" events to the scheduler only in the boundaries of the "disponibility" events created by "A" users. In case they click outside a "disponiblility" event, no scheduler event is created, just a popup saying "Please select a time whiting a disponibility", or something in that sense.
When a "B" user loads the scheduler, he should see all the "disponibility" events, plus eventually his own "reservation" events;

I'm using MVC4,Razor, Javascript/Jquery.

So far I have managed to block "B" users from creating an event outside events created by "A" users.

What I'm struggling with is how to make "B" users create their events on top of the events of "A" users. The idea I have for now, is to track the Edit event coming from the scheduler and transform it to an Add event. Supposedly this should show up the popup for adding an event.

The problem I see, not sure if this is a bug or not, when I call $scheduler.addEvent(...), the popup appears for a fraction of a second, then there is some flickering happening on the scheduler (refresh probably) and the popup disappears.
Here's a portion of the code:

=> event binding when declaring the scheduler

.Events(events => events.Edit("scheduler_edit")

=> the respective javascript function to handle the above event

function scheduler_edit(e) {
    if (e.event.IsAppointment == true) {
             e.preventDefault();
        $scheduler = $("#scheduler").getKendoScheduler();
        $scheduler.addEvent({ start: e.start,  end: e.end  });
}

I'd like to have an advice about :
- is this approach the right one ?
- is it normal that the "add event" popup is disapearing after the addEvent call.

Thanks a lot.

[Atanas Korchev]

Hello Mario,

Indeed the scheduler updates in this case which will close any newly created popups.

You can use setTimeout to prevent the scheduler from closing the popup:

        e.preventDefault();
        setTimeout(function() {
          var scheduler = $("#scheduler").data("kendoScheduler");
          scheduler.addEvent( { title: "New event", start: e.event.start, end: e.event.end })
        });

Here is a live demo that shows that: http://dojo.telerik.com/@korchev/AtoMa

Regards,
Atanas Korchev
Telerik

 

 

[Mario]

Thanks, works as a charm. I've seen this way of calling that function but had no idea what it is for.

[Mario]

The other half of the question is still pending though, can we have events on top of each other and not in parallel.
From what I have found as docs, this is not possible, they'll be displayed side by side.

[Atanas Korchev]

Hi Mario,

Indeed rendering events on top of each other is not supported. Events are always rendered next to each other as in Microsoft Outlook or Google Calendar.

Regards,
Atanas Korchev
Telerik

 

 

[Mario]

Indeed, that is my understanding too.
I'm trying another approach now - on the bound/binding events, to try to detect whish time slot fall under an event, and assign them an additional css class. All the other time slots will be marked as non working hours. This way I could be able to generate some kind of "sparse" working hours. Clicking outside them will be blocked, so the "B" users will be able to click/add events just in these timeslots.