jQuery 전체 캘린더 업데이트/필터 캘린더

Question

fullcalendar.js를 사용하여 클라이언트 측 필터링을 구현하려고합니다. 내가 사용 초기에 달력을 렌더링 할 수 있습니다

function getCalendar($venue) { 

    $('#calendar').fullCalendar({ 

     eventSources: [ 
      { 
       url: ajaxUrl, 
       type: "GET", 
       dataType: "json", 
       data: { 
        action: 'loop_events_output', 
        venue: $venue, 
       }, 

      beforeSend: function() { 
       $("#calendar").LoadingOverlay("show", { 
        color: "rgba(51,51,51,0.8)", 
       });  
      }, 
      complete: function() {     
       $("#calendar").LoadingOverlay("hide"); 
      }, 

      error: function() { 
       alert('there was an error while fetching events!'); 
      }, 
      } 
     ] 


    }); 
} 

// execute on load 
getCalendar('townsville'); 

가 지금은 체크 박스의 입력에 따라 달력을 업데이트 할 수 있도록하려면, 여기 내 코드의 두 번째 부분입니다 :

// execute when using filters 
$('.calendar-controls input').change(function(){ 
    if (this.checked) { 
     var checkedVal = $(this).val(); 

     $("#calendar").fullCalendar('removeEvents'); 
     getCalendar(checkedVal); 
     $('#calendar').fullCalendar('refetchEvents') 
    } 
}); 

하지만 내가 할 수있는 요청 URL이 변경되지 않는 XHR 요청에서 확인하십시오. /wp-admin/admin-ajax.php?action=loop_events_output & 개최지 = townsville & 시작 = 2016-07-31 & 끝 = 2016-09- 11 & _ = 1472626202164

도움을 주시면 감사하겠습니다.

Answer 1

좋아요. 그래서 나는 이것을 알아 냈습니다. 근본적으로 fullcalendar의 작동 방식은로드 할 때 이벤트 객체를 사용하고 해당 객체가 재설정되지 않는 한 향후 렌더에서 해당 객체를 계속 사용한다는 것입니다.

function getCalendar() { 

    $('#calendar').fullCalendar({ 

     events: source, 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: '' 
     }, 
     eventRender: function (event, element) { 
      element.attr('href', '#'); 
     }, 
     loading: function(isLoading, view) { 
      if(isLoading) {// isLoading gives boolean value 
       alert('loading'); 
      } else { 
       alert('done'); 
      } 
     } 


    }); 
} 

그럼 설치 소스 :

var source = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=townsville'; 

다음

내가 사용자의 입력에 따라 소스 업데이트 :

// execute when using filters 
$('.calendar-controls input').change(function(){ 
    if (this.checked) { 
     var checkedVal = $(this).val(); 

     var newSource = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=' + checkedVal; 
     $('#calendar').fullCalendar('removeEventSource', source) 
     $('#calendar').fullCalendar('refetchEvents') 
     $('#calendar').fullCalendar('addEventSource', newSource) 
     $('#calendar').fullCalendar('refetchEvents'); 
     source = newSource; 
    } 
}); 

을 그래서 그들은 방법 나는 내 전체 일정 기능을 변경하는 것이었다했다

가장 중요한 부분은 이벤트 소스를 제거한 다음에 새 이벤트 소스를 추가하는 것입니다.