2014-09-01 2 views
0

Я пытаюсь реализовать FullCalendar на мои рельсы приложения, у меня есть следующие файлы на мои активы/папки javascritp:реализации полный календарь на приложение rails3

fullcalendar.min.js moment.min.js

и у меня есть следующие строки на моем application.js файле:

//= require moment.min 
//= require jquery 
//= require jquery_ujs 
//= require jquery.ui.all 
//= require jquery.ui.datepicker 
//= require twitter/bootstrap 
//= require fancybox 
//= require zeroclipboard 
//= require_tree . 
//= require uservoice 
//= require fullcalendar.min 

то на мой взгляд, я следующий DIV с «календарным» ид, как это (я использую HAML) :

.row 
    .col-md-12{style: "margin-top:10px;"} 
     .panel.panel-default 
     .panel-heading 
      %i.fa.fa-calendar 
      Click on the green cells to book a class (calendar) 
     .panel-body 
      #calendar 

Это мой JQuery код:

:javascript 
$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
    defaultDate: '2014-09-12', 
    editable: true, 
    eventLimit: true, 
    events: [ 
    { 
     title: 'All Day Event', 
     start: '2014-09-01' 
    }, 
    { 
     title: 'Long Event', 
     start: '2014-09-07', 
     end: '2014-09-10' 
    }, 
    { 
     id: 999, 
     title: 'Repeating Event', 
     start: '2014-09-09T16:00:00' 
    }, 
    { 
     id: 999, 
     title: 'Repeating Event', 
     start: '2014-09-16T16:00:00' 
    }, 
    { 
     title: 'Conference', 
     start: '2014-09-11', 
     end: '2014-09-13' 
    }, 
    { 
     title: 'Meeting', 
     start: '2014-09-12T10:30:00', 
     end: '2014-09-12T12:30:00' 
    }, 
    { 
     title: 'Lunch', 
     start: '2014-09-12T12:00:00' 
    }, 
    { 
     title: 'Meeting', 
     start: '2014-09-12T14:30:00' 
    }, 
    { 
     title: 'Happy Hour', 
     start: '2014-09-12T17:30:00' 
    }, 
    { 
     title: 'Dinner', 
     start: '2014-09-12T20:00:00' 
    }, 
    { 
     title: 'Birthday Party', 
     start: '2014-09-13T07:00:00' 
    }, 
    { 
     title: 'Click for Google', 
     url: 'http://google.com/', 
     start: '2014-09-28' 
    } 
    ] 
    }); 
}); 

Но это не делает никакой работы. Я проверяю инструмент разработчиков я нашел следующее сообщение об ошибке:

Uncaught TypeError: undefined is not a function

enter image description here

я сделал то же самое на HTML файл, и все прекрасно работает, так что я не понимаю, что я делаю worng.

Любая помощь будет оценена. Благодаря

UPDATE


изменить порядок application.js файла, как это:

//= require jquery 
//= require jquery_ujs 
//= require jquery.ui.all 
//= require jquery.ui.datepicker 
//= require twitter/bootstrap 
//= require fancybox 
//= require zeroclipboard 
//= require_tree . 
//= require uservoice 
//= require fullcalendar 
//= require moment.min 

Но теперь у меня есть следующие ошибки:

Uncaught ReferenceError: moment is not defined fullcalendar.js?body=1:13 
Uncaught ReferenceError: moment is not defined fullcalendar.min.js?body=1:7 

ответ

1

TypeError: Undefined is not a function ошибку возникает, когда есть какая-либо проблема в последовательности загружаемого jquery или вы загружаете jquery дважды. Эта зависимая библиотека также не вызывает эту ошибку. попробуйте поменять порядок в файле application.js. Первая попытка загрузить //= require moment.min после //= require jquery.

+0

Я просто переместил запрос, как вы предлагаете, но у меня все еще такая же ошибка. – Jean

+0

try move '// = require moment.min' above' // = require fullcalendar' Ошибка показывает проблему зависимости. (Fullcalendar зависит от момента.js) –

+0

Я пытаюсь, но у меня все еще есть две ошибки: Неподготовлено ReferenceError: момент не определен fullcalendar.js? Body = 1: 13 Неоткрытый ReferenceError: момент не определен fullcalendar.min.js? body = 1: 7 – Jean