バックグラウンドイベントは、ブートストラップモーダルによって作成されたときレンダリングされません。

Question

ブートストラップモーダルを使用してバックグラウンドイベントをFullCalendarに追加する際に、少し問題があります。

私はこのような単純なイベント・データとバックグラウンドイベント（working jsfiddle）をレンダリングすることができるよ：

var eventData = { 
    start: '2016-10-01', 
    end: '2016-10-04', 
    rendering: 'background', 
    color: '#ff9f89' 
}; 
$('#calendar').fullCalendar('renderEvent', eventData, true);` 

また、私はタイトルのために迅速かつ基づいて、追加のルールを使用して、これを行うことができますよタイトル（working fiddle）上：

select: function(start, end) { 
    var title = prompt('Event Title:'); 
    var eventData; 
    if (title) { 
     if (title === "holiday"){ 
      eventData = { 
       start: start, 
       end: end, 
       rendering: 'background', 
       color: '#ff9f89' 
      }; 
     } 
     else{ 
      eventData = { 
       title: title, 
       start: start, 
       end: end 
      }; 
     } 
    } 

    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
    $('#calendar').fullCalendar('unselect'); 
} 

次のコードは、（fiddle）動作するはずですが、それはできません。モーダルを通じて通常のイベントを追加することは問題ではありませんが、バックグラウンドイベントの場合は何も起こりません。方程式からrendering: 'background',を取り除くと動作します。何らかの理由でその行に問題があります。

しかし、バックグラウンドイベントは、初期化やカレンダーの外で完全に正常に動作し、selectを使用して正常に動作すると、通常のイベントとは異なる動作をします。

select: function(start, end) { 
    $('#calendarModal').modal('show'); 
    $('#calendarModal #startTime').val(start); 
    $('#calendarModal #endTime').val(end); 
} 

// ... 

$('#calendarModal').on('click', '#save', function(){ 
    var title = $('#calendarModal #title').val(); 
    var start = new Date($('#calendarModal #startTime').val()); 
    var end = new Date($('#calendarModal #endTime').val()); 
    var eventData; 
    if (title){ 
     if (title === "holiday"){ 
      eventData = { 
       start: start, 
       end: end, 
       rendering: 'background', 
       color: '#ff9f89' 
      }; 
     } 
     else{ 
      eventData = { 
       title: title, 
       start: start, 
       end: end 
      }; 
     } 
    } 
    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
    $('#calendar').fullCalendar('unselect'); 
    $('#calendarModal').modal('hide'); 
}); 

これを解決する方法はありますか？

Answer 1

問題は、日付とallDayパラメータと関係しています。だけのアジェンダビューのタイムスロット上でレンダリングされます時限れ

背景イベント：Background eventドキュメントには、次のように述べています。 の終日ののバックグラウンドイベントは、月表示またはアジェンダビューの終日スロットでのみ表示されます。

したがって、使用するビューを確認してallDayパラメータを正しく適用する必要があります。これに保存する機能を更新します。

$('#calendarModal').on('click', '#save', function(){ 
    var title = $('#calendarModal #title').val(); 
    var start = moment($('#calendarModal #startTime').val()); 
    var end = moment($('#calendarModal #endTime').val()); 
    var eventData; 

    // Get the current used view and set a default value to allDay 
    var view = $('#calendar').fullCalendar('getView'), 
     allDay = false; 

    // If the view is month, set allDay to true 
    if (view.name === 'month') { 
     allDay = true; 
    } 

    if (title){ 
     // When setting the event data, be sure to send the `allDay` param 
     if (title === "holiday"){ 
      eventData = { 
       start: start, 
       end: end, 
       rendering: 'background', 
       color: '#ff9f89', 
       allDay: allDay 
      }; 
     } 
     else{ 
      eventData = { 
       title: title, 
       start: start, 
       end: end, 
       allDay: allDay 
      }; 
     } 
    } 
    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
    $('#calendar').fullCalendar('unselect'); 
    $('#calendarModal').modal('hide'); 
}); 

ここupdated jsfiddleです。

---

2番目のフィドルと3番目のフィドルの違いは、単なるブートストラップモーダルではありません。 2番目のフィドルでは、startとendのパラメータを、FullCalendarでselectメソッドに送信するときに使用しています。

3番目のフィドルでは、入力から「日付」を取得しています。私はここで推測していますが、プロンプトを使用してモーダルを使用するときには機能しない理由があると主張します。

ただし、ドキュメントに記載されているとおり、正しい方法はallDayパラメータを送信することです。