Question

我试图动态地改变fullcalendar的行高。

到目前为止已完成。

我添加了一个滑块以选择行高。使用一点jQuery我修改行的css，以使它们更宽或更薄。

HTML代码：

<div id="slider"></div>

以及相关的javascript：

<script>
  $(function() {
    $( "#slider" ).slider({
      value:100,
      min: 20,
      max: 80,
      step: 20,
      value: 20,
      slide: function( event, ui ) {
        heightmod(ui.value);

      }
    });
    heightmod( $( "#slider" ).slider( "value" ) );

  });

  function heightmod(value)
  {
      $('.fc-time-grid .fc-slats td').css('height', value+'px');
  }

</script>

结果：

行的高度已正确更新，但 插入的事件和背景的位置不会相应更改 。

有趣的是，如果我在大多数浏览器中打开或关闭浏览器调试工具栏（ ctrl+shift+i ） 日历中插入的事件的html坐标为神奇地更新以匹配正确的位置 。

有没有人有同样的问题？有什么建议吗？

Answer 1

事件位置对浏览器调整大小事件作出反应。您可以通过调用以下方法手动调整浏览器的大小：

$(window).trigger('resize');

Answer 2

试试这个，只需在css

中添加!important即可

function heightmod(value)
{
  $('.fc-time-grid .fc-slats td').css('height', value+'px !important');
}

fullcalendar - 动态更改行高

2 个答案: