2015-05-19 13 views
0

В настоящее время у меня есть календарь недели с некоторыми событиями на нем. Мой календарь является обычным и не содержит никаких времен. Только столбцы Sun-Sat и блоки информации для событий.Проблема с высотой прокрутки для jQuery календарь недели недели

Проблема, с которой я столкнулась, связана с настройкой высоты прокрутки (вертикальной прокрутки) для столбца в зависимости от размера/количества событий, которые заполняют календарь. Итак, допустим, у меня есть несколько событий, свиток должен автоматически увеличиваться в зависимости от количества и размера событий, которые заполняют календарь недели.

В настоящее время он этого не делает, он отсекает некоторые события.

Я думаю, что он должен делать с этим ниже код:

/** 
      * 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 я должен посмотреть?

Btw, вот ссылка на оригинальный JQuery-недельных календарном библиотеке я использую: https://github.com/themouette/jquery-week-calendar/blob/master/jquery.weekcalendar.js

ответ

0

Я думаю, что вы используете JQuery, чтобы установить высоту с помощью .height().

.height() не принимает никаких аргументов (см .: jQuery .height()).

Попробуйте использовать: .css({height: (options.timeslotHeight * options.timeslotsPerDay + 50)});

+0

хмм я попробую, но оригинальный JQuery weekcalendar использует его: https://github.com/themouette/jquery-week-calendar/blob/master/jquery.weekcalendar.js –

+0

wait .. использование '.css()'. Это правильнее. Я отредактирую свой ответ. – Grallen

+0

Да, но он также говорит: «Метод .height() рекомендуется, когда высота элемента должна использоваться в математическом вычислении». Я не думаю, что это проблема. –