ng-fullcalendar-eventReceive

Question

我使用ng-fullcalendar 1.7.1和fullcalendar 3.6.1 我使用Angular 6。

我有带有外部元素的callendar。我尝试使用eventReceive方法将其转换为事件。

<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>

这是初始化外部事件的方式： （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);
  }

这是eventReceive方法：

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]);
    }

第一个问题：如何访问由eventReceive方法传递的数据？

我尝试过event ['title']，event.title，event [0] =>总是得到“未定义” ...

第二个问题：如何使用值初始化其中的一些？ 我无法成功适应jQuery Fullcalendar eventReceive方法 https://fullcalendar.io/docs/eventReceive和ng-fullcalendar ...

我的意思是：

data-duration = '02：00'有效

但是data-event ='{“ id”：1}'不起作用

最终目的是通过我的票证ID（idaiticket）初始化事件“ id”

Answer 1

我使用javascript方法（该库的v4）创建了可拖动元素，如下所示：

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;
})