フルカレンダーボタンがクリックできない

Question

カレンダーのフルカレンダーがajaxを使用して正しく表示されます。だから私は以前のボタンをクリックしてデータを変更したい。しかし、ボタンのクリック機能は機能しません。どのようにデータを前と次のボタンでパラメータとして渡すことができますか？

<script src="../assets/global/plugins/fullcalendar/lib/moment.min.js"></script> 
<script src="../assets/global/plugins/fullcalendar/lib/jquery.min.js"></script> 
<script src="../assets/global/plugins/fullcalendar/fullcalendar.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
data: "{}", 
url: "attendance-full.aspx/GetEvents", 
dataType: "json", 
success: function (data) { 
    $('div[id*=calendar1]').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     events: $.map(data.d, function (item, i) { 
      var event = new Object(); 
      event.id = item.EventID; 
      event.start = new Date(item.StartDate); 
      event.title = item.EventName; 
      return event; 
     }), eventRender: function (event, eventElement) { 
      if (event.ImageType) { 
       if (eventElement.find('span.fc-event-time').length) { 
        eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType))); 
       } else { 
        eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType))); 
       } 
      } 
     }, 
    }); 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
    debugger; 
} 
}); 
$('div[id*=calendar1]').show(); 
//below code not working 
$(".fc-prev-button span").click(function() { 
alert("Hai"); 
}) 
}); 

私のコンソールにはエラーがありません。

Answer 1

$(".fc-prev-button span").click(function() {が実行される前に実行されます（カレンダーの作成を待つまでにajaxが実行され、ajaxが非同期になるまで実行されるため）。したがって、コードをイベントにバインドするボタンはありません。

単にあなたのAJAX "成功" 関数の終わりに

$(".fc-prev-button span").click(function() { 
    alert("Hai"); 
}); 

を移動します。

---

N.B.私はまた、あなたがイベントをどのようにしているのか再検討することをお勧めします。現在、すべてのイベントをカレンダーに取り込み、イベントを取得するまでカレンダーを表示することはできません。アプリケーションが長期間生存していて歴史的なイベントをたくさん作成している場合は、長いイベントリストがある数年後に何が起こるかを考慮してください。カレンダーなしでそれらをすべてロードするには時間がかかりますあなたの状況が珍しい場合を除いて、おそらく誰も長い時間前から何も見ていないので、それらをロードするのは時間の無駄です。

実際にはFullCalendarは、現在表示されているビューと日付範囲に必要なイベントのみを取得するように設計されています。したがって、必要最小限のイベントを取得します。ユーザーがビューまたは日付を別のものに変更すると、fullCalendarはサーバーからさらに多くのイベントを要求し、必要な日付範囲を送信します。これは通常、はるかに効率的です。

あなたのケースでは、次のようなスニペットのように書き直すことができます。サーバーのメソッドGetEventsを変更して、指定された日付までにイベントのリストをフィルタリングする必要があることを覚えておいてください。私はそのコードを見ることができないので、何をする必要があるのか​​正確にアドバイスすることはできませんが、2つの余分なパラメータを追加してデータベースクエリに句を追加して日付を比較するのはかなり簡単です。

$(document).ready(function() { 
    $('div[id*=calendar1]').show(); 

    $('div[id*=calendar1]').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: true, 
    events: function(start, end, timezone, callback) { 
     $.ajax({ 
     type: "POST", 
     contentType: "application/json", 
     data: '{ "start": "' + start.format("YYYY-MM-DD") + ', "end": ' + end.format("YYYY-MM-DD") + '}', 
     url: "attendance-full.aspx/GetEvents", 
     dataType: "json", 
     success: function(data) { 
      var events = $.map(data.d, function(item, i) { 
      var event = new Object(); 
      event.id = item.EventID; 
      event.start = new Date(item.StartDate); 
      event.title = item.EventName; 
      return event; 
      }); 

      callback(events); 
     }, 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      debugger; 
     } 
     }); 
    }, 
    eventRender: function(event, eventElement) { 
     if (event.ImageType) { 
     if (eventElement.find('span.fc-event-time').length) { 
      eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType))); 
     } else { 
      eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType))); 
     } 
     } 
    }, 
    }); 

    $(".fc-prev-button span").click(function() { 
    alert("Hai"); 
    }); 
}); 

イベントフィード機能の詳細については、https://fullcalendar.io/docs/event_data/events_function/を参照してください。