ng-fullcalendar - eventReceive

Question

I work with ng-fullcalendar 1.7.1 and fullcalendar 3.6.1 I use Angular 6.

I have callendar with external elements. I try to use eventReceive method in order to cast them as events.

<div *ngIf="calendarOptions">
             <ng-fullcalendar #ucCalendar
                    [options]="calendarOptions"
                    (eventClick)="eventClick($event.detail)"
                    (eventReceive)="eventReceive($event.detail)"
                    (drop)="drop($event.detail)"
                    [(eventsModel)]="events"
               >
    </ng-fullcalendar>
</div>

<div class="card-body">
<table id='external-events'  class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
    <thead class="text-warning">
    <tr>
        <th>Sujet</th>
        <th>Type</th>
        <th>Statut</th>
    </tr>
    </thead>
    <tbody  *ngFor="let ticket of ticketList">
    <tr>
        <td #customevents class='fc-event'  data-event='{"id": 1}' data-duration='02:00'>{{ticket.idaiticket}} - {{ticket.message}}</td>
        <td>{{ticket.type}}</td>
        <td><button (click)="removeEvent(ticket.message)"></button></td>
    </tr>
    </tbody>
</table>

This is how externals events are initialized : (ng-fullcalendar - Angular 6 - external events in ngFor loop) :

@ViewChildren('customevents') customevents: QueryList<any>;
---
ngAfterViewInit() {
    setTimeout(() => {
        console.log('jQuery');
        this.customevents.forEach(function (item) {
            // store data so the calendar knows to render an event upon drop
            console.log($(item.nativeElement).text());
            $(item.nativeElement).data('event', {
                title: $.trim($(item.nativeElement).text()), // use the element's text as the event title
                stick: true // maintain when user navigates (see docs on the renderEvent method)
            });
            // make the event draggable using jQuery UI
            $(item.nativeElement).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });

        });
    }, 500);
  }

And this is eventReceive Method :

eventReceive (event, view) {
        console.log('event Receive');
    console.log(event);  // any data linked to the dropped event
    console.log(event.title);
    console.log(event['title']);
    console.log(event[0]);
    }

First question : How can I access data passed by eventReceive method ?

I have tried event['title'] , event.title, event[0] => always get "undefined"...

Second Question : How can I init some of them with values ? I don't succeed to adapt jQuery Fullcalendar eventReceive method https://fullcalendar.io/docs/eventReceive with ng-fullcalendar...

I mean :

data-duration='02:00' works

but data-event='{"id": 1}' doesn't work

The final aim is to init event "id" varaiable with my ticket Id (idaiticket)

MrWiLofDoom MrWiLofDoom · Accepted Answer · 2019-03-13T01:50:26

I used the javascript method (v4 of the library) for creating the Draggable elements like this:

let segmentDraggables = document.getElementsByClassName('segment-card');

this.segments: [
    {
        eventData: {
            segmentId: 1000001,
            title: 'my event',
            duration: '02:00'
        }
    },
    {
        eventData: {
            segmentId: 1000002,
            title: 'my event 2',
            duration: '02:15'
        }
    }
]

this.segments.map((obj, index) => {
    new Draggable(segmentDraggables[index], obj);
    return true;
})

ng-fullcalendar - eventReceive

1 Answers