Alejandro Corredor Alejandro Corredor - 28 days ago 8
Javascript Question

How to change the scope of the function passed in to the eventClick property on a FullCalendar object?

I am using fullcalendar as a plugin for doing some stuff. I am initializing the calendar as instructed in the docs:

_initializeCalendar: function() {
let me = this;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: me._createEvents(me.releaseStore),
eventClick: me._onEventClick
});
},


And I need to change the scope of the function passed in to the eventClick property, because my _onEventClick function will then use functions which are obviously not in the scope of the division where the click event happens. Here is the _onEventClick function:

_onEventClick: function(calEvent, jsEvent, view) {
console.log(scope);
let modal = Ext.get('modal');
let html = `
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>${calEvent.title}</h2>
</div>
<div class="modal-body">
<p>Name: ${calEvent.title}</p>
<p>Release Date: ${calEvent.start}</p>
<p>Team: ${calEvent.team}</p>
</div>
</div>
`;
modal.setHTML(html);
modal.setVisible(true);

// closes modal when X close button is clicked
$('.close').click(function() {
let modal = Ext.get('modal');
modal.setVisible(false);
});
}


So, is there any way to pass the global scope to the eventClick property of fullcalendar? Thank you.

Answer

The solution was just using bind when passing the function to the object property. So in code it would look like this:

clickEvent: me._onEventClick.bind(me)

Here, me gets set to this in _initializeCalendar, so this has the global scope.

Comments