Draggable events into a FullCalendar

Question

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.

Alireza Ahmadi · Accepted Answer · 2021-07-05T10:11:46.370

2

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

edited Jul 05 '21 at 10:11

answered Jul 05 '21 at 06:59

Alireza Ahmadi

8,579
5
15
42

Thank you! Yours work better than yogen darji's (the drag and drop works after you put an item), but "remove after drop" button doesn't work. – nop Jul 05 '21 at 08:48
Simply you can add`eventEl.parentNode.removeChild(eventEl)` in eventData function of Draggable, if yor check box has checked – Alireza Ahmadi Jul 05 '21 at 09:08
I edit my answer to remove tag after dropping. Please check – Alireza Ahmadi Jul 05 '21 at 09:22
Not yet. How do I check if the checkbox is checked? – nop Jul 05 '21 at 09:55
you can use `ngModel` directive but seems that you didn't add `FormsModule` in `schedule.Module` and ngModel not working! I fixed it and updated my answer – Alireza Ahmadi Jul 05 '21 at 10:08

score 1 · Answer 2 · answered Jul 05 '21 at 07:09

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

Thank you! It works but once I put an item on the calendar, I'm not able to drag it from there back to the menu. Also "remove after drop" doesn't work as well. — nop, Jul 05 '21 at 08:44

Draggable events into a FullCalendar

2 Answers2