Home>

javascript - load json file with fullcalendar v4

and the problem i am experiencing

Just started JavaScript about 3 days ago.
I'm currently customizing fullcalendar,
Since we want to add a lot of events, we are creating event data locally in a JSON file and trying to load it into a calendar program.
So I created a file called events.json, but I can't read it as an event.

Applicable source code 
<! DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8' />
<link href = '../packages/core/main.css' rel = 'stylesheet' />
<link href = '../packages/daygrid/main.css' rel = 'stylesheet' />
<script src = '../packages/core/main.js'></script>
<script src = '../packages/interaction/main.js'></script>
<script src = '../packages/daygrid/main.js'></script>
<script src = '../packages/core/locales/ja.js'></script>
<script src = "events.json"></script>
<script>
// function
var dDate
function getNowYMD () {
  var dt = new Date ();
  var y = dt.getFullYear ();
  var m = ("00" + (dt.getMonth () + 1)). slice (-2);
  var d = ("00" + dt.getDate ()). slice (-2);
  dDate = y + "-" + m + "-" + d;
}
  document.addEventListener ('DOMContentLoaded', function () {
    var calendarEl = document.getElementById ('calendar');
    var calendar = new FullCalendar.Calendar (calendarEl, {
      locale: 'ja',
      plugins: ['interaction', 'dayGrid'],


      customButtons: {
        prev10: {
      text: '<<',
      click: function () {
        alert ('Display 10 years ago (provisional)');
      }
    },


    next10: {
      text: '>>',
      click: function () {
        alert ('Display 10 years later (provisional)');
      }
    },


      shukujitu: {
      text: 'Holiday',
      click: function () {
        alert ('Display holidays (temporary)');
      }
    },rokuyo: {
      text: 'Six Days',
      click: function () {
        alert ('Display six days (temporary)');
      }
    }
  },



      header: {
        left: 'prev10, prevYear, prev, next, nextYear, next10 today',
        center: 'title',
        right: 'dayGridMonth shukujitu rokuyo',
      },


      defaultDate: dDate,
      navLinks: true, // can click day/week names to navigate views
      businessHours: true, // display business hours
      editable: true,
      events: 'events.json',
    });
    calendar.render ();
  });
</script>
<style>
  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }
  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }
</style>
</head>
<body>
   
</body>
</html>
[{
          "title": "unchi",
          "start": "2019-11-03",
          "constraint": "businessHours"
        },


        {
            "title": "Meeting",
            "start": "2019-11-13",
            "constraint": "availableForMeeting",
            "color": "# 257e4a"
        },{
            "title": "Conference",
            "start": "2019-11-18",
            "end": "2019-11-20"
        },


        {
            "title": "Party",
            "start": "2019-11-29"
        },



        {
            "groupId": "availableForMeeting",
            "start": "2019-11-11T10: 00: 00",
            "end": "2019-11-11T16: 00: 00",
            "rendering": "background"
        },


        {
            "groupId": "availableForMeeting",
            "start": "2019-11-13",
            "rendering": "background"
        },

 

        {
            "start": "2019-11-24",
            "end": "2019-11-28",
            "overlap": false,
            "rendering": "background",
            "color": "# ff9f89"
        },


        {
            "start": "2019-11-06",
            "end": "2019-11-11",
            "overlap": false,
            "rendering": "background",
            "color": "# ff9f89"
        }
    ]

JSON files are judged to be loaded correctly on the net, so we believe that they cannot be read correctly in HTML and JavaScript.

Supplemental information (site i am referring to)

FullCalendar version 4 installation sample.
Fullcalendar-events (as a json feed)

There is a function for reading event data on the official website of Fullcalendar here, but I don't know how to use it.
Fullcalendar-eventDataTransform

It may be a rudimentary question, but thanks for your cooperation.

javascript html jquery json jqueryplug-in
  • Answer # 1

    The cause is a CORS error.

    Please try to replace "CSV file" with "JSON file" in some ways to circumvent the security restrictions of reading external files locally (file: ///).

Related articles