Question

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

这是处理fullcalendar事件的代码：

<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

控制器

首先，您只是通过收集show动作中的所有约会来犯错：在RESTful应用程序中，show actions是为单个记录保留的。索引操作用于列出模型的所有记录。

此外，在这种情况下，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.
})

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

标题：字符串
start_event：日期时间
end_event：日期时间
阿迪：布尔

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

路由

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

resources :appointments, only: :index

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

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

使用AJAX填充FullCalendar

1 个答案:

控制器

视图

路由