Activeadmin Rails 4 TypeError: $(...).fullCalendar 不是函数答案

【问题标题】：Activeadmin Rails 4 TypeError: $(...).fullCalendar is not a functionActiveadmin Rails 4 TypeError: $(...).fullCalendar 不是函数
【发布时间】：2014-09-26 05:09:55
【问题描述】：

我在我的应用程序中使用带有活动管理 gem 的 rails 4。我正在使用 fullcalender 来显示事件。

我的代码在 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>

我在普通 rails 4 应用程序中使用的同一个 fullcalender 工作正常。

但是使用 activeadmin 它会抛出 javascript 错误， TypeError: $(...).fullCalendar 不是函数

日历没有显示在视图中

由于这个错误我无法继续请帮助..

【问题讨论】：

您是如何将 fullCalendara 库集成到您的应用程序中的？
在我的应用程序中添加 fullcalender.js 和 css 相关文件。
你在哪里复制了这些文件，你做了别的什么吗？

标签： ruby-on-rails-4 activeadmin

【解决方案1】：

你没有导入fullcalendar js和css文件，添加这些行

在 app/assets/javascripts/active_admin.js.coffee 中

#= require fullcalendar

在 app/assets/javascripts/active_admin.css.scss

@import "fullcalendar"

【讨论】：

感谢您的回复。