使用 AJAX 填充 FullCalendar

Question

我正在尝试使用数据库中的事件填充日历，但我遇到了一些问题。

这是处理全日历事件的代码：

<script type="text/javascript">$(document).ready(function() {

  // page is now ready, initialize the calendar...

  $.ajax({
    type: "GET",
    data_type: "json"
    url: "appointments/show"
    success: function(data){
      alert(data);
      $('#calendar').fullCalendar({

      events: 
      [
        {
          title  : 'Reserved',
          start  : '2013-10-02 12:30:00',
          end    : '2013-10-02 13:00:00',
            allDay : false // will make the time show
        }
      ],

      dayClick: function(date, allDay, jsEvent, view) {
        var todayDate = new Date();
        if(date <= todayDate){
           alert('You cannot book on selected time');
        }

        else{
          if (allDay) {
            alert('Clicked on the entire day: ' + date);
          }else{
            var day = date.getDate();
            var month = date.getMonth();
            var year = date.getFullYear();
            var hour = date.getHours();
            var minutes = date.getMinutes();

            if(minutes == 30){
              minutes = 00;
              hour += 1;
            }

            else{
              minutes = 30;
            }

            //alert(day + ' ' + month + ' ' + year + ' ' + hour + ' ' + minutes); 


            var dateEnd = new Date();
            dateEnd.setDate(day);
            dateEnd.setMonth(month);
            dateEnd.setFullYear(year);
            dateEnd.setHours(hour);
            dateEnd.setMinutes(minutes);

            alert('Next slot: ' + dateEnd);


            $('#calendar').fullCalendar('renderEvent', { title: 'YOUR TITLE', start: date, end: dateEnd,allDay: false, backgroundColor: '#378006' }, true );

            $.ajax({
              type: "POST",
              url: "/create",
              data: {
                appointment_date: date,
                doctor_id: '1',
                user_id: '1'
              }
            });
          }
        }
      }
    });
  });
});</script>

控制器中的代码：

def show
        @appointment = Appointment.find(:all);
        respond_to do |format|
            format.json { render json: @appointment }
            flash[:success] = "Welcome!"
        end
    end

我一直在关注这个帖子fullcalendar js: fetching more events with ajax

问题是日历根本不显示。如果我在开头删除该 ajax 调用，日历会正常显示，并且会显示 2013-10-02 的事件。用户还可以使用 POST 请求创建新事件。这行得通。

任何想法可能是什么问题？

谢谢。

Answer 1

控制器

首先，您在显示操作中收集所有约会只是犯了一个错误：在 RESTful 应用程序中，显示操作是为单个记录保留的。索引操作用于列出模型的所有记录。

此外，在这种情况下，ajax 调用并不合适。

在这里，我只是建议您在约会控制器中创建一个索引操作：

def index
   @appointments = Appointment.all
end

查看

此操作将呈现一个 index.html.erb 视图，其中包含您的日历。

在这个视图中，你可以这样做：

$('#calendar').fullCalendar({

  events: 
  [
    <% @appointments.each do |appointment| %>
    {
      title  : "<%= appointment.title %>",
      start  : "<%= appointment.start_event.strftime '%Y-%m-%dT%H:%M:%S' %>",
      end    : "<%= appointment.end_event.strftime '%Y-%m-%dT%H:%M:%S' %>",
      allDay : <%= appointment.allday %>
    },
   <% end %>
  ],
  // put all your fullcalendar configuration here.
})

当然，这假设您的 Appointment 模型具有以下列：

• 标题：字符串
• start_event:日期时间
• end_event:日期时间
• allday:boolean

请注意，我没有创建 'start' 和 'end' 列，因为它可能会在 mySQL 或 PG 数据库中产生一些问题（例如，'end' 是 PG 的保留关键字）。

路由

然后，您只需要创建好的路线。例如，您可以这样做：

resources :appointments, only: :index

然后，通过访问 /events，您将能够看到您的日历！

希望我的回答对你有所帮助。