Events remove issue.

[ijunaid8989]

I have added full calendar as

                <full-calendar
                :config="config"
                @event-created="eventCreated"
                @event-selected="eventSelected"
                @event-resize="eventResized"
                :event-sources="eventSources"
                ref="calendar">
                </full-calendar>

other methods are working fine. but eventSources is not working as its expected

this is data config

    data: () => {
      return {
        showCalendar: false,
        status: "",
        storage_duration: 0,
        interval: 0,
        schedule: null,
        api_key: "",
        api_id: "",
        exid: "",
        ajaxWait: false,
        events: null,
        config: {
          axisFormat: 'HH',
          defaultView: 'agendaWeek',
          allDaySlot: false,
          slotDuration: '00:60:00',
          columnFormat: 'ddd',
          defaultDate: '1970-01-01',
          dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
          eventLimit: true,
          eventOverlap: false,
          eventColor: '#458CC7',
          firstDay: 1,
          height: 'auto',
          selectHelper: true,
          selectable: true,
          timezone: 'local',
          header: {
            left: '',
            center: '',
            right: '',
          },
          header:false
        }
      }
    },

    computed: {
      eventSources () {
        return [{
          events: this.events
        }]
      }
    },

    methods: {

      doThis(schedule) {
        console.log(schedule)
        console.log("test")
        this.events = [
          {
            _id: "0",
            start: '1969-12-29T08:00:00',
            end: '1969-12-29T18:00:00',
          },
          {
            _id: "1",
            start: '1969-12-30T08:00:00',
            end: '1969-12-30T18:00:00',
          },
          {
            _id: "2",
            start: '1969-12-31T08:00:00',
            end: '1969-12-31T18:00:00',
          },
          {
            _id: "3",
            start: '1970-01-01T08:00:00',
            end: '1970-01-01T18:00:00',
          },
          {
            _id: "4",
            start: '1970-01-02T08:00:00',
            end: '1970-01-02T18:00:00',
          },
        ]
      },

And I am trying to clear all events like this

      clearAllEvents() {
        var events = this.$refs.calendar.fireMethod('clientEvents');
        console.log(this.events)
        this.events = null
        console.log(this.events)
        if (events.length > 0) {
          for (var i = 0; i < events.length; i++) {
            this.$refs.calendar.fireMethod('removeEventSources', events[i]._id);
          }
        }
      },

But instead of clearing it, whenever I load calendar again, it duplicates the events in design. again and again. I have also used removeEvents Can anyone tell where I am wrong?

[MiguelNepomuceno]

@ijunaid8989 what does var events = this.$refs.calendar.fireMethod('clientEvents'); return for you? You also need to refer to the event source id, not the event id itself when using the removeEventSources method. To remove all events sources, you don't need to pass in the event id; just use:

this.$refs.calendar.fireMethod('removeEventSources');

[ijunaid8989]

I just removed this package and moved to FullCalendar as the new version doesn't use any jquery