Fullcalendar implementation issue

Design help Custom code
1

I followed this great tutorial on how to implement the fullCalendar library to a client’s site. The tutorial leaves me with a fully built feature. I need to move it over to production and I am running into CORB issues. My approach was to swap out the localhost script for a link to the exact same file that is on a github repo.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I’m not seeing CORS errors in your setup, however you’re getting a script syntax error;

image
image1143×624 52.2 KB

1 Like
3

Screen Shot 2023-06-07 at 2.25.20 PM
Screen Shot 2023-06-07 at 2.25.20 PM1920×368 52.9 KB

Here is the CORB error. I was trying to get around that by adding all the code into the webpage instead of hosting it on my github.

The code works as written in my editor / local env. I’m not too familiar with Typescript and this kind of syntax yet, so I am not sure where the fix is for that )

Here is the link to the page:

4

So, very interesting-

Githubusercontent serves only this CORS response header;

Access-Control-Allow-Origin: *

While CDNs like jsDeliver, which I use for Sygnal Attributes, serves both of these;

Access-Control-Allow-Origin: *
Cross-Origin-Resource-Policy: cross-origin

My suspicion is that modern browsers may be pickier, and picky specifically on certain file types that they don’t trust.

In your case, the first problem is that you’re trying to serve a typescript file directly to the browser, which is not a language the browser understands. Typescript files must be compiled first, into JavaScript files, and those can be then embedded into your page.

I’d sort out that design detail first, and then see if your CORB issue goes away with that correction.

If not, it may just be that Githubusercontent is obsolete, and you might switch to jsDelivr to serve your content ( your Github repo needs to be public ). Or you could serve it through a separate hosting env like Netlify which can also publish from Github private repos.

5

Thanks Michael for sticking with this and helping. I found a solution:

using this naming convention for my script while also utilizing the build script in the project. This is my first big build incorporating a library like this. Feels damn good!

<script type="text/javascript" src='https://cdn.jsdelivr.net/gh/@username/repo/path/file> </script>