CODEWITHSUNDEEP
angulartypescriptangular12
nop
nop

Reputation: 6359

Draggable events into a FullCalendar

I'm using PrimeNG and I want to accomplish draggable events into a calendar in Angular, just like in the demo here. This is the live demo. The problem is that the example is in Vanilla JS and angular needs it on typescript.

I created a StackBlitz where I attempted to do so, but the calendar is simply not showing, because of the typescript code.

Upvotes: 1

Views: 2150

Answers (2)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9953

First note that you forgot to add fullCalendar directive. Add below code to html:

<p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>

Then in your option add editable:true.

Note that you can use ngModel to check the checkbox is checked or not but you need to add import { FormsModule } from '@angular/forms'; in your schedule.module. I fixed the issue and updated sample link.

Here is working sample.

But I think you also want to drag from other input to fullCalendar. So you need to implement draggable event in your service. This what you want to do second part

Upvotes: 3

Yogen Darji
Yogen Darji

Reputation: 3300

As you are using primeng, you have to add calendar component from primeng like

  <p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>

Now update your this.options to accept droppable event.

  droppable: true,

Also make your events as Draggable like below

let draggableEl = document.getElementById('external-events');

    new Draggable(draggableEl, {
      itemSelector: '.fc-event',
      eventData: function(eventEl) {
        return {
          title: eventEl.innerText
        };
      }
    });

Full Sample StackBlitz where I have modified your code

Upvotes: 1

Related Questions