CODEWITHSUNDEEP
javascriptjqueryruby-on-railsfullcalendar
Jean
Jean

Reputation: 5411

implementing full calendar on a rails3 app

I'm trying to implement the FullCalendar on my rails apps, I have the following files on my assets/javascritp folder:

fullcalendar.min.js moment.min.js

and I have the following lines on my application.js file:

//= 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

then on my view, I have the following div with the "calendar" id, like this (I'm using 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

This is my jquery code:

: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'
    }
    ]
  });
});

But it does no work. I check the developers tool I found the following error:

Uncaught TypeError: undefined is not a function

enter image description here

I made the same thing on a html file and everything works great, so I don't understand what I'm doing worng.

Any help would be appreciate. Thanks

UPDATE

I change the order of the application.js file like this:

//= 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

But now I have the following errors:

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

Upvotes: 0

Views: 1532

Answers (1)

Nitin
Nitin

Reputation: 7366

TypeError: Undefined is not a function error occurs when there is any problem in sequence of jquery you are loading Or you are loading jquery twice. Any dependent library not loading causes this error also. try swapping order in your application.js file. First attempt to load //= require moment.min after //= require jquery .

Upvotes: 1

Related Questions