2

データベースのイベントを表示するために FullCalendar プラグインを使用しています。イベントをインスタンス変数に格納し、View に表示します。ユーザーはドロップダウン メニューからオプションを選択でき、そのオプションに応じてイベントがフィルタリングされます。問題は、そのフィルタリングができないことです。私はすでに数日試しています。

これは私のルート「ホーム」ビューです:

<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 に答える