javascript - fullcalendar v5 不在步进器中呈现

Question

我有一个步进器，想在第二步中加载 Fullcalendar v5，但如果日历不在第一步中，则无法正确呈现。

第二步

我正在遵循 FC 示例中的相同代码（https://fullcalendar.io/docs/initialize-globals-demo）

注意：我正在加载 fullcalendar 脚本和样式。

控制台中也没有错误。

index.html（在stepper的第二步）

<div id='calendar' style="width: 100%;margin: 40px auto;"></div> 

stepper.js

(function ($) {
  var navListItems = $("div.setup-panel div a"),
    allWells = $(".setup-content"),
    allNextBtn = $(".nextBtn"),
    allPrevBtn = $('.prevBtn');

  allWells.hide();

  navListItems.click(function (e) {
    e.preventDefault();
    var $target = $($(this).attr("href")),
      $item = $(this);

    if (!$item.hasClass("disabled")) {
      navListItems.removeClass("btn-success").addClass("btn-default");
      $item.addClass("btn-success");
      allWells.hide();
      $target.show();
      $target.find("input:eq(0)").focus();
    }
  });

  allNextBtn.click(function () {
    var curStep = $(this).closest(".setup-content"),
    curStepBtn = curStep.attr("id"),
    nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]')
    .parent()
    .next()
    .children("a"),
    
    // Validation
    curInputs = curStep.find("input[type='text'],input[type='url']"),
    isValid = true;

    // If it is the second step initialize calendar
    if (isValid && nextStepWizard[0].innerText === '2') {
      initCalendar();
      nextStepWizard.removeClass("disabled").trigger("click");
    }

    if (isValid) nextStepWizard.removeClass("disabled").trigger("click");
  });

  allPrevBtn.click(function () {

    
    var curStep = $(this).closest(".setup-content"),
    curStepBtn = curStep.attr("id"),
    
    prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]')
    .parent()
    .prev()
    .children("a");
    

    prevStepWizard.trigger("click");
  });


  $("div.setup-panel div a.btn-success").trigger("click");
})(jQuery);

日历.js

const initCalendar = function() {
  var calendarEl = document.getElementById("calendar");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    initialDate: "2021-01-07",
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay",
    },
    events: [
      {
        title: "All Day Event",
        start: "2021-01-01",
      },
      {
        title: "Long Event",
        start: "2021-01-07",
        end: "2021-01-10",
      },
      {
        groupId: "999",
        title: "Repeating Event",
        start: "2021-01-09T16:00:00",
      },
      {
        groupId: "999",
        title: "Repeating Event",
        start: "2021-01-16T16:00:00",
      },
      {
        title: "Conference",
        start: "2021-01-11",
        end: "2021-01-13",
      },
      {
        title: "Meeting",
        start: "2021-01-12T10:30:00",
        end: "2021-01-12T12:30:00",
      },
      {
        title: "Lunch",
        start: "2021-01-12T12:00:00",
      },
      {
        title: "Meeting",
        start: "2021-01-12T14:30:00",
      },
      {
        title: "Birthday Party",
        start: "2021-01-13T07:00:00",
      },
      {
        title: "Click for Google",
        url: "http://google.com/",
        start: "2021-01-28",
      },
    ],
    height: 1200,
  });

  calendar.render();
};

标签： javascripthtmljqueryfullcalendarfullcalendar-5