Fullcalendar returning wrong date on dayClick()

Trying to get the dayClick() callback to get the current date. Instead, no matter what I do it seems to return YESTERDAY and even shows the wrong day of the week (i.e. it will say “Friday” when the actual day matching the date is Saturday). One really strange thing to note is that this ONLY seems to happen when I click dates around "today" (i.e. the highlighted date), sometimes it corrects itself, other times… not.

Here is my JS:

(function() {
  'use strict';

    $(document).ready(function(){
        // Full calendar
        $('#calendar').fullCalendar({
            header: {
        left: '',
        center: 'title',
        right: ''
      },
            dayClick: function(date) {
                console.log(date);
        }
    });
    });
})();

JavaScript
​x
 
(function() {
  'use strict';
​
    $(document).ready(function(){
        // Full calendar
        $('#calendar').fullCalendar({
            header: {
        left: '',
        center: 'title',
        right: ''
      },
            dayClick: function(date) {
                console.log(date);
        }
    });
    });
})();
​

And my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>VetPro Dashboard</title>

    <!-- Style Css-->
    <link rel="stylesheet" href="../../vendor/bower_components/fullcalendar/dist/fullcalendar.min.css">

    <!-- jQuery -->
    <script type="text/javascript" src="../../vendor/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../../vendor/bower_components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="../../vendor/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../../assets/javascripts/calendar_scheduler.js"></script>
  </head>

  <body class="split-background">

    <!-- Start Body -->
    <div class="container-fluid" id="vetpro-dashboard">
      <h1 class="page-header text-center">Dashboard</h1>
      <div class="container">
        <ul id="tabs" class="text-center col-xs-12 font-mobile-17">
          <a href="dashboard_projects.html"><li class="col-xs-2">Projects</li></a>
          <li class="col-xs-2 active">Schedule</li>
          <a href="dashboard_transactions.html"><li class="col-xs-2">Transactions</li></a>
          <a href="dashboard_profile.html"><li class="col-xs-2">Profile</li></a>
          <a href="#"><li class="col-xs-2">Support</li></a>
        </ul>
      </div>
      <div class="container container-border" id="dashboard-schedule">
        <div class="col-md-6">
          <div id="calendar">
          </div>
        </div>
        <div class="col-md-6" id="exceptions">
          <div id="scheduler">
            <div id="timepicker">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Body -->
  </body>
</html>

JavaScript
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>VetPro Dashboard</title>
​
    <!-- Style Css-->
    <link rel="stylesheet" href="../../vendor/bower_components/fullcalendar/dist/fullcalendar.min.css">
​
    <!-- jQuery -->
    <script type="text/javascript" src="../../vendor/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../../vendor/bower_components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="../../vendor/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../../assets/javascripts/calendar_scheduler.js"></script>
  </head>
​
  <body class="split-background">
​
    <!-- Start Body -->
    <div class="container-fluid" id="vetpro-dashboard">
      <h1 class="page-header text-center">Dashboard</h1>
      <div class="container">
        <ul id="tabs" class="text-center col-xs-12 font-mobile-17">
          <a href="dashboard_projects.html"><li class="col-xs-2">Projects</li></a>
          <li class="col-xs-2 active">Schedule</li>
          <a href="dashboard_transactions.html"><li class="col-xs-2">Transactions</li></a>
          <a href="dashboard_profile.html"><li class="col-xs-2">Profile</li></a>
          <a href="#"><li class="col-xs-2">Support</li></a>
        </ul>
      </div>
      <div class="container container-border" id="dashboard-schedule">
        <div class="col-md-6">
          <div id="calendar">
          </div>
        </div>
        <div class="col-md-6" id="exceptions">
          <div id="scheduler">
            <div id="timepicker">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Body -->
  </body>
</html>
​

And finally, the console log that shows when I click 12/4/15 (date of this post):

n {_isAMomentObject: true, _isUTC: true, _offset: 0, _locale: R.b, _d: Thu Dec 03 2015 16:00:00 GMT-0800 (Pacific Standard Time)…}

JavaScript
 
n {_isAMomentObject: true, _isUTC: true, _offset: 0, _locale: R.b, _d: Thu Dec 03 2015 16:00:00 GMT-0800 (Pacific Standard Time)…}
​

What is wrong here? What steps can I take to ensure this does not happen in the future? Thank you!

Answer

For some reason adding the “next” and “prev” buttons in the header resolves the issue. No clue why. Hope this helps anyone else having this problem in the future.

Advertisement

Answer