fullcalendar

Question

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

到目前为止完成。

我添加了一个滑块以 select 行高。我用一点 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

试试这个，只需在 css

中添加 !important

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

Answer 2

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

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

fullcalendar - 动态改变行高

fullcalendar - dynamically change row height

css

jquery