Adding events on top of other events

6 posts, 1 answers
  1. Mario
    Mario avatar
    4 posts
    Member since:
    Oct 2014

    Posted 06 Nov 2014 Link to this post

    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.
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 10 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Mario
    Mario avatar
    4 posts
    Member since:
    Oct 2014

    Posted 11 Nov 2014 in reply to Atanas Korchev Link to this post

    Thanks, works as a charm. I've seen this way of calling that function but had no idea what it is for.
  4. Mario
    Mario avatar
    4 posts
    Member since:
    Oct 2014

    Posted 11 Nov 2014 in reply to Mario Link to this post

    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.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Mario
    Mario avatar
    4 posts
    Member since:
    Oct 2014

    Posted 13 Nov 2014 in reply to Atanas Korchev Link to this post

    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.
Back to Top