Materialise 选项卡缩小全日历

Question

我有一个用 flask 制作的 Timelog 工具的全日历界面。我的问题是没有呈现包含完整日历的第二个选项卡。当它用我尝试过的东西渲染时，他会在第一次单击事件时缩小自己，并在 window 调整大小时 "unshrinks" 。很奇怪

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

    <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();

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

   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();
     }
  })

照片 link 它的外观 https://ibb.co/vL2H0ds https://ibb.co/Rgd9SDz

Answer 1

根据 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)
 }
})

Answer 2

这可以通过在 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});

Materialise 选项卡缩小全日历

Materialize tab shrinks fullcalendar

javascript

fullcalendar

materialize