전체 일정 버튼 클릭이 작동하지 않습니다.

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가 비동기가 될 때까지 기다리기 때문입니다). 따라서 코드를 이벤트에 바인딩 할 단추가 없습니다.

은 단순히 아약스 "성공"함수의 끝에

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

이동합니다.

---

N.B. 나는 또한 당신이 당신의 사건을 어떻게 얻고 있는지 다시 생각해 보길 권한다. 현재 모든 이벤트를 캘린더에 가져 오면 일정을 가져올 때까지 캘린더를 표시 할 수 없습니다. 응용 프로그램이 오랜 시간 동안 라이브로 실행되고 많은 역사적인 이벤트를 작성하는 경우 긴 이벤트 목록이있는 몇 년 후에 어떤 일이 발생하는지 고려하십시오. 캘린더가없는 상태로 모두로드하는 데 시간이 오래 걸릴 것입니다 여러분의 상황이 비정상적인 경우가 아니라면, 아무도 오래 전에 보지 않은 사람이 아무도 없을 것입니다. 그래서 그들을로드하는 것은 시간 낭비입니다.

FullCalendar는 실제로 현재 표시되는보기 및 날짜 범위에 필요한 이벤트 만 가져 오는 방식으로 작동하도록 설계되었습니다. 따라서 필요한 최소 이벤트를 가져옵니다. 사용자가보기 또는 날짜를 다른 것으로 변경하면 fullCalendar는 서버에서 더 많은 이벤트를 요청하고 필요한 날짜 범위를 보냅니다. 이것은 대개 훨씬 효율적입니다.

귀하의 경우 다음과 같은 내용을 다시 작성할 수 있습니다. 또한 제공된 날짜별로 이벤트 목록을 필터링하도록 서버 메소드 GetEvents을 변경해야합니다. 그 코드를 볼 수 없으므로 정확히 무엇을해야하는지 조언 할 수는 없지만 몇 가지 추가 매개 변수를 추가하고 데이터베이스 쿼리에 절을 추가하여 날짜를 비교하는 것이 매우 쉽기를 바랍니다.

$(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/을 참조하십시오.