fullcalendar-rails installation not working

Question

I'm fairly new to Rails and programming in general, and I'm trying to add fullcalendar-rails to a fairly basic new application. Unfortunately, the install process seems to fail entirely.

Following the instructions provided at https://github.com/bokmann/fullcalendar-rails, after ensuring that javascript in general is enabled in the app (making sure I have jquery etc installed), results in an error claiming $(...).fullCalendar is not a function. This makes it seem to me that the fullcalendar source files are simply not being seen by my Rails app, and I'm not sure how to go about getting them to be seen. I tried manually adding the files to my app structure (in /lib and /vendor), and that had no effect.

For reference, my application.js is this:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
//= require jquery
//= require moment
//= require fullcalendar

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

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

UPDATE: following razvans's answer, my application.js looks like this:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import $ from "jquery";
require "moment"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const rootEl = document.getElementById('calendar');
const calendar = new Calendar(rootEl, {
    plugins: [dayGridPlugin]
});

calendar.render();

I'm getting the following error:

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\prgrm\benkyou\tripplan\tripplan\app\javascript\packs\application.js: Missing semicolon. (12:7)

  10 |
  11 | import $ from "jquery";
> 12 | require "moment"
     |        ^
  13 |
  14 | Rails.start()
  15 | Turbolinks.start()
    at Parser._raise 

Answer 1

That gem is for Asset Pipeline which you don't use. You are on webpacker and inside javascript files you need to use import/require. //= require something does not work. Feel free to remove those gems.

With webpacker you need to add packages with yarn:

yarn add @fullcalendar/core @fullcalendar/daygrid
yarn add moment

Then import it.

import $ from 'jquery';
require ("moment")

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

function loadCalendar() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    plugins: [dayGridPlugin]
  });

  calendar.render();
};

$(document).on('turbolinks:load', loadCalendar);

I don't use the library but I tried it just for this. Here's how it looks :)