2

我正在使用 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”始终包含所有事件，所有事件都显示在日历上。任何想法这段代码中有什么问题？

谢谢你。

4

1 回答 1

4

您好 Zdravko Vajudin，这实际上非常简单，让我解释一下如何使用复选框（通过下拉菜单您可以确定）：（Fullcalendar 1.6.4版本的工作代码）

第 1 步 - 日历调用前的来源定义

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'       
                            }   
};

第 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 步 - 从日历中删除源并添加（如果选中或未选中）的功能

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 步 - 弄清楚如何使用下拉菜单进行操作

//TODO Go work :P and dont forget to give +1 if it helped ;)
于 2013-10-18T08:47:59.510 回答