1

I'm trying to add a calendar to my web app but it's not working. I followed the instructions below and I can't get the calendar to populate.

Do I need to write all the Javascript as well? This seems like a quick step to install a calendar. I'm sure I'm missing some steps for installation but this is what I found online.

  1. Add to gemfile
 

    gem 'fullcalendar-rails'
gem 'momentjs-rails'


2. Bundle install and restart rails server.


3. Add to application.js
 

    //= require moment 
    //= require fullcalendar
    $('#calendar').fullCalendar({});

  1. Add to application.css
 

    *= require fullcalendar

  2. In view, include the following html:
 

    <div id="calendar"></div>
jkloster7
  • 39
  • 1
  • 8
  • I think step 3 is your problem – DiegoSalazar Sep 28 '16 at 20:59
  • Ok I will look at it. Can you elaborate? What is wrong with step 3? How should I change it? – jkloster7 Sep 28 '16 at 21:11
  • check your javascript errors in devtools. You probably have to use document ready as well, see http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links – max pleaner Sep 28 '16 at 21:11
  • I tried to add each of these individually but it didn't seem to fix the problem. $document.ready(function(){ ('#calendar').fullCalendar({}); }) $(document).on('turbolinks:load', function() { ('#calendar').fullCalendar({}); }); – jkloster7 Sep 28 '16 at 21:15

2 Answers2

3

You have to add options to the fullCalendar plugin so that it knows where to fetch event data from:

$('#calendar').fullCalendar({
    eventSources: ["/events"]
});

In the above example /events is a path to a controller of yours from which you will respond with Event Data

https://fullcalendar.io/docs/event_data/

Alternatively, you can provide your own event data directly to the fullCalendar plugin:

$('#calendar').fullCalendar({
    events: [
        {
            title  : 'event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09T12:30:00',
            allDay : false // will make the time show
        }
    ]
});

https://fullcalendar.io/docs/event_data/events_array/

It will also help to place the plugin initializer inside a jQuery ready function so that the DOM loads first:

$(function() {
  $('#calendar').fullCalendar({ eventSources: ["/events"] });
})
DiegoSalazar
  • 13,361
  • 2
  • 38
  • 55
  • Ok great. I will try these suggestions and see what happens. Thanks! – jkloster7 Sep 28 '16 at 21:29
  • I've tried everything and it's not working. Could it be a problem with my jquery? I have tried linking to a cdn, downloading a file, etc. But it's not working. My javascript works just fine. Here is what the head of my application.html.erb file looks like... – jkloster7 Sep 29 '16 at 14:48
  • <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'jquery-3.1.0', 'application' %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> – jkloster7 Sep 29 '16 at 14:49
  • In the console it is telling me that the files are not found. – jkloster7 Sep 29 '16 at 14:51
  • So sorry I kept messing with it and now my test JQuery is working, however I still can't get the fullCalendar to work. I'll keep at it. – jkloster7 Sep 29 '16 at 14:55
  • are you actually giving it event data? – DiegoSalazar Sep 29 '16 at 14:59
1

I have been wrestling with FullCalendar for weeks. I know the question was posted some 20 months ago but perhaps my answer will help others in the future.

Make sure your date format is correct! If it works by setting the event data directly such as Diego suggested above then you know that’s the problem.

start : ‘2018-05-03’ or ‘2018–05-03 12:30’ works

Transferring event data from ruby (or other application language) to json is problematic. Some have suggested using the ‘gon’ gem but I am still working on that.

sschlegelmilch
  • 31
  • 3