完整日历 - 动态更改行高

Question

我正在尝试动态更改完整日历的行高。

---

到目前为止完成。

我添加了一个滑块以选择行高。通过一点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');
}