CODEWITHSUNDEEP
javascriptjquerylaravelfullcalendarlaravel-5.1
James
James

Reputation: 16339

Cannot read property 'hasTime' of undefined

I'm using FullCalendar to display staff hours on a Calendar.

I'm pulling the events via an ajax call like so:

"events": function(start, end, timezone, callback) {

  //create the data to be sent
  var objectToSend = {
    "start_date": start.format("YYYY-MM-DD"),
    "finish_date": end.format("YYYY-MM-DD"),
  };

  //craft and make the request
  $.ajax({
    url: 'calendar/test',
    data: objectToSend,
    type: 'POST',
    cache: false
  }).done(function(data) {
    //on success call `callback` with the data
    callback(data)
  })
}

This works perfectly fine, however I am getting an error showing in my console "Uncaught TypeError: Cannot read property 'hasTime' of undefined" and that this is coming from fullcalendar.min.js:6.

I'm not very fluent in JavaScript, but my searching suggests that I either haven't provided the right dates or have junk data in there.

As far as I can tell I am providing all the right data. The function generating the data looks like so:

public function test(Request $request) {
  $start_date = Input::get('start_date');
  $finish_date = Input::get('finish_date');

  $shifts = Roster::whereBetween('date', array($start_date, $finish_date)) - > get();

  foreach($shifts as $shift) {
    $start = $shift - > date.
    ' '.$shift - > start_time;
    $finish = $shift - > date.
    ' '.$shift - > finish_time;

    $events[] = array(
      'title' => $shift - > staff - > first_name,
      'start' => Carbon::createFromFormat('Y-m-d H:i:s', $start) - > toDateTimeString(),
      'end' => Carbon::createFromFormat('Y-m-d H:i:s', $finish) - > toDateTimeString(),
      'id' => $shift - > id,
      'allDay' => false
    );
  }

  return json_encode($events);
}

which outputs:

[{"title":"Gemma","start":"2016-02-01 18:00:00","end":"2016-02-01 22:00:00","id":1,"allDay":false},
{"title":"Gemma","start":"2016-01-26 18:00:00","end":"2016-01-26 22:00:00","id":49,"allDay":false}]

Can anyone spot what I am doing wrong? I am simply trying to use this to render my events for the given month.

Edit: output of console.log(data)

It prints out:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

Opening this up I get:

0: Object

Opening this up I get:

allDay: false
end: "2016-02-01 22:00:00"
id: 1
start: "2016-02-01 18:00:00"
title: "Gemma"

Upvotes: 4

Views: 19443

Answers (4)

Nam Lee
Nam Lee

Reputation: 1117

Use: JSON.parse(data) in reponse ajax.

Upvotes: 0

user861870
user861870

Reputation:

I got this bug, with the following function

var postToServerAjax = function(event, delta, revertFunc)
    {
      $.post('/url', {event: event}, function(data)
      {

      }, 'json').fail(function()
      {
        revertFunc();
        alert('We got an error.');
      });
    };

And I found it was because I tried to pass the event on to the post() function. It didn't matter if I changed the name, as soon as I passed it along, I think it tried to serialize it, and it resulted in that error. Now I'm manually specifying and object, where I "clone" the relevant id, start and end over, as I don't need anything else anyway.

Upvotes: 0

James
James

Reputation: 16339

I couldn't figure out what was going wrong with the above code, however I got around it by using a JSON feed instead:

events: {
            url: 'calendar/test',
            error: function() 
            {
                alert("error");
            },
            success: function()
            {
                console.log("successfully loaded");
            }
        }

Upvotes: 1

sebas07be
sebas07be

Reputation: 78

It seems to be you are giving to fullCalendar wrong event's parameter,

Try to render some manually events first.

events: [{
  title: 'event1',
  start: '2010-01-01'
}, {
  title: 'event2',
  start: '2010-01-05',
  end: '2010-01-07'
}, {
  title: 'event3',
  start: '2010-01-09T12:30:00',
  allDay: false // will make the time show
}]

After that, make sure your events match with fullCalendar expected params.

Upvotes: 4

Related Questions