jquery - fullcalendar - 动态改变行高

Question

我正在尝试动态更改 fullcalendar 的行高。

---

到目前为止完成。

我添加了一个 slider 来选择行高。 通过一些 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

事件位置对浏览器调整大小事件作出 react 。您可以通过调用手动调整浏览器的大小:

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