1

В настоящее время с помощью fullcalendar.ioFullcalendar refetch события обратного вызова

В документации, он имеет calendar.fullCalendar ('refetchEvents'), что refetch все события с сервера.

Короче говоря, я хочу, чтобы запрос calendar.fullCalendar ('refetchEvents') был заполнен и отправил мне обратный вызов, чтобы сообщить мне. Я хочу, чтобы все события были загружены до того, как я приступлю к определенным задачам.

Как я могу это сделать?

+0

Вы пробовали слушать eventAfterAllRender HTTP : //fullcalendar.io/docs/event_rendering/eventAfterAllRender/? –

+0

@ kostya есть пример, как его использовать? – ove

ответ

5

решаемые его, делая refetch события после успешного HTTP POST, как показано ниже

Service.insert(event). 
      success(function (data, status, headers, config) { 

       calendar.fullCalendar('refetchEvents'); 

      }). 
      error(function(data, status, headers, config) { 
       alert('error'); 
      }); 
2

Я изменил basic-views.html из папки demos FullCalendar. Я добавил

 , 
     eventAfterAllRender: function (view) { 
      console.log('eventAfterAllRender'); 
      console.log(view); 
     } 

В список параметров календаря. Он запускается после загрузки начальных событий и после каждого $ ('# calendar'). FullCalendar ('refetchEvents');

Полный демо-код:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset='utf-8' /> 
<link href='../fullcalendar.css' rel='stylesheet' /> 
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' /> 
<script src='../lib/moment.min.js'></script> 
<script src='../lib/jquery.min.js'></script> 
<script src='../fullcalendar.min.js'></script> 
<script> 

    $(document).ready(function() { 

     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,basicWeek,basicDay' 
      }, 
      defaultDate: '2014-11-12', 
      editable: true, 
      eventLimit: true, // allow "more" link when too many events 
      events: [ 
       { 
        title: 'All Day Event', 
        start: '2014-11-01' 
       }, 
       { 
        title: 'Long Event', 
        start: '2014-11-07', 
        end: '2014-11-10' 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: '2014-11-09T16:00:00' 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: '2014-11-16T16:00:00' 
       }, 
       { 
        title: 'Conference', 
        start: '2014-11-11', 
        end: '2014-11-13' 
       }, 
       { 
        title: 'Meeting', 
        start: '2014-11-12T10:30:00', 
        end: '2014-11-12T12:30:00' 
       }, 
       { 
        title: 'Lunch', 
        start: '2014-11-12T12:00:00' 
       }, 
       { 
        title: 'Meeting', 
        start: '2014-11-12T14:30:00' 
       }, 
       { 
        title: 'Happy Hour', 
        start: '2014-11-12T17:30:00' 
       }, 
       { 
        title: 'Dinner', 
        start: '2014-11-12T20:00:00' 
       }, 
       { 
        title: 'Birthday Party', 
        start: '2014-11-13T07:00:00' 
       }, 
       { 
        title: 'Click for Google', 
        url: 'http://google.com/', 
        start: '2014-11-28' 
       } 
      ], 
      eventAfterAllRender: function (view) { 
       console.log('eventAfterAllRender'); 
       console.log(view); 
      } 
     }); 
     $('#calendar').fullCalendar('refetchEvents'); 
    }); 

</script> 
<style> 

    body { 
     margin: 40px 10px; 
     padding: 0; 
     font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
     font-size: 14px; 
    } 

    #calendar { 
     max-width: 900px; 
     margin: 0 auto; 
    } 

</style> 
</head> 
<body> 

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

</body> 
</html> 
+0

Это отчасти делает то, что я хотел. Этот метод вызывается каждый раз. Я только хочу, чтобы он был вызван после $ ('# calendar'). FullCalendar ('refetchEvents'); Удивительно, есть ли лучший способ – ove

+0

Кроме того, метод вызывается для $ ('# calendar'). FullCalendar ('updateEvent'); – ove

+0

Это правильный ответ. Это работает, даже если набор данных пуст и ничего не отображается (в отличие от eventAfterRender, который запускается для каждого элемента). Вы можете использовать логические проверки в вызываемой вами функции (и установить их, если хотите что-то изменить) – markthewizard1234

1

попробовать этот

 

$('#calendar').fullCalendar('destroy'); 
$('#calendar').fullCalendar({ 


       defaultView: 'month', 
       editable: true, 
       //eventLimit: true, // allow "more" link when too many events 

       events: myevents, 


      }); 
Смежные вопросы