Home>

I am making a schedule app using full calendar on Rails. I wrote the view file with reference to the official website. The calendar is displayed successfully, but when I verify the Console and confirm it, I get an error. I verified the demo screen on the official page and the css error was apparently resolved, but loading js and another error just can't be resolved. I think js has the wrong src specification, but I couldn't solve it by myself. I have no idea about the other error and am in trouble. I would appreciate it if anyone could tell me.

] (68c465ef25baeebd7725d3479a168ed6.png)

Corresponding source code

app/views/events/index

<! DOCTYPE html>
<html>
<head>
  <meta charset ='utf-8' />
  <link href ='fullcalendar/main.css' rel ='stylesheet' />
  <script src ='fullcalendar/main.js'></script>
  <script>
      document.addEventListener ('DOMContentLoaded', function () {
        var calendarEl = document.getElementById ('calendar');
        var calendar = new FullCalendar.Calendar (calendarEl, {
          initialView:'dayGridMonth'
        });
        calendar.render ();
      });
  </script>
</head>
<body>
     
</body>
</html>

Arrangement of each file
・ Main.css

・ Main.js


What I tried

Refer to the demo screen and describe the part that seems to be the error corresponding part of the index file as follows

app/views/events/index

<link href ='assets/main.css' rel ='stylesheet' />
<script src ='javascript/main.js'></script>
Supplementary information (FW/tool version, etc.)

Rails version 6.0.0
fullcalendar version 5.4.0

I have just started the program recently, and I think there is a lack of explanation for the questions, so I would appreciate it if you could point out or ask questions. It seems that fullcalendar is also updated frequently, so it's hard to find an article about the latest version. I'm sorry, but I would like to ask a professor.

  • Answer # 1

    Thank you for watching (I think some of you may have been looking for a solution). By deleting the description of the following part of the index file, the error on the view screen disappeared. The calendar is still displayed. Perhaps it was reading in the first place and it was an error due to double reading. I do not know the true cause, but I will take the form of ending once.

    app/views/events/index

    <meta charset ='utf-8' />
      <p>
      <script src ='fullcalendar/main.js'></script>
      <script>
          document.addEventListener ('DOMContentLoaded', function () {
            var calendarEl = document.getElementById ('calendar');
            var calendar = new FullCalendar.Calendar (calendarEl, {
              initialView:'dayGridMonth'
            });
            calendar.render ();
          });
      </script>
    </head>
    <body>