我正在嘗試使用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/
我試過,還使用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