Search code examples
javascriptangularjseventsfullcalendarfullcalendar-scheduler

How can I add an event inside an other event - fullcalendar

I try to create a roster based on AngularJS. For this project I'm using the fullcalendar (scheduler version).

This is the current state that I have:

enter image description here

The goal off all is, I want to drag and drop my Employees inside a Work Layer. For example, "Haris Bjelic", inside my Work Layer (displayed as "WL from 01.06 - 04.06").

Then I know "Haris Bjelic" need to Work from 01.06 to 04.06 (without any break, hehe). First I tried to find a function which gives me a possibility to add an Event inside an other Event. In this case, I created first a layer called 'Work Layer from 01.06. - 04.06' where I can drag&drop any employee in this Layer, to plane their working times.

In the scheduler are my Departments (like Bar, Service etc.) listed on the left side. On the right side are the next days visible.

At the moment I tried this function:

eventOverlap: function(stillEvent, movingEvent) {}

So if I drag and drop "haris bjelic" into 'WL from 01.06 - 04.06', I've access to both events if they overlap togheter. So I tried to get the ID of the 'draggable' event and the ID of the 'WL from 01.06 - 04.06' to set this in a relation on the Database.

If that is done, I want to append the employees name to the 'title' of the Work Layer. The Result need to look like this if I drag&drop "Haris Bjelic" and other employees to "WL from 01.06 - 04.06": 

'WL 01.06 - 04.06
  "Haris Bjelic"
  "Foo Employe"
  2 emplyoee are working in this Layer'

enter image description here This is the result which I wanna get!

With the eventOverlap function, I'm able to access both events. At the moment, when I am dragging "haris bjelic" to the other Event and theOverlap function was triggered, I want to change the title of the Work Layer.

Inside the eventOverlap I tried this:

stillEvent.text += "\n" + movingEvent.text;
element.fullCalendar('updateEvent', stillEvent);

It created a new Events instead to change only the text!

See here:

enter image description here

Why does updateEvent create a new Event instead to update the old event? I put the stillEvent in the updateEvent function.

Solution

  • There is no text property in the event, it is title. I also use this code to remove the movingEvent from the calendar once the title is updated:

            eventOverlap: function(stillEvent, movingEvent) {
            stillEvent.title += "\n" + movingEvent.title;
            $('#calendar').fullCalendar('updateEvent', stillEvent);
            $('#calendar').fullCalendar('removeEvents', movingEvent._id);
            return false;
        },

        eventReceive: function(event) { // called when a proper external event is dropped
            $('#calendar').fullCalendar('removeEvents', event._id);
        },

    This code works in the external-dragging demo bundled with fullCalendar.