javascript - ng-fullcalendar - 事件接收

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 - ngFor 循环中的外部事件）：

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

我是说 ：

数据持续时间='02:00' 有效

但 data-event='{"id": 1}' 不起作用

最终目标是使用我的票证 ID (idaiticket) 初始化事件“id”变量

标签： javascriptangulardrag-and-dropfullcalendar

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