过滤FullCalendar事件

我正在使用FullCalendar插件来显示来自我的数据库的事件。我将事件存储在实例变量中，并将其显示在View中。用户可以从下拉菜单中选择一个选项，根据该选项，事件将被过滤。问题是我不能做那个过滤。我正在尝试几天。过滤FullCalendar事件

这是我的根 '家' 景观：

<script type="text/javascript">$(document).ready(function() { 
    setCalendar(<%= @doctors.first.id %>); 

    $("#doctor_id").change(function() { 
    var selectedVal = $(this).val(); 
    setCalendar(selectedVal); 
    }); 

    function setCalendar(doctor_id){ 

    $.ajax({ 
     type: 'GET', 
     url: "/appointments", 
     data: "doctor_id=" + doctor_id, 
     dataType: "json", 
     success: function(data) { 
      alert(data[0].id);   
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
     console.log(textStatus); 
     console.log(errorThrown); 
     } 
    }) 

    // page is now ready, initialize the calendar... 
    $('#calendar').fullCalendar({ 
    editable: true, 
    disableResizing: true, 
    disableDragging: true, 

     events: 
     [ 
     <% @appointments.each do |appointment| %> 
     { 
      id  : "<%= appointment.id %>", 
      title : "Reserved", 
      start : "<%= appointment.start_date.in_time_zone.strftime '%Y-%m-%dT%H:%M:%S' %>", 
      end : "<%= appointment.end_date.in_time_zone.strftime '%Y-%m-%dT%H:%M:%S' %>", 
      allDay : false 
     }, 
     <% end %> 
     ], 



...

控制器：

class StaticController < ApplicationController 
    def home 

    if params[:doctor_id] 
     @appointments = Appointment.where(doctor_id: params[:doctor_id]) 
    else 
     @appointments = Appointment.all 
    end 

    @doctors = Doctor.all 
    end 

end

我的路线：

root 'static#home' 
match '/appointments', to: 'static#home', via: 'get'

的问题是，过滤器不能正常工作。实例变量'@appointments'总是包含所有事件，并且所有事件都显示在日历上。任何想法在这段代码中有什么错误？

谢谢。

来源

2013-10-17 Cristiano

您好兹德拉夫科Vajudin这其实是很简单的事，让我解释一下使用它一个复选框（带下拉，你自己看着办吧肯定），我该怎么做：

STEP 1 - SOURCES定义之前日历CALL

var sources = {   
         sourceone: {    
             url: yourURL1, 
             type: 'POST', 
             data:{ 
              'year':y           
             }, 
             cache: false,    
             color: '#C1272D', 
             textColor: 'white'        
            },         
          sourcetwo: {     
             url: yourURL2, 
             type: 'POST', 
             data:{  
              'year':y 
             }, 
             cache: false,    
             color: '#FF931E', 
             textColor: 'white'  
          } 
};

STEP 2 - 日历初始化

var calendar = $('#calendar').fullCalendar({ 
... 
eventSources: [sources.sourceone,sources.sourcetwo] //You can define calling a function here that return's this array of sources, your choice 
... 
});

第3步 - 函数删除源从日程表，并添加如果选中OR NOT

function filterEvents(var here if you want){   
     if(_CHECKBOX_FILTER.checked){ //_CHECKBOX_FILTER = document.getElementById("mycheckbox");   
      calendar.fullCalendar('removeEventSource', source.sourceone); 
     }else{  
      calendar.fullCalendar('addEventSource', source.sourceone); 
     }

第4步 - HTML：P

Remove Source one: <input type="checkbox" name="mycheckbox" id="mycheckbox" value="1" onclick="filterEvents()"/>

第5步 - 图IT如何做它一个下拉

//TODO Go work :P and dont forget to give +1 if it helped ;)

来源

2013-10-18 08:47:59

过滤FullCalendar事件

回答

相关问题