Vue directives and Full Calendar

[gbelot2003]

Hello there, does anybody have an example or illustration of how implement vuejs + fullcalendar and re-render the content on new events update, I just have a headache about it, it should be more easy that it seems to me, but I already have 48 hours fighting with this.

Thanks for any hint

[kaorun343]

Hello. Did you try to use component instead of directive to wrap fullcalendar? It will work good to add v-el to a div element and initialize fullcalendar at ready or attached method.

[gbelot2003]

No, I did't try using component, Ill give a shoot!!

[brianvoe]

Has anyone figured this out yet?

[gbelot2003]

I didn't find a clear answer sadly, so I switch to angularjs by the time :(

[brianvoe]

I eventually did get this to work. If you would like to see what i did just let me know.

[gbelot2003]

yes, please!!!

[brianvoe]

Vue.elementDirective('calendar', { twoWay: true, priority: 1000, params: ['options', 'eventsfunction', 'eventclick'],

    bind: function () {
        var self = this;

        $(self.el).fullCalendar({
            // Header Style
            header: {
                left: 'title',
                center: '',
                right: 'today prev,next agendaWeek'
            },
            editable: true,

            // Events function trigger callback
            events: function (start, end, timezone, callback) {
                self.params.eventsfunction(start, end, callback);
            },

            eventClick: function (calEvent, jsEvent, view) {
                self.params.eventclick(calEvent);
            }
        });

        setTimeout(function () {
            $(self.el).fullCalendar('render');
        }, 300);

    },
    update: function (value) {
         var self = this;
          $(self.el).fullCalendar('refresh');
    },
    unbind: function () {
        var self = this;
        $(self.el).fullCalendar('destroy');
    }
});

Here is what i built that i got using for me. So what i did is kinda reversed it. Instead of rerendering the calendar on data change i implemented their callback function. So when you click on any buttons on the calendar it makes a request for the information that months or weeks or whatever is being shown at the time. If you want to want outside sources to tell fullcalendar to update the events you just need to send a trigger function that calls $(self.el).fullCalendar('refresh');

[gbelot2003]

o boy, I absolute missed this... update: function (value) { var self = this; $(self.el).fullCalendar('refresh'); }, unbind: function () { var self = this; $(self.el).fullCalendar('destroy'); }

thanks A LOT!!!