なぜfullcalendarはモーダル内でレンダリングしないのですか？

Question

誰かがカレンダーがモーダルに表示されない理由を教えてください。しかし、モーダルがなければ、彼らはうまくいっています。 それが動作するところ最初にこれを参照してください。そうでないところFiddle はこれを参照してください：Fiddle

私はfullCalendar('render');を使用する必要がありますが、でもそれで、コードは右クリック機能の内部で動作していないようでしたと思います。手伝ってください。

Answer 1

親のいずれかにdisplay: none;がある場合、fullCalendarは表示されません。 The render method you referencedは、あなたが使用する必要があるものですが、モデルの後にと表示するだけです。

display: block;を使用してモデルから離れるものを試すこともできますが、表示されるまで画面（left: -1000%; right: 1000%;など）の外側に配置することもできます。

Answer 2

ここで私はあなたのモーダルバージョンで動作させるためにそれをしました。 カレンダーをモーダルに追加し、「休暇をマークする」ボタンがクリックされたときにカレンダーを呼び出すと思われる関数を作成しました。

$('#vacaBtn').click(function() { 
     modal.style.display = "block"; 
     renderCalendars(); 
}); 

私はモーダルが現れた後、彼らはモーダルに追加されますようにrenderCalendars（）関数内で3つのカレンダーを作成し、すべてのコードを置きます。

function renderCalendars() { 
    $('#calendar0').fullCalendar({ 
    header: { 
      left: '', 
      center: 'title', 
      right: '' 
     }, 
     defaultDate: moment(y+"-"+(m+1)+"-"+d), 
     theme: true, 
     dayClick: function(date, jsEvent, view) { 

     alert('Clicked on: ' + date.format()); 

    } 
    }); 

    $('#calendar1').fullCalendar({ 
    header: { 
      left: '', 
      center: 'title', 
      right: '' 
     }, 
     defaultDate: moment(y+"-"+(m+2)+"-"+d), 

    theme: true 
    }); 
    $('#calendar2').fullCalendar({ 
     header: { 
      left: '', 
      center: 'title', 
      right: '' 
     }, 
      theme: true, 
     defaultDate: moment(y+"-"+(m+3)+"-"+d) 
    }); 
}