[英]Issue with scrolling height for jquery weekday calendar
我目前有一個工作日日歷,上面有一些事件。 我的日歷是自定義的,沒有任何時間。 僅Sun-Sat列和事件信息塊。
我必須根據填充日歷的事件的大小/數量來調整列的滾動高度(垂直滾動)。 假設我填充了幾個事件,滾動條應根據填充工作日日歷的事件的數量/大小自動增加。
當前,它不這樣做,它切斷了一些事件。
我認為這與下面的代碼有關:
/**
* render the calendar body.
* Calendar body is composed of several distinct parts.
* Each part is displayed in a separated row to ease rendering.
**/
_renderCalendarBody: function($calendarContainer) {
var self = this, options = this.options,
showAsSeparatedUser = options.showAsSeparateUsers && options.users && options.users.length,
$calendarBody, $calendarTableTbody;
// create the structure
$calendarBody = '<div class=\"wc-scrollable-grid\">';
$calendarBody += '<table class=\"wc-time-slots\" style=\"margin:0px;padding:0px\">';
$calendarBody += '<tbody>';
$calendarBody += '</tbody>';
$calendarBody += '</table>';
$calendarBody += '</div>';
$calendarBody = $($calendarBody);
$calendarTableTbody = $calendarBody.find('tbody');
self._renderCalendarBodyOddEven($calendarTableTbody);
self._renderCalendarBodyFreeBusy($calendarTableTbody);
self._renderCalendarBodyEvents($calendarTableTbody);
$calendarBody.appendTo($calendarContainer);
//set the column height
$calendarContainer.find('.wc-full-height-column').height(options.timeslotHeight * options.timeslotsPerDay + 50); //<---Is this the issue?
//set the timeslot height
$calendarContainer.find('.wc-time-slot').height(options.timeslotHeight - 1); //account for border
//init the time row header height
$calendarContainer.find('.wc-time-header-cell').css({
height: (options.timeslotHeight * options.timeslotsPerHour) - 11,
padding: 5
});
//add the user data to every impacted column
if (showAsSeparatedUser) {
for (var i = 0, uLength = options.users.length; i < uLength; i++) {
$calendarContainer.find('.wc-user-' + self._getUserIdFromIndex(i))
.data('wcUser', options.users[i])
.data('wcUserIndex', i)
.data('wcUserId', self._getUserIdFromIndex(i));
}
}
},
還有這個:
/*
* Resize the calendar scrollable height based on the provided function in options.
*/
_resizeCalendar: function() {
var options = this.options;
if (options && $.isFunction(options.height)) {
var calendarHeight = options.height(this.element);
var headerHeight = this.element.find('.wc-header').outerHeight();
var navHeight = this.element.find('.wc-toolbar').outerHeight();
var scrollContainerHeight = Math.max(calendarHeight - navHeight - headerHeight, options.minBodyHeight);
var timeslotHeight = this.element.find('.wc-time-slots').outerHeight();
this.element.find('.wc-scrollable-grid').height(scrollContainerHeight);
if (timeslotHeight <= scrollContainerHeight) {
this.element.find('.wc-scrollbar-shim').width(0);
}
else {
this.element.find('.wc-scrollbar-shim').width(this._findScrollBarWidth());
}
this._trigger('resize', this.element);
}
},
具體來說,我設置列高的方法是嘗試調整高度,但遇到問題/不能解決問題。
可能是什么,我該怎么解決? 我應該在jquery weekcalendar中查看什么?
順便說一句,這是我正在使用的原始jquery-week-calendar庫的鏈接: https : //github.com/themouette/jquery-week-calendar/blob/master/jquery.weekcalendar.js
我認為您正在使用jQuery通過.height()
設置高度。
.height()
不接受任何參數(請參閱: jQuery .height() )。
嘗試使用: .css({height: (options.timeslotHeight * options.timeslotsPerDay + 50)});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.