2013-12-02 2 views
1

У меня есть модальный с fullCalendar в нем.Fullcalendar не показывает первые ботстрапы модальные шоу

fullCalendar ничего не показывает, когда модальные шоу появляются впервые. Если я закрою модальный и снова открою его, fullCalendar показывает с небольшой задержкой при загрузке событий. .fullcalendar('render') не помогает мне в этом случае.

$("a.ScheduleOpen").click(function(e) { 
     loadcalendar(); 
     //$('.Calendar').fullCalendar('refresh'); 
     $(".Calendar").fullCalendar('render'); 
     $(".Calendar").fullCalendar('gotoDate', new Date(y, m, d)); 
     $('#pnl_Schedule').modal('show'); 


    }); 

и у меня есть следующий код для обработки рендера части, когда модальный, показывая, до сих пор не работает правильно:

$('#pnl_Schedule').on('shown.bs.modal', function() { 
     $(".Calendar").fullCalendar('render'); 
    }); 

ответ

2

По какой-то причине, Fullcalendar не будет автоматически отображать календарь, когда в начальных загрузках покадрово. Отобразятся только сегодняшние, левые и правые кнопки, и после нажатия кнопки календарь будет отображаться после закрытия и повторного открытия.

Итак, я получил эту работу, нажав на кнопку сегодня после того, как модальный запускается:

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

$('#button').click(function() { 
    window.setTimeout(clickToday, 200); 
}); 

function clickToday() { 
    $('.fc-button-today').click(); 
} 

Вот working fiddle.

EDIT:

Обновлены скрипка с предложенными изменениями от @Ldom.

1

Спасибо.

У меня была та же проблема (календарь находится внутри вкладки бутстрапа), и это будет отображаться только при изменении размера страницы.

Я изменил ваш код так, чтобы он только «запускал» дисплей один раз. Таким образом, пользовательская навигация внутри календаря поддерживается после щелчков вкладки.

function clickToday() { 
    if (!$("tr.fc-week").is(':visible')) 
    { 
     $('.fc-button-today').click(); 
    } 
} 
1

пытается использовать модальные или вкладку события:

$('#yourModal').on('shown.bs.modal', function(){ 
    $('#yourCalendar').fullCalendar({ 
     options: ..... 
    }); 
}); 

и уничтожить его закрытие, если вам нужно изменить календарь или иметь некоторые переменные к нему

$('#yourModal').on('hide.bs.modal', function(){ 
    $('#yourCalendar').fullCalendar('destroy'); 
}); 
0

«Должен иметь 50 репутации добавить комментарий ".

Для тех, кто использует версию 2.2.6 FullCalendar, имя кнопки «Сегодня» изменилось с «.fc-button-today» на «.fc-today-button», поэтому одна функция для ответа теперь выглядит следующим образом:

function clickToday() { 
    $('.fc-today-button').click(); 
} 
Смежные вопросы