2014-09-19 6 views
0

Я использую рельсы 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 applicaiton его работает нормально.

но с activeadmin его метания яваскрипта ошибку, как, TypeError:. $ (...) fullCalendar не является функцией

and the calender is not displaying in view

Из-за этой ошибки я не смог продолжить Просьба помочь ..

+0

Как интегрировать библиотеку fullCalendara в приложении? – nistvan

+0

, добавляя файлы fullcalender.js и css в мое приложение. –

+0

и где вы скопировали эти файлы и сделали ли вы что-то еще? – nistvan

ответ

0

Вы не импортировать fullcalendar JS и CSS файлы, добавьте эти строки

в приложение/активов/JavaScripts/active_admin.js.coffee

#= require fullcalendar 

в приложение/активов/JavaScripts/active_admin.css.scss

@import "fullcalendar" 
+0

Спасибо за ответ. –

Смежные вопросы