Full calendar breaks on view switch

Question

Whenever I switch my months on fullcalendar I receive the following error message

Uncaught TypeError: specialTokens[fakePart.substring(...)] is not a function

and all of my events disappear from the calendar.

I'm trying to re-render my events on month change, but I keep getting the error message and It won't re-load my events.

Javascript

var events = <?php echo $eventsArray ?>;
var blocked = <?php echo $blockedArray ?>;
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
console.log(blocked);
for (var i = 0; i < Object.keys(blocked).length; i++) {
 console.log(blocked[i].date);
}
$('#democalendarfull').fullCalendar({
 header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,basicWeek,basicDay'
 },
 viewRender: function(view, element) {
  $('#democalendarfull').fullCalendar( 'rerenderEvents' );
 },
  editable: false,
  aspectRatio: 2,
  droppable: false,
  events: events,
  dayRender: function (date, cell) {
  var today = new Date();
   if (date._d.getDate() === today.getDate()) {
    cell.css("background-color", "red");
   }
  }
});

HTML

<div id="democalendarfull" class="mb">
                  <div class="panel green-panel no-margin">
                      <div class="panel-body">
                          <div id="date-popover" class="popover top" style="cursor: pointer; disadding: block; margin-left: 33%; margin-top: -50px; width: 175px;">
                              <div class="arrow"></div>
                              <h3 class="popover-title" style="disadding: none;"></h3>
                              <div id="date-popover-content" class="popover-content"></div>
                          </div>

                             //JAVASCRIPT IS INSIDE HERE

                      </div>
                  </div>
              </div>

PHP

$results= $db->query("SELECT * FROM mytable");
                            $events = array();
                            while($fetch = mysqli_fetch_assoc($results)){
                              $e = array();
                              $e['id'] = $fetch['id'];
                              $e['title'] = $fetch['title'];
                              $e['start'] = $fetch['start'];
                              $e['end'] = $fetch['end'];
                              $e['url'] = $fetch['url'];
                              array_push($events, $e);
                            }
                            $eventsArray = json_encode($events);

My events are all loading and working fine on page load, but as soon as I cycle through the months I receive the error message and it breaks! I don't know whether i'm using it wrong, but no matter what I do I cant get it to keep my events!

Answer 1

I was having the same issue after upgrading fullCalendar, took me a bit to figure out because for almost a year everything has been working fine and I had upgraded fullCalendar in the past without any issues, for some reason I had to include moment.js in the page I was using the fullCalendar on, see I run an MVC site and previously the master page (_layout.cshtml) was referencing moment.js, not sure right now why that doesn't work anymore, just as a test I added a reference to moment in the actual page I use fullCalendar and the issue I was having with events went away as well as another issue with undefined in my calendar title.

In my case the fix was:

@Scripts.Render("~/bundles/dates") 

in your case it may just be:

<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>

And if your issue isn't the reference to moment you may want to try using call back, the documentation mentions this but I dont see you using it:

try:

callback($events);