Ошибка неперехваченного типа: Не удается прочитать свойства неопределенного (чтение «hasTime») в fullcalendar

#javascript #html #jquery #json #fullcalendar

Вопрос:

столкнулись с ошибкой при полном отображении календаря. Я получил JSON от сервлета в следующих форматах.

Тип1: [["title2","2021-09-10","2021-09-10"],["title2","2021-09-10","2021-09-10"],

Тип 2: [["title2","2021-09-10","2021-09-10"],["title2","2021-09-10","2021-09-10"]]

Вот ошибка, которую я вижу в консоли Google chrome:

Изображение ошибки моей консоли Chrome

Мой код:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />

<div id='calendar'></div>
 
 $(document).ready(function() {
  var s = '';
  var value;
  var datavlue;
  
  $.ajax({
    url: 'CalendarEventController',
    dataType: "json",
    success: function(response) {
      console.log(response);
      value = response;

      s = '[';

      $.each(value, function(index, v) {
        s  = '["'   v.title   '","'   v.start   '","'   v.end   '"],';
      });
      console.log(s);
      var d = s.slice(0, -1)
      d  = ']';
      console.log(d);
      datavlue = JSON.parse(d);
      console.log(datavlue)
      $('#calendar').fullCalendar({
        // put your options and callbacks here
        left: 'Calendar',
        center: '',
        right: 'today prev,next',
        editable: true,
        events: [datavlue],
      })

    }
  });
});
 

Комментарии:

1. Я полагаю, что документ обозначает события как объекты, а не списки

2. Так что же мне нужно изменить в своем коде?

3. сделайте datavlue объект { title: 'title2', start: '2021-09-10', end: '2021-09-10' }

4. произошла та же ошибка.

Ответ №1:

Если вы сохраняете response в качестве значения для events календаря, должно сработать

 $(document).ready(function() {
  var s = '';
  var value;
  var datavlue;
  
  var response = [{title: 'title2', start: '2021-09-10',end:'2021-09-10'}, {title: 'title2', start: '2021-09-10',end:'2021-09-10'}]
  
      $('#calendar').fullCalendar({
        // put your options and callbacks here
        left: 'Calendar',
        center: '',
        right: 'today prev,next',
        editable: true,
        events: response,
      })

    
}); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />

<div id='calendar'></div> 

Комментарии:

1. Слава Богу, это работает. Большое вам спасибо @depperm