fullcalendar-rails 安装不工作

Question

我对 Rails 和一般编程还很陌生，我正在尝试将 fullcalendar-rails 添加到一个相当基础的新应用程序中。不幸的是，安装过程似乎完全失败了。

按照 https://github.com/bokmann/fullcalendar-rails 提供的说明，在确保 javascript 通常在应用程序中启用后（确保我安装了 jquery 等），导致错误声明$(...).fullCalendar is not a function。这让我觉得我的 Rails 应用程序根本看不到 fullcalendar 源文件，我不确定如何才能看到它们。我尝试手动将文件添加到我的应用程序结构中（在 /lib 和 /vendor 中），但没有效果。

作为参考，我的application.js是这样的：

// 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({});

更新：根据 razvans 的回答，我的 application.js 看起来像这样：

// 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();

我收到以下错误：

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

gem 用于您不使用的资产管道。您在 webpacker 上并且在 javascript 个文件中，您需要使用 import/require。 //= require something 不起作用。 随意删除那些 gem。

使用 webpacker 你需要用 yarn 添加包：

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

然后导入。

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

我不使用该库，但我只是为此尝试了一下。这是它的样子:)

fullcalendar-rails 安装不工作

fullcalendar-rails installation not working

ruby-on-rails

fullcalendar