使用 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

我正在按照这个线程来做全日历 js：使用 ajax 获取更多事件

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

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

谢谢。

Answer 1

控制器

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

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

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

def index
   @appointments = Appointment.all
end

视图

此操作将呈现包含日历的索引.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.
})

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

• 标题：字符串
• start_event：日期时间
• end_event：日期时间
• 全天：布尔值

请注意，我不创建"开始"和"结束"列，因为它可能会给 mySQL 或 PG 数据库带来一些问题(例如，"end"是 PG 的保留关键字(。

路由

然后，您只需要创建良好的路线。例如，您可以执行以下操作：

resources :appointments, only: :index

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

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