FullCalendar窗口将自动滚动



我在创建新事件方面有一个问题。例如,在Chrome中,向下滚动到底部,请确保其高度足够小,因此您看不到整个日历。

单击按钮,然后 Week ,然后 Week> Week (几次(。现在,尝试今天晚上11点创建一个事件 - 将出现模态窗口。按取消。

我现在得到的是什么问题 - 浏览器窗口滚动,直到日历的标题!

如您所见 - 不包括我自己的库,只有来自FullCalendar/Smantical -UI文档的基本代码。

语义-UI模态窗口本身不会发生问题(没有FullCalendar(。此外,在页面刷新后,一切正常,但是按月/每月/月/周都可以滚动。

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      right: 'month,agendaWeek'
    },
    aspectRatio: 1.8,
    selectable: true,
    select: function() {
      $('.ui.modal').modal('show');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css">
<script type="text/javascript" src="https://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script type="text/javascript" src="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css">
<div style="height:1000px;"></div>
<div id="calendar"></div>
<div class="ui small modal">
  <div class="actions">
    <div class="ui black cancel button">Cancel</div>
  </div>
</div>

jsfiddle示例:https://jsfiddle.net/edomzxll/1/

请帮助我了解出了什么问题以及如何防止这种奇怪/不必要的滚动?


编辑:

目前,我认为它是通过模态窗口完成的。有一个代码,该代码在窗口关闭时运行:

...
onComplete : function() {
  settings.onHidden.call(element);
  module.restore.focus();
  callback();
}
...

... on HandHidden((被触发,然后焦点返回到最后一个集中的对象。那是一个问题。如果我在网页开头的某个地方有一个重点元素,请向下滚动,显示模态窗口并关闭它 - 浏览器将自动滚动到页面开头到该重点元素。评论这一行对我有帮助,但这正在编辑语义源代码,这不是解决方案。就我而言,可能的按钮可能会引起重点。

scrollTimeReset设置为false:https://fullcalendar.io/docs/scrolltimereset

 const calendar = new Calendar(calendarEl, {
  timeZone: 'UTC',
  plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
  headerToolbar: { left: 'prev,next', center: 'title', right: '' },
  initialView: calendarView,
  eventDurationEditable: true,
  slotDuration: `00:${duracaoMinimaConsulta}`,
  locale: 'pt-br',
  navLinks: true,
  editable: true,
  dayMaxEvents: true,
  dateClick: handleDateClick,
  eventClick: handleEventClick,
  eventResize: handleResizeEvent,
  eventDrop: handleDropEvent,
  **scrollTime: scrollTime, (Set this property)** Ex.: scrollTime: "20:00"
  events: eventosState,
});

我真的不明白这个问题。

您的文档中的第一个DIV的高度为1000px,因此文档的其余部分显然流下来。

打开模态时,它的高度和宽度为100%,因此滚动被禁用。

相关内容

  • 没有找到相关文章

最新更新