如何使用从aspx web方法读取Ajax过滤Jquery FullCalendar

这里我试图使用Location来过滤事件日历。尝试不同的选择，但没有运气。任何帮助都会很棒。我正在使用一个下拉菜单来过滤位置。在页面加载它应该是所有与筛选过滤的位置，并呈现完整的日历如何使用从aspx web方法读取Ajax过滤Jquery FullCalendar

<script type="text/javascript"> 
 
    jQuery(document).ready(function() { 
 
     $.ajax({ 
 
      type: "POST", 
 
      contentType: "application/json;charset=utf-8", 
 
      data: "{}", 
 
      url: '<%=ResolveUrl("eventlist.aspx/GetEvents")%>', 
 
      dataType: "json", 
 
      success: function (data) { 
 
       $('#fullcal').fullCalendar({ 
 
        header: { 
 
         left: 'prev,next today', 
 
         center: 'title', 
 
         right: 'month,basicWeek,basicDay' 
 
        },     
 
        defaultDate: '2016-09-12', 
 
        //editable: true, 
 
        displayEventTime: false,// hide event time 
 
        eventLimit: true, // allow "more" link when too many events 
 
        events: $.map(data.d, function (item, i) { 
 
         var event = new Object(); 
 
         event.id = item.EventID; 
 
         event.title = item.EventName; 
 
         event.start = new Date(item.StartDate); 
 
         event.end = new Date(item.EndDate); 
 
         event.loc = item.City; 
 
         return event; 
 
        }), 
 
        eventRender: function eventRender(event, element, view) { 
 
         return ['all', event.location].indexOf($('#location').val()) >= 0 
 
        }     
 
       }); 
 
       $('#location').on('change', function() { 
 
        $('#fullcal').fullCalendar('removeEvents'); 
 
        var sval = $('#location option:selected').val(); 
 
        $.ajax({ 
 
         type: "POST", 
 
         contentType: "application/json;charset=utf-8", 
 
         data: "{}", 
 
         url: '<%=ResolveUrl("eventlist.aspx/GetEvents")%>', 
 
         dataType: "json", 
 
         success: function(data){ 
 
          $.each(data,function(index,value){//for each event, I will compare the value with the filter, if true, render it. 
 
           if(value.City==sval){ 
 
            $("#fullcal").fullCalendar('renderEvent', value, true); 
 
           } 
 

 
          }) 
 
         } 
 

 
        
 
        }); 
 
       }); 
 
      }, 
 
    
 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
 
       debugger; 
 
      } 
 
     }); 
 
      
 
    }); 
 
</script>

<select id="location"> 
 
    <option value="all">All</option> 
 
    <option value="city1">city1</option> 
 
    <option value="city2">city2</option> 
 
    <option value="city3">city3</option> 
 
</select> 
 
\t <div id='fullcal'></div>

来源

2017-08-01 Jim Lobo

请改变初始化日历的顺序，然后使用功能events日历通过AJAX提供日期。所以首先用属性events: function() => $.ajax({...初始化日历。完整的日历将调用您的数据功能。然后在事件$('#location').on('change'请使用函数$("#fullcal")fullCalendar('refetchEvents') 您的函数加载数据必须知道列表中的选择。

来源

2017-08-01 14:21:14 hsd

嗨Hsd，谢谢你的帮助。让我试一试 –

嗨Hsd，没有你的代码运气。 –

jQuery(document).ready(function() { 
    $('#location').on('change', function() { 
     InItCal($('#location option:selected').val()); 
     $('#fullcal').fullCalendar('destroy');   
    });

$（'＃fullcal'）。fullCalendar（'destroy'）;只需一行代码就可以完成更新的事件。

来源

2017-08-14 13:45:13

如何使用从aspx web方法读取Ajax过滤Jquery FullCalendar

回答

相关问题