实现选项卡缩小全日历答案

【问题标题】：Materialize tab shrinks fullcalendar实现选项卡缩小全日历
【发布时间】：2019-11-06 13:23:30
【问题描述】：

我有一个完整的日历界面，用于使用烧瓶制作的 Timelog 工具。我的问题是没有呈现包含完整日历的第二个选项卡。当它用我试过的东西渲染时，他在第一次点击事件时收缩自己，并在调整窗口大小时“取消收缩”。它很奇怪

我已经阅读了很多关于这个问题的问题，但没有一个提供有效的解决方案。我使用物化标签。除了将全日历设置为活动选项卡之外，我没有想法

    <div class="row" id="tab_content">
     <div class="col s12">
     <ul class="tabs">
     <li class="tab col s6"><a href="#tasks" name="tab1">Tasks View</a></li>
     <li class="tab col s6"><a href="#calendar" name="tab2" class="active">Calendar View</a></li>
     </ul>
     <h4 id='name_human'>{{ name }}</h4>
     <button id="delete_event" type="" class="btn btn-secondary">delete Timelog</button>
     <button id="add_event" type="" class="btn btn-secondary">Add Timelog</button>
     <input  type="hidden" name="select_date" id="select_date" value="">
   </div>
  </div>

  <div id="tasks" class="col s12">
   <div class="table-responsive">
   </div>
  </div>


  <div id="calendar" class="col s12">
   <div id='calendar'>
   </div>
  </div>





   document.addEventListener('DOMContentLoaded', function() {


    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['dayGrid','moment', "interaction"],
        weekends: false,
        selectable: true,
        droppable: true,
        displayEventTime: false,
        editable: true,
        themeSystem : 'standart',
        defaultView: 'dayGridMonth',
          handleWindowResize : true,

        eventRender: function(info) {
          var tooltip = new Tooltip(info.el, {
                title: info.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
              });
          },
        select: function(date, jsEvent, view) {
          $("#add_event").css("visibility","visible");
          $("#select_date").val(date.startStr);
          today = date.start;
          tomorrow = new Date(today);
          tomorrow.setDate(today.getDate()+1)
          if(date.end.getTime() != tomorrow.getTime()){
            calendar.unselect() ;
          }
          },
        unselect: function(jsEvent, view) {
          $("#add_event").css("visibility","hidden");
        },
        eventDrop: function(info) {
            if (!confirm("Are you sure about this change?")) {
              info.revert();
            }else{
              var date_millis = Date.parse(info.event.start);
              var new_date = new Date(date_millis)
              var year = new_date.getFullYear()
              var month = parseInt(new_date.getMonth())+1
              var day = new_date.getDate()
              string_date = year + "-" + parseInt(month) +"-"+day;
            Update_timelog(info.event.id ,string_date)
            }
          },
        eventClick: function(info) {
          $("#delete_event").css("visibility","visible");
          $('body>.tooltip').remove();
          var listEvent = calendar.getEvents()
          for (var i = 0; listEvent.length>i; i++){
            listEvent[i].setProp('borderColor','');
          }
          info.event.setProp('borderColor','red');   
          },
                  events: {{hour}}
          });
          calendar.render();

我尝试了以下方法（部分工作，呈现事件，但所有功能（选择拖放）都消失了，日历缩小了

   if ($('.fc-day-grid-container').height() == 0) {
     $('.fc-widget-content').height("100%")
     $('.fc-day-grid-container').height("100%")
     $('.fc-week').height("120px")
   }

   $('.tabs li').click(function(e){
     e.preventDefault();
     var baseURL = window.location.origin;
     var url = $(this).children().first().attr('href');
     window.location.href = baseURL+"/main" + url;
     if (url == "#calendar") {
       //calendar.render();
     }
  })

外观的照片链接 https://ibb.co/vL2H0ds https://ibb.co/Rgd9SDz

【问题讨论】：

您是否尝试过在每次选项卡可见时执行日历的updateSize 方法？ fullCalendar 自动调整自身以适应包含元素的尺寸，如果该元素不断更改其大小，或者被隐藏和显示（或删除并重新创建，或者通过 materialize 管理选项卡），那么它可能会有点混乱。如果 materialize 允许您在选项卡可见时挂钩事件，那么您可以执行该方法，以便 fullCalendar 可以正确调整自身。我认为值得一试。
我会试试这个
它以我想要的方式工作，因为我必须双击选项卡来激活 updatesize() 但这是我的工作来解决这个问题。非常感谢
太棒了。如果你让它完全工作，你应该在下面添加它作为答案，以防其他人有类似的问题:-)

标签： javascript fullcalendar materialize

【解决方案1】：

这可以通过在包含标签内容的 div 上使用 MutationObserver 来解决：

// listening for the tab content getting visible
var observer = new MutationObserver(function(mutations) {
    if ($("#upcoming").css('display') != 'none') {
       calendar.updateSize();
    };
});

observer.observe($('#upcoming')[0], {attributes: true});

【讨论】：

【解决方案2】：

按照 ADyson 的建议，我的更新 url 选项卡侦听器触发了 updateSize()，这是我的问题的解决方案。我希望我可以在显示标签而不是点击后触发它，但现在我会在标签上双击，它工作得很好。

这是我用于此的代码，如果您有任何改进，我很乐意接受。

$('.tabs li').click(function(e){
 var baseURL = window.location.origin;
 var url = $(this).children().first().attr('href');
 window.location.href = baseURL+"/main" + url;
 if(url == "#calendar"){
  setTimeout(function(){calendar.updateSize()},150)
 }
})

【讨论】：