Fullcalendar in Bootstrap 3 Thumbnail class not with other其他

我正在嘗試使用Fullcalendar將每週議程放在一行縮略圖中，但調整大小似乎不一致。Fullcalendar in Bootstrap 3 Thumbnail class not with other其他

1）在我的工作監視器上，議程表以全屏寬度正確呈現，然後在縮小屏幕時更改爲比相鄰縮略圖更高，然後返回到全角正確呈現。在移動仿真時，它也可以正確渲染，並且行從水平配置切換到垂直配置。屏幕分辨率爲1920x1080。

2）在家裏，日程呈現最初作爲比在全寬度相鄰縮略圖高，然後保持較高的水平尺寸變小，在移動仿真正確呈現，然後呈現正確時，屏幕恢復到滿-寬度。屏幕分辨率是1366x768。

相鄰圖像的基本尺寸是465x300。

相關的碼位。 jQuery調用日曆（在$(document).ready()部分）。

$('#calendar-index').fullCalendar({ 
    defaultView: 'basicWeek', 
    height: $("#imgSource").height(), 
    width: $("#imgSource").width(), 
    windowResize: function(view) { 
     this.height() = $("#imgSource").height(); 
     this.width() = $('#imgSource').width(); 
    } 
});

的HTML部分：

<div class="row"> 
     <div class="col-md-4"> 
     <div class="thumbnail text-center"><div id="calendar-index"></div><a href="full_cal.html" class="btn btn-primary" role="button">Button Text</a></div> 
     </div> 
     <div class="col-md-4"> 
     <div class="thumbnail text-center"><img id="imgSource" src="image1.png"><a href="#" class="btn btn-primary" role="button">Button Text</a></div> 
     </div> 
     <div class="col-md-4"> 
     <div class="thumbnail text-center"><img src="image2.png"><a href="#" class="btn btn-primary" role="button">Button Text</a></div> 
    </div>

我有一種感覺，它連接到一個$("#imgSource").load()，而不是$(document).ready()電話會的工作，但我如果有可能使用廢棄的函數避免。

http://jsfiddle.net/sidhenimh/63e0h54o/

來源

2014-09-29 slink

我試過，還使用Fullcalendar的'aspectRatio'內置，但它不工作正確的顯示尺寸，無論是。插入的行是'aspectRatio = $（「＃imgSource」）。width/$（「＃imgSource」）。height' - 然而，正如我所說的，它沒有正確渲染任何分辨率。 – slink 2014-09-29 13:02:31

你能提供一個小提琴嗎？ – 2014-09-29 13:50:05

@azeos http://jsfiddle.net/sidhenimh/63e0h54o/ – slink 2014-09-29 14:22:02

我發現這個修復，萬一別人運行到類似的問題;它不能很好地工作，但它至少可以使水平縮放更加穩定。有一個名爲「Datatables」的免費jQuery插件可以實現自動水平縮放。縱向縮放不起作用，但無論顯示器分辨率/大小如何，表格至少能正確顯示。

Datatables Plugin

來源

2014-10-02 17:47:56 slink

Fullcalendar in Bootstrap 3 Thumbnail class not with other其他

回答

相關問題