Javascript jquery工作日日历的滚动高度问题
我目前有一个工作日日历,上面有一些活动。我的日历是自定义的,不包含任何时间。只有Sun Sat列和事件信息块 我遇到的问题是根据填充日历的事件的大小/数量调整列的滚动高度垂直滚动。假设我有几个事件填充,滚动条应该自动增加,以响应填充工作日日历的事件数量/大小 目前,它没有这样做,它切断了一些事件 我认为这与以下代码有关:Javascript jquery工作日日历的滚动高度问题,javascript,jquery,calendar,jquery-week-calendar,Javascript,Jquery,Calendar,Jquery Week Calendar,我目前有一个工作日日历,上面有一些活动。我的日历是自定义的,不包含任何时间。只有Sun Sat列和事件信息块 我遇到的问题是根据填充日历的事件的大小/数量调整列的滚动高度垂直滚动。假设我有几个事件填充,滚动条应该自动增加,以响应填充工作日日历的事件数量/大小 目前,它没有这样做,它切断了一些事件 我认为这与以下代码有关: /** * render the calendar body. * Calendar body is composed of s
/**
* 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周日历库的链接:我想您正在使用jquery使用.height设置高度 .height不接受任何参数,请参见:
尝试使用:.css{height:options.timeslotHeight*options.timeslotsPerDay+50} 嗯,我会试试,但是最初的jquery weekcalendar使用它:等等。。使用.css。这更正确。我将编辑我的答案。是的,但它也表示,当需要在数学计算中使用元素的高度时,建议使用.height方法。我不认为这是问题所在。是的,它用于获取高度,而不是设置高度。请参阅提供的文档。无论如何,它仍然不起作用。当使用.css时,它仍然会切断我周日历中的事件