First you have to add to your gem file
gem 'jquery-rails'
then I always declare it in aplication.js like this
document.addEventListener('turbolinks:load', function () { eventCalendar(); })
and the
//= require fullcalendar
in aplication.js is ok
and the
*= require fullcalendar
in aplication.css is ok

It's fixed now. So when you install the gem fullcalendar you also install gem 'jquery-rails' , which is great but i didn't know, but should have know that when i have on my page jquery allready mentiond, you have to separate them like in this
https://stackoverflow.com/questions/528241/how-do-i-run-different-ve%E2%80%8C%E2%80%8Brsions-of-jquery-on-%E2%80%8C%E2%80%8Bthe-same-page
so, maybe hava a worning in the readme file ?

the thing is that in Rails 5.1, the gem 'jquery-rails' is not by default, so you have to add it and install it. And yes, should be a warning in the readme.

Since this issue is still open, perhaps it's worthwhile if I also say that I cannot get the calendar to show in my app, despite following the instructions in detail. I have it set up to display a calendar on a page that requires devise authentication (i.e. in my calendars controller, before_action :authenticate_user! for the show action).

My gemfile:

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

I also have jquery installed and jquery-ui.

My application.js:

//= require moment
//= require fullcalendar

$('#calendar').fullCalendar({ })

My application.scss
*= require fullcalendar

My calendar#show page
<div id="calendar"></div>

Note: I am not using turbolinks.

I've tried the solutions mentioned under this issue (and another similar issue that is already closed), as well as almost everything there is on stackoverflow. Also tried to install turbolinks again to see if it was the problem but still not working. Can anyone help me figure out what may be wrong? Thanks.

You should write what you tried, I feel people helps you more when you show what you tried.

For example, have you tried writing on console full calendar init function?The more detail the better.

Have you read turbolinks documentation? Post that there, maybe you have the wrong event name?

Maybe there is an error on browser console? Are all scripts loaded in the page in the correct order? What does each part of your code return? Try each part in console to check your assumptions and post that too.

Can you give the code in github ? All of it?

Hi @Oredna, here's my repo: https://github.com/snsmith92/enstyleme/tree/calendar

There is no browser console error and I'm not using turbolinks in my app so I did not read the documentation.

I tried the following (based on stack overflow queries):

1. Adjusting the code in application.js as follows:

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});

2. Removing the before_action :authenticate_user! from the controller (some persons seemed to think devise got in the way of being able to view the calendar)
3. Switching to an older version of full calendar gem
4. Creating a separate fullcalendar.js file with the below. In this case I installed turbolinks to see if it would make a difference in showing the calendar:

var initialize_calendar;
initialize_calendar = function() {
  $('.calendar').each(function(){
    var calendar = $(this);
    calendar.fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      selectable: true,
      selectHelper: true,
      editable: true,
      eventLimit: true,
      events: '/events.json',

      select: function(start, end) {
        $.getScript('/events/new', function() {});

        calendar.fullCalendar('unselect');
      },

      eventDrop: function(event, delta, revertFunc) {
        event_data = { 
          event: {
            id: event.id,
            start: event.start.format(),
            end: event.end.format()
          }
        };
        $.ajax({
            url: event.update_url,
            data: event_data,
            type: 'PATCH'
        });
      },
      
      eventClick: function(event, jsEvent, view) {
        $.getScript(event.edit_url, function() {});
      }
    });
  })
};
$(document).on('turbolinks:load', initialize_calendar);

check if you have in your application.js
//= require jquery
//= require jquery_ujs

Hi @elmoaaron sorry for answering so late. Yes, I do have those in my application.js

Can u upload your project to GitHub?, and then we can check it out and test

It worked for me, for example:

in Gemfile

gem 'rails', '~> 5.1.6'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
gem 'jquery-rails'

in application.js

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require moment 
//= require fullcalendar

in application.css

 *= require_tree .
 *= require_self
 *= require fullcalendar

in app/views/index.html.erb

<div id="calendar"></div>
<script type="text/javascript">
  $('#calendar').fullCalendar({});
</script>

For the main problem, there is still no good news.

I read on a stack overflow answer that you have to populate the full calendar with data in the .fullCalendar() method. Here's the example they provided:

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

Here's the original link: https://stackoverflow.com/questions/39757392/fullcalendar-in-ruby-on-rails-is-not-working