ng-fullcalendar - eventReceive - PullRequest
Новая
       23

ng-fullcalendar - eventReceive

0 голосов
/ 17 декабря 2018

Я работаю с 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] => всегда получаю "undefined" ...

enter image description here

Второй вопрос: как я могу начать некоторые из них со значениями?Мне не удается адаптировать метод jQuery Fullcalendar eventReceive https://fullcalendar.io/docs/eventReceive с помощью ng-fullcalendar ...

Я имею в виду:

data-duration = '02: 00 'работает

но data-event = '{"id": 1}' не работает

Конечная цель - инициализировать событие "id", изменяемое с помощью моего идентификатора билета (idaiticket)

1 Ответ

0 голосов
/ 13 марта 2019

Я использовал метод 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;
})
...