Как я могу заставить FullCalendar Адама Шоу отображать отзывчивый в приложении rails 4
Я использую Ruby 2 Rails 4. Я использую гем twitter-bootstrap-rails, чтобы моя навигационная панель рухнула при изменении размера браузера.
Я хочу подобный эффект с FullCalendar Адама Шоу. Сейчас размер окна будет изменен, но я хочу, чтобы он отображал один день (представление basicDay), когда браузер имеет разрешение 480px или ниже, одну неделю (представление basicWeek), когда область просмотра ниже 767, и представление месяца в полном объеме. окно
Мне лучше инициализировать три разных календаря в случае браузеров разных размеров?
то есть:
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/myfeed',
if $(window).width() < 514){
defaultView: 'basicDay'
}
header: {
left: 'title',
center: '',
right: 'today basicDay basicWeek month prev,next'
},
});
});
</script>
Или есть гораздо более простое решение?
Кроме того, я действительно новичок в этом, я знаю, что приведенный выше пример кода не будет работать так, как написано, но я по крайней мере на правильном пути?
Спасибо и извините, если это написано где-то еще, я не смог найти его, но был бы рад, если бы кто-то указал мне в правильном направлении.
ОБНОВИТЬ:
В ответ на первый комментарий, чтобы он заработал, я зашел в fullcalendar.js и изменил принцип работы основного рендеринга (строка 240).
/* Main Rendering
-----------------------------------------------------------------------------*/
setYMD(date, options.year, options.month, options.date);
function render(inc) {
if (!content) {
initialRender();
}
else if (elementVisible()) {
// mainly for the public API
calcSize();
_renderView(inc);
}
}
function initialRender() {
tm = options.theme ? 'ui' : 'fc';
element.addClass('fc');
if (options.isRTL) {
element.addClass('fc-rtl');
}
else {
element.addClass('fc-ltr');
}
if (options.theme) {
element.addClass('ui-widget');
}
content = $("<div class='fc-content' style='position:relative'/>")
.prependTo(element);
header = new Header(t, options);
headerElement = header.render();
if (headerElement) {
element.prepend(headerElement);
}
changeView(options.defaultView);
if (options.handleWindowResize) {
$(window).resize(windowResize);
}
// needed for IE in a 0x0 iframe, b/c when it is resized, never triggers a windowResize
if (!bodyVisible()) {
lateRender();
}
// added this to specify how initial rendering should act on mobile devices.
if ( $(window).width() < 480){
changeView('agendaDay')
};
}
Как вы можете видеть, я добавил «if ($ (window) .width ...»), однако это само по себе не является отличным решением, поскольку решает только половину моей проблемы. Первоначальный рендеринг корректен как для мобильных, так и для мобильных устройств. окна браузера, но календарь не отвечает на изменение размера в окнах браузера.Включение ответа MarCrazyness с вышеупомянутым решением решило проблему изменения размера в браузерах.
Мой взгляд теперь выглядит так:
Schedule.html.erb $ (документ) .ready (function () {
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/...',
weekMode: 'liquid',
defaultView: 'agendaWeek',
allDaySlot: false,
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'today prev,next'
},
windowResize: function(view) {
if ($(window).width() < 514){
$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
} else {
$('#calendar').fullCalendar( 'changeView', 'agendaWeek' );
}
}
});
});
</script>
Примечание: я изменил настройки заголовка, но это ни в коем случае не является необходимым для работы этого решения.
Надеемся, что одна или комбинация этих двух тактик удовлетворяет вашим потребностям, если у вас есть решение, которое проще, или если вы заранее или ответите, пожалуйста, присоединяйтесь и всем большое спасибо за помощь.