angulartypescriptangular12

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.

Solution

  • 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