rocinante rocinante - 4 months ago 191
Javascript Question

Uncaught TypeError: $(...).fullCalendar is not a function when trying to remove event source

I'm trying to get fullCalendar to remove its previous event source and rebind to a new one on buttonclick. I've been searching for an answer for hours now but none of the solutions that I have found seem to work.

I have a page that is a dropdown menu and button above a fullCalendar cal. On page load the calendar loads all the event listings from a db without issue. what i'm trying to implement is a clientside filter that will only display the name(s) I have selected on the dropdown once the button is clicked.

The function to filter the names into a new array of JSON is working perfectly, my issue is that i'm getting a console error as per the title that is stopping me from removing the original source and rebinding the new array.

here's my code:

CSHTML:

<div class="member-filter-section">
<div class="member-filter-container">
<div class="staff-container">
<p class="staff-name">Staff Member:</p>
<div class="staff-select">
<select id="staff_list" multiple="multiple">
@foreach (var u in users)
{
<option value="@u.UserId">@u.UserName</option>
}
</select>
</div>
</div>
<div class="branch-container">
<p class="branch-name">Branch:</p>
<div class="branch-select">
<select id="branch_list">
<option>City Center</option>
<option>Foxrock</option>
<option>Dalkey</option>
</select>
</div>
</div>
<div id="filter" class="nav_button filter-button">Select</div>
</div>
</div>
<div class="calendar-wrapper">
<div id="calendar" class="calendar-body"></div>
</div>


JS:

// The ajax to return a correct JSON array
var eventsFeed = function (start, end, timezone, callback) {
var id = @agentId;
$.ajax({
type: "POST",
url: "/SystemManagement/Viewings/GetCalendarEventListings",
data: { 'agentId' : id ,'start' : start.format(), 'end' : end.format()},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
var events = [];
$.each(data,
function(obj) {
var eventObject = data[obj];
events.push({
title: eventObject.Title,
start: eventObject.StartTime,
end: eventObject.EndTime,
id: eventObject.Id,
userId: eventObject.UserId,
color: eventObject.AppointmentColour,
attendee: eventObject.Attendee,
location: eventObject.Location,
type: eventObject.AppointmentType
});
});
globalEvents = events;
callback(events);
events = [];
},
error: function() {
console.log('Error');
}
});
}

$(document).ready(function () {
$('#staff_list').chosen();
$('#branch_list').chosen();

// Gets the JSON array to populate the calendar on page load
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 850,
events: eventsFeed,
eventClick: function(calEvent) {
buildModal(calEvent.type,calEvent.location,calEvent.attendee,calEvent.color, calEvent.start, calEvent.end);
modal.style.display = "block";
}
});

$('#filter')
.on('click',
function() {

var selectedStaffIds = $("#staff_list").val();
var filteredEvents = [];

globalEvents.forEach(function(obj) {
if (checkIfIdIsSelected(selectedStaffIds, obj.userId)) {
filteredEvents.push(obj);
}
});
console.log(filteredEvents);
rebindCalendar(filteredEvents);
filteredEvents.length = 0;
});

function checkIfIdIsSelected(staffId, objectId) {
return staffId.indexOf(objectId) > -1;
}

function rebindCalendar(eventsArray) {
$('#calendar').fullCalendar('removeEventSource', eventsFeed);
$('#calendar').fullCalendar('addEventSource', eventsArray);
}

Answer

So somehow the fullCalendar widget gets lost I guess. Try storing the DOM element in a var (like $calendar = $('#calendar')) before populating the calendar and reuse it in the rebindCalendar func.