Add listener for eventRender events

[dschreij]

I have bumped into several occasions now in which it would be useful to be able to listen for fullCalendar's eventRender events. This event is fired when a new event is rendered on the calendar and allows to change markup or attach other functionality to the DOM element that represents the event in the calendar. This is for instance useful for initialising and attaching a [bs popover] or [qtip] to the event's DOM element when it is created. The visibility of the attached popovers can then be toggled using the existing eventSelected event. Here is an example of this with a bootstrap popover and with an imaginary event-rendered callback:

<template>
    <full-calendar 
    ref="calendar" 
    @event-selected="eventSelected"
    @event-rendered="eventRendered"
    ></full-calendar>
</template>

<script>
new Vue({
    ...
    methods: {
        eventRendered(event, element, view){
            $(element).popover({
        html: true,
        container: '.fc-scroller',
        placement: 'auto right',
        title: event.title,
        content: 'Start: ' + event.start + '<br />End: ' + event.end
        });
        },
        eventSelected(event, jsEvent){
            $(jsEvent.target).popover('toggle');
        }
    }
    ...   
})
</script>

I currently solve this by manually linking fullCalendar's eventRender() callback to a vue-method in my component's mounted section, but I think it is more elegant to integrate this in the full-calendar component itself.

What do you think? Would you like me to send a pull request with this feature?

[dschreij]

Hmm I just see now that this is a non-issue, as the eventRender callback can be specified in the custom config object that is passed to fullCalendar upon initialisation. Still, what do you think about this addition regarding that other events also have specific vue2 listeners in your component?

[BrockReece]

Yeah, that sounds good to me. If you would like to, send a PR over.

Give me a shout if you need a hand with it?

Cheers Brock

[BrockReece]

Yeah I agree

[dschreij]

Thanks! Should not be a problem as I can just mimic the code you used for the other events. I hope to have it done in the next few hours!

[Altamill]

@dschreij I have used your method for the following times.

TypeError: $(...).popover is not a function

    eventSelected(event, jsEvent) {
        $(jsEvent.target).popover('toggle');
        this.selected = event;
    },

    eventRender(event, element) {
        $(element).popover({
            html: true,
            container: '.fc-scroller',
            placement: 'auto right',
            title: event.title,
            content: event.description,
        });
    },

    <full-calendar
        id="calendar"
        ref="calendar"
        :event-sources="eventSources"
        @event-selected="eventSelected"
        @event-created="eventCreated(true, $event)"
        @event-resize="eventResize"
        @event-drop="eventResize"
        @event-render="eventRender"
        :config="config">
    </full-calendar>