jquery - 通过下拉jQuery AJAX过滤Fullcalendar

Question

我有一个完整的日历应用程序，它显示来自 JSON 的事件。此时它工作正常，但是当我按下过滤按钮时，我需要根据下拉列表中的选定值过滤日历。它不会加载所选项目的事件。这是我的代码：

$(document).ready(function() {
  
    var base_url = 'http://localhost:8080/';
    var idCentro = 11;
    llenaCboProfesionales();
    configCalendar();
    
    //press the button after selecting an item from dropdown
    $('#btnFiltrar').on('click',function(e){
  
        e.stopImmediatePropagation();
        var idProfesional = $('#cboProfesional').val();
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
          lang: 'es',
          editable: true,
          header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
          },
          defaultView: 'agendaWeek',
          eventLimit: true, // allow "more" link when too many events
          events: {
              url: base_url +'/alleventsByProf/'+idProfesional,
              type: 'GET',
          },
      }
});
      
//config calendar on load event, so I don't have select a value from dropdown for displaying it... I know this a terrible practice
function configCalendar() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        lang: 'es',
        editable: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        eventLimit: true, // allow "more" link when too many events
        events: {
                  
        },            
    });

    //loads dropdown
    function llenaCboProfesionales() {
        $.ajax({
            type: 'get',
            url: base_url + 'profesional/get-by-centro/'+idCentro,
            success: function(data) {
                $('#cboProfesional').empty();
                $.each(data,function(key, registro) {
                    $('#cboProfesional').append('<option value='+registro.id+'>'+registro.prof+'</option>');
                });        
            }
        });
    }
});

查看 Calendar.html：

<div>
    <label>Profesional:</label>
    <select id="cboProfesional" class="form-control" name="cboProfesional">      
    </select>
    <br>
    <button type="button" name="btnFiltrar" id="btnFiltrar" class="btn btn-primary">Ver Agenda</button>
</div>
    
<div class="col-xs-9" id='calendar'>  
</div>

选择一个值并按下按钮后如何过滤日历？并使其在加载事件上呈现事件，具体取决于下拉列表中的默认选择值？

标签： jqueryajaxfullcalendarfullcalendar-3