Using AJAX to populate FullCalendar

Question

I am trying to populate calendar with events from database but I have some problems.

This is the code which handles fullcalendar events:

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

The code in controller:

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

I was following this thread to do it fullcalendar js: fetching more events with ajax

The problem is that calendar doesn't show at all. If I remove that ajax call at the beginning the calendar shows normally and that event for 2013-10-02 is displayed. User can also create new events with POST request. That's working.

Any ideas what could be a problem?

Thank you.

Answer 1

Controller

First, you just make a mistake by collecting all the appointments in a show action: In a RESTful application, show actions are reserved for a single record. The index actions are used for listing all records of a model.

Moreover, an ajax call is not really appropriate in this situation.

Here, i just advise you to create an index action in your appointments controller:

def index
   @appointments = Appointment.all
end

View

This action will render an index.html.erb view, containing your calendar.

In this view, you can just do:

$('#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.
})

Of course, this supposes that your Appointment model has the following columns:

• title:string
• start_event:datetime
• end_event:datetime
• allday:boolean

Just note that i do not create 'start' and 'end' columns because it can create some issues with mySQL or PG databases (for example, 'end' is a reserved keyword for PG).

Routing

Then, you just have to create the good route. For example, you can do:

resources :appointments, only: :index

Then, by visiting /events, you will be able to see your calendar!

I hope my answer will help you.