title: Using AJAX to populate FullCalendar
body: <p>I am trying to populate calendar with events from database but I have some problems.</p>
  
  <p>This is the code which handles fullcalendar events:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;$(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 &lt;= 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'
                }
              });
            }
          }
        }
      });
    });
  });&lt;/script&gt;
  </code></pre>
  
  <p>The code in controller:</p>
  
  <pre><code>def show
          @appointment = Appointment.find(:all);
          respond_to do |format|
              format.json { render json: @appointment }
              flash[:success] = "Welcome!"
          end
      end
  </code></pre>
  
  <p>I was following this thread to do it <a href="https://stackoverflow.com/questions/8218224/fullcalendar-js-fetching-more-events-with-ajax">fullcalendar js: fetching more events with ajax</a></p>
  
  <p>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.</p>
  
  <p>Any ideas what could be a problem?</p>
  
  <p>Thank you.</p>