ng-fullcalendar - 事件接收答案

【问题标题】：ng-fullcalendar - eventReceiveng-fullcalendar - 事件接收
【发布时间】：2019-05-18 02:24:45
【问题描述】：

我使用 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”变量

【问题讨论】：

标签： javascript angular drag-and-drop fullcalendar

【解决方案1】：

我使用 javascript 方法（库的 v4）来创建 Draggable 元素，如下所示：

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

【讨论】：