Removing problematic frontmatter from json file

Netlify CMS
1

So, thankfully, Netlify CMS allows editing of JSON files, and it is easy to set up. I cannot iterate how completely and unequivocally awesome this is. There is only one small catch that is preventing a full win. The additional frontmatter added by Netlify CMS does not jive with fullcalendar.js.

Fullcalendar expects JSON files containing calendar data to possess the following strict format:

[
  {
    "title": "Another Example Event",
    "start": "2021-10-31T21:30:00",
    "end": "2021-11-01T04:00:00",
    "allday": false,
    "url": "/event/halloween"
  },
  {
    "title": "Example Event",
    "start": "2021-09-26T12:43:00",
    "end": "2021-09-26T13:30:00",
    "allday": false,
    "url": "/event/example-event/"
  }
]

But, Netlify CMS adds a parent declaration to the data, mirroring its own configurational structure.

{
  "events": [ #<--- fullcalendar.js does not like this, and will fail to render data.
    {
      "title": "Another Example Event",
      "start": "2021-10-31T21:30:00",
      "end": "2021-11-01T04:00:00",
      "allday": false,
      "url": "/event/halloween"
    },
    {
      "title": "Example Event",
      "start": "2021-09-26T12:43:00",
      "end": "2021-09-26T13:30:00",
      "allday": false,
      "url": "/event/example-event/"
    }
  ]
}

As mentioned above, the addition of the parent declaration is a result of Netlify CMS’s own configuration:

- label: "Calendar"
          name: "calendar"
          file: "content/event/index.json"
          description: "Event List"
          extension: "json"
          fields:
            - label: Events
              name: events # <--- It is here that gets us in trouble.
              widget: list
              fields:
                - {label: Url, name: url, widget: string, required: false, hint: "Url of events."}
                - {label: All-Day, name: allday, widget: boolean, default: false}
                - {label: End, name: end, widget: datetime, format: YYYY-MM-DDTHH:mm:ss}
                - {label: Start, name: start, widget: datetime, format: YYYY-MM-DDTHH:mm:ss}
                - {label: Title, name: title, widget: string}

Understanding it is necessary for Netlify CMS to have the structure that is does, is there anyway to prevent it from rendering the additional parental declaration?

Sorry if this is worded poorly, I need to sleep now. :sleeping: :sleeping_bed:

2

Not sure if you can change how CMS works, but surely you could use events as a data source to your library and that should do the job, correct?

I haven’t jumped a lot to check about Fullcalendar yet, so just making a guess.

3

:flushed: Admittedly, you lost me on this one, but you have nudged me enough in the right direction to understand it will be easier to find a solution with how fullcalendar.js interprets the JSON file than how Netlify CMS generates the file. Well, I guess now is as good of a time as ever to start learning javascript.

4

Yeah, just to give a short description of what I suggested:

You have your data that works as an array: [{title: '',}, {title: ''}].

Netlify CMS converts it to:

{
  events: [{title: '',}, {title: ''}]
}

So your array is same as before, just that it’s getting nested inside the object. So, depending on how you’re loading the JSON object, you can simply access it as foo.events (where foo is the JSON file).

5

Ah… I see what your cooking. :man_cook:
And may I say, what a brilliantly simple means to provide a solution. If this were python, I would have used strip() to remove the extra bits of code, and I did attempt to use JavaScript’s filter(), but it did not resolve the issue. Currently the block of code stands at:

$(document).ready(function () {

		const calFile = '{{ .Site.BaseURL }}event/index.json';

		console.log("Ready...");

		$('#calendar').fullCalendar({
			events: calFile.events
		})
});

Not sure if this is what you had in mind, but I gave it a try.

I have opened up an issue with the developer of the addon I am working with to generate the calendar view. To be honest, the version of fullcalendar employed by this addon is several years old (jun 2018) and does not match the currently available documentation provided by the fullcalendar project. So the entire code base could use a fresh rewrite to bring it up to date with the current release, and this would probably be a wise thing to do at this point. :grin:

6

Yeah that’s what should work in JavaScript. But I believe that’s not the correct way to load an external JSON file.

It should be done like:

fetch('/event/index.json').then(response => {
  return response.json()
}).then(data => {
  $('#calendar').fullCalendar({
    events: data.events
  })
})

These extra steps are needed because you’re trying to load an external JSON file. If your JSON existed in the JS file itself, I think your code could have worked.

1 Like
7

EUREKA!!! That appears to have worked. A thousand and one blessings… Shazam!