2014-09-19 50 views
0

在我的應用程序中使用rails 4和活動管理寶石。我正在使用fullcalender來顯示事件。

my code is below index.html.erb

<br /> 
<div class="link_back"> 
    <%= link_to "Back", meeting_rooms_path, class: "btn-sm btn-primary" %> 
</div> 
<br /> 
<%= render 'errors' %> 
<p> 
    <%=link_to 'Create Event', new_event_url(meeting_room_id: params["meeting_room_id"]), :id => 'new_event' %> 
</p> 
<br /> 
<!-- <div> 
    <div class='calendar'></div> 
</div> --> 
<div> 
    <div id='calendar'> 
    </div> 
</div> 
<div id = "desc_dialog" class="dialog" style ="display:none;"> 
    <div id = "event_desc"> 
    </div> 
    <br/> 
    <br/> 
    <div id = "event_actions"> 
    <span id = "edit_event"></span> 
    <span id = "delete_event"></span> 
    </div> 
</div> 
<div id = "create_event_dialog" class="dialog" style ="display:none;"> 
    <div id = "create_event"> 
    </div> 
</div> 

<script> 
     // page is now ready, initialize the calendar... 
     $('#new_event').click(function(event) { 
     event.preventDefault(); 
     var url = $(this).attr('href'); 
     $.ajax({ 
      url: url, 
      beforeSend: function() { 
      $('#loading').show(); 
      }, 
      complete: function() { 
      $('#loading').hide(); 
      }, 
      success: function(data) { 
      $('#create_event').replaceWith(data['form']); 
      $('#create_event_dialog').dialog({ 
       title: 'New Event', 
       modal: true, 
       width: 500, 
       close: function(event, ui) { $('#create_event_dialog').dialog('destroy') } 
      }); 
      } 
     }); 
     }); 

     $('#calendar').fullCalendar({ 
      editable: true, 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      //defaultView: 'agendaWeek', 
      defaultView: 'month', 
      height: 500, 
      slotMinutes: 15, 
      loading: function(bool){ 
       if (bool) 
        $('#loading').show(); 
       else 
        $('#loading').hide(); 
      }, 
      events: "/events/get_events?meeting_room_id=<%= params[:meeting_room_id]%>", 
      timeFormat: 'h:mm t{ - h:mm t} ', 
      dragOpacity: "0.5", 
      eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc){ 
//    if (confirm("Are you sure about this change?")) { 
        moveEvent(event, dayDelta, minuteDelta, allDay); 
//    } 
//    else { 
//     revertFunc(); 
//    } 
      }, 

      eventResize: function(event, dayDelta, minuteDelta, revertFunc){ 
//    if (confirm("Are you sure about this change?")) { 
        resizeEvent(event, dayDelta, minuteDelta); 
//    } 
//    else { 
//     revertFunc(); 
//    } 
      }, 

      eventClick: function(event, jsEvent, view){ 
      if ((<%= current_user.id %>) == event.user_id){ 
       showEventDetails(event); 
      } 
      }, 




     }); 
</script> 

相同fullcalender我有正常的軌道4應用程序了其工作正常使用。

但activeadmin其拋出JavaScript錯誤的, 類型錯誤:$(...)fullCalendar不是一個函數

and the calender is not displaying in view

由於此錯誤是不能夠繼續請幫助..

+0

你是如何集成在應用程序中fullCalendara庫? – nistvan 2014-09-19 15:20:32

+0

在我的應用程序中添加fullcalender.js和css相關文件。 – 2014-09-21 11:58:45

+0

和你在哪裏複製這些文件,你做了別的什麼? – nistvan 2014-09-21 18:18:05

回答

0

您未導入fullcalendar js和css文件,添加這些行中的應用程序/資產/ Java腳本/ active_admin.js.coffee

#= require fullcalendar 
在app /資產/ Java腳本/ active_admin.css.scss

@import "fullcalendar" 
+0

感謝您的回覆。 – 2014-09-29 08:06:57

相關問題