通过下拉jQuery AJAX过滤Fullcalendar

编程问答 2022-08-15

问题描述

我有一个全日历应用程序，它显示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,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,agendaDay'
        },header: {
            left: 'prev,// 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>

选择一个值并按下按钮后，如何过滤日历？并根据下拉菜单的默认选定值使其在加载事件时呈现事件？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxfullcalendarfullcalendar-3jquery