External events (Angular version)

Hi,

As you know ng-fullcalendar is now deprecated :
https://www.npmjs.com/package/ng-fullcalendar

So is-it possible to “convert” https://fullcalendar.io/docs/external-dragging in Angular version

I have defined calendar in HTML file:

<div *ngIf="options"> <full-calendar #calendar [allDaySlot]=options.allDaySlot [customButtons]="options.customButtons" [defaultView]="options.defaultView" [displayEventEnd]="options.displayEventEnd" [droppable]="options.droppable" [editable]="options.editable" [events]=events [header]="options.header" [height]="options.height" [locale]="options.locale" [plugins]="calendarPlugins" [slotDuration]="options.slotDuration" [slotEventOverlap]="options.slotEventOverlap" (dateClick)="dateClick($event)" (eventClick)="eventClick($event)" (eventDragStop)="dateClick($event)" (eventReceive)="eventReceive($event.detail)" ></full-calendar> </div>

I have defined the list of the elements i want to “drag & drop” on the calendar (html) <tbody > <tr *ngFor="let ticket of ticketList"> <td style="width: 10%"> <button class="btn btn-danger btn-round btn-fab btn-fab-mini"> <i (click)="deleteTicket(ticket.ticketDTO.idaiticket)" class="material-icons" title="Supprimer">delete</i> </button> </td> <td #customevents class='fc-event' [attr.data-idaiticket]="ticket.ticketDTO.idaiticket" data-duration='02:00'>TICKET N° {{ticket.ticketDTO.idaiticket}}</td> <td><b>{{ticket.siteDTO.libelle}}</b></td> <td >{{ticket.ticketDTO.message}}</td> </tr> </tbody>

And in TS file :

@ViewChildren('customevents') customevents: QueryList<any>; @ViewChild('calendar') calendarComponent: FullCalendarComponent; // the #calendar in the template options: OptionsInput; calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin]; events: Intervention [] = []; ticketList: Intervention [] = [];

this.options = { defaultDate: today, allDaySlot: false, defaultView: 'timeGridWeek', displayEventEnd: true, editable: true, locale: frLocale , height: 600, slotDuration : '00:15:00', slotEventOverlap: false, droppable: true, // eventLimit: false, customButtons: { myCustomButton: { text: 'Valider', click: function () { alert('clicked the custom button!'); } } }, header: { left: 'prev, next, today, myCustomButton', center: 'title', right: 'dayGridMonth, timeGridWeek, timeGridDay ' } };

But I dont’succeed to make element “draggable”…

Thank’s in advance

[irustm]

see please demo with External events:

https://stackblitz.com/edit/fullcalendar-angular-demo?file=src%2Fapp%2Fapp.component.html and

https://github.com/ng-fullcalendar/fullcalendar-angular-demo

[chiraggmodi]

is it possible to style the garbed event?