Fullcalendar events are not editable

Question

I wanted to import the events of a private google calendar into the fullCakendar using the first answer given in Fullcalendar: can it work with Google Calendars set to private? . I am using the example given in http://plnkr.co/edit/tkK8rk?p=preview and tried to modify it to suit my needs. I included the following code in the angular-ui-calendar.js after line 34 :

    var extras = {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },

      //events: $.fullCalendar.gcalFeed($feed_url.val()) ,
      selectable: true,
      selectHelper: true,


      select: function(start, end) {
        var title = prompt('Event Title:');
        var eventData;
        if (title) {
          eventData = {
            title: title,
            start: start,
            end: end
          };
          scope.calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
        }
        scope.calendar.fullCalendar('unselect');
      },


      editable: true,
      eventStartEditable : true ,

      allDayDefault : false ,
      droppable: true, // this allows things to be dropped onto the calendar
      //eventLimit: true,
      eventDurationEditable : true ,

      eventRender: function (event, element) {
             element.bind('mousedown', function (e) {
              if (e.which == 3) {
                   scope.calendar.fullCalendar('removeEvents',event._id);
              }
           });
         },

    } ;
    scope.calendar.fullCalendar(extras);

Everything is working properly but the calendar is not supporting dragging of events and changing duration. I cant see what the problem is. Can someone help me ?

you need some jquery UI files to make this happen http://fullcalendar.io/docs/dropping/droppable/ — Prasanth Jaya, May 25 '15 at 04:13
vote my comment so that it will help others to figure it easy.. — Prasanth Jaya, May 27 '15 at 06:38

score 0 · Answer 1 · answered Jun 01 '22 at 23:04

You have to install this plugin interactionPlugin by npm install --save @fullcalendar/interaction then include it in the app.module.ts like this

import interactionPlugin from '@fullcalendar/interaction'; FullCalendarModule.registerPlugins([ resourceTimelinePlugin, interactionPlugin, ]);

Fullcalendar events are not editable

1 Answers1