前提・実現したいこと
RailsでFullCalendarを導入したいのですが
https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4
上記のページを参考に導入すると
Eventを入力する欄は表示されますが肝心のカレンダーが表示されません。
発生している問題・エラーメッセージ
Console上には
application.js:11 Uncaught Error: Cannot find module 'jquery' at webpackMissingModule (application.js:11) at Object../app/javascript/packs/application.js (application.js:11) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83
とエラーが表示されJavaScriptが表示されません。
ターミナル上だと
ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'fullcalendar' ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'jquery' ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'jquery_ujs' ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'moment'
と表示されます。
該当のソースコード
// 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("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") require("jquery_ujs") require("moment") require("fullcalendar") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) (function () { // 画面遷移を検知 (document).on('turbolinks:load', function () { if (('#calendar').length) { function Calendar() { return ('#calendar').fullCalendar({ }); } function clearCalendar() { ('#calendar').html(''); } (document).on('turbolinks:load', function () { Calendar(); }); (document).on('turbolinks:before-cache', clearCalendar); //events: '/events.json', 以下に追加 ('#calendar').fullCalendar({ events: '/events.json', //カレンダー上部を年月で表示させる titleFormat: 'YYYY年 M月', //曜日を日本語表示 dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'], //ボタンのレイアウト header: { left: '', center: 'title', right: 'today prev,next' }, //終了時刻がないイベントの表示間隔 defaultTimedEventDuration: '03:00:00', buttonText: { prev: '前', next: '次', prevYear: '前年', nextYear: '翌年', today: '今日', month: '月', week: '週', day: '日' }, // Drag & Drop & Resize editable: true, //イベントの時間表示を24時間に timeFormat: "HH:mm", //イベントの色を変える eventColor: '#87cefa', //イベントの文字色を変える eventTextColor: '#000000', eventRender: function(event, element) { element.css("font-size", "0.8em"); element.css("padding", "5px"); } }); } }); });
試したこと
gem 'jquery-rails', '4.4.0' ←最新のJQueryを導入 gem 'fullcalendar-rails' gem 'momentjs-rails'
require("turbolinks").start()の削除 gem 'turbolinks', '~> 5'の削除
を試してみたもののJavaScriptは表示されませんでした。
初心者で分かりづらいですが回答お願いします。
あなたの回答
tips
プレビュー