[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"

[martuico]

I did a drag and drop events to calendar FYI: events data doesn't update when drag and drop is performed here's my config

data(){
 return {
    events: [],
                config: {
                    header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek'
                    },
                    editable: true,
                    droppable: true, // this allows things to be dropped onto the calendar
                    dragRevertDuration: 0,
                    events: this.events,
                    drop: function(event, jsEvent, ui, view) {
                        // is the "remove after drop" checkbox checked?
                        // if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove();
                            // projection_drops = $(this).text().trim()
                        // }
                        // this.$data.events.push( { title: $(this).text() })
                    },
                    eventDragStop: function( event, jsEvent, ui, view ) {
                        if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
                            this.$refs.calendar.fullCalendar('removeEvents', event._id);
                            var el = $( "<div class='fc-event'>" )
                                        .appendTo( '#external-events-listing' )
                                        .text( event.title );

                            el.draggable({
                                zIndex: 999,
                                revert: true,
                                revertDuration: 0
                            });
                            el.data('event', { title: event.title, id :event.id, stick: true });
                        }
                    },
                    defaultView: 'month',
                }
     }
}`

here's when updating events

saveProjectionPlot(){
                const self = this
                self.expection_plot = $(this.$refs.cal.$el).fullCalendar('clientEvents');
                self.events = self.expection_plot
                self.timelineItems = self.expection_plot
            }

[BrockReece]

Hi, are you referring to the events array in the parent component? When is saveProjectionPlot called?

[martuico]

When all events are being in the calendar this will generate a VisChart. it duplicates list of events. anyhow I change the code to this. Now it is working

<template>
  <div ref="calendar"></div>
</template>
<script>
    import 'fullcalendar'
    export default {
        props: {
            events: {
                type: Array,
                required: true
            },

            editable: {
                type: Boolean,
                required: false,
                default: false
            },

            droppable: {
                type: Boolean,
                required: false,
                default: false
            },
        },

        data: function(){
            return {
                cal: null
            }
        },

        mounted(){
            var self = this;
            self.cal = $(self.$el);

            var args = {
                header: {
                    left:   'prev,next today',
                    center: 'title',
                    right:  'month,agendaWeek,agendaDay'
                },
                height: "auto",
                allDaySlot: false,
                slotEventOverlap: false,
                timeFormat: 'HH:mm',

                events: self.events,

                dayClick: function(date){
                        self.$emit('day::clicked', date);
                        self.cal.fullCalendar('gotoDate', date.start);
                        self.cal.fullCalendar('changeView', 'agendaDay');
                },

                eventClick: function(event)
                {
                        self.$emit('event::clicked', event);
                }
            }

            if (self.editable){
                args.editable = true;
                args.eventResize = function(event){
                    self.$emit('event::resized', event);
                }

                args.eventDrop = function(event){
                    self.$emit('event::dropped', event);
                }
            }
            if (self.droppable){
                args.droppable = true;
                args.eventReceive = function(event){
                    self.$emit('event::received', event);
                }
            }

            self.cal.fullCalendar(args);

        }
    }
</script>

[BrockReece]

It looks like you are no longer using this lib in your last code example, but I am glad you have got it working.