Extend API coverage of fullcalendar events

[croudtech]

Extend API coverage of fullcalendar events

[dschreij]

By the way, I see you provide the option to alter the method callbacks by overwriting them in the config object that can be passed to the component, so this issue is not a critical one. Still, wouldn't it be better to pass on all arguments of fullcalendar's events to vue event handlers?

[dschreij]

Well, that is harder than it seemed, as it is really difficult to get the context of the function right. It is very hard to let self and this point to the vue-calendar component, and thus to call the $emit function to fire the appropriate events.

I had to put this in the config object that is passed from the parent component into vue-fullecalendar to get this to work:

config:{
	eventDrop: (event, delta, removeFunc) => {
		this.$refs.calendar.$emit('event-drop', event, delta, removeFunc);
	},
	eventResize: (event, delta, removeFunc) => {
		this.$refs.calendar.$emit('event-resize', event, delta, removeFunc);
	},
}

where $refs.calendar points to the vue-calendar component

[BrockReece]

Hi @dschreij

Yeah I am always open to PR's and I agree that it would be useful.

As for your third message, shorthand functions do something magic with the scope behind the scenes, it might be easier to pass through a traditional function with a bind method pointing towards this.$refs.calendar but I guess I don't really see why you would want to scope the calendar component anyway?

Cheers
Brock

[dschreij]

Hi Brock,

The reason for my current solution using shorthands is that I haven't been able to get access to the vue component and its methods (such as $emit) when passing these functions in the config object. I do need to scope the calendar component to get access to its $emit function, am I right?
I did play around with bind() but wasn't able to set the this reference to the full-calendar component.
I tried:

config:{
	eventDrop: (function(event, delta, removeFunc) {
		this.$emit('event-drop', event, delta, removeFunc);
	}).bind(this.$refs.calendar),
	eventResize: function (event, delta, removeFunc) {
		this.$emit('event-resize', event, delta, removeFunc);
	}).bind(this.$refs.calendar),
}

but this results in this being undefined. This is probably due to generating the config object in the data() function instead of created() or mounted() and as such, the components haven't been properly mounted and referenced yet.
I also played around referencing this in a self var (like you did), but to no avail.

I think the cleanest way of realising this, is to pass all these arguments through the default built-in functions, so I'll send you a PR shortly.

[BrockReece]

@dschreij

Yeah, I think you are right that my suggestion would have only worked on a properly mounted component.

Thanks, I appreciate your help.
Brock