rocinante rocinante - 1 year ago 339
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:


<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>
<div class="branch-container">
<p class="branch-name">Branch:</p>
<div class="branch-select">
<select id="branch_list">
<option>City Center</option>
<div id="filter" class="nav_button filter-button">Select</div>
<div class="calendar-wrapper">
<div id="calendar" class="calendar-body"></div>


// The ajax to return a correct JSON array
var eventsFeed = function (start, end, timezone, callback) {
var id = @agentId;
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 = [];
function(obj) {
var eventObject = data[obj];
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;
events = [];
error: function() {

$(document).ready(function () {

// Gets the JSON array to populate the calendar on page load
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); = "block";

function() {

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

globalEvents.forEach(function(obj) {
if (checkIfIdIsSelected(selectedStaffIds, obj.userId)) {
filteredEvents.length = 0;

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

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

Answer Source

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.