0

我目前有一个工作日日历，上面有一些事件。我的日历是自定义的，不包含任何时间。只有 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 周历中的哪些内容？

顺便说一句，这里是我正在使用的原始 jquery-week-calendar 库的链接：https ://github.com/themouette/jquery-week-calendar/blob/master/jquery.weekcalendar.js

4

1 回答 1

0

我认为您正在使用 jQuery 来设置高度.height()。

.height()不接受任何参数（参见：jQuery .height()）。

尝试使用：.css({height: (options.timeslotHeight * options.timeslotsPerDay + 50)});

于 2015-05-19T03:32:47.967 回答