Option to load calendar CSS from an external file instead of injection #7220

artknight · 2023-02-17T22:04:14Z

Checklist

I've already searched through existing tickets
Other people will find this feature useful

Is this feature for a specific connector (React/Angular/etc)?

No connector in particular

Feature Description

Hi,
I am seeing that the CSS is getting injected upon calendar initialization. I am wondering if there is a way to have an external CSS file that I could use instead?

better caching
main reason --> I need to override some of the styles and would prefer NOT to use !important. With an external CSS file I can just load my overrides afterwards.

Thank you!
Art

The text was updated successfully, but these errors were encountered:

artnikbrothers · 2023-02-22T20:16:10Z

I have the same issue with React and Fullcalendar 6 version. Version 5 worked fine. It happens only in production version. Here is an example of how the styles are injected to the head instead of bundled css file

I see that there is related issue which was closed #7167

lukas-siarny · 2023-02-23T16:09:52Z

We have the same problem, so we downgraded to V5 until we find a solution for this

acerix · 2023-02-28T00:02:00Z

I can see how that could be useful.

As a workaround, you could load (inject) your CSS after the calendar is loaded. For example, this shows the CSS not working initially, but after making some edit in the CSS, codepen will live reload the CSS and it then gets applied.

https://codepen.io/acerix/pen/BaOpaQq?editors=0110

artknight · 2023-02-28T05:14:27Z

@acerix Thank you for the work-around. Unfortunately that does not work for us. I would still prefer an option to load the CSS file outside of JS.

malte94 · 2023-03-14T18:39:13Z

@artnikbrothers Thank you for referencing my previous ticket, which was closed unfortunately.

+1 on this ticket now to bring back the functionality from v5 to properly load external stylesheets.

malte94 · 2023-03-14T19:43:28Z

I could find a workaround. However, this will not work with CSS preprocessors.

Place a "Calendar.css" in your /public folder.
Use the following code on your Calendar's component:

React.useEffect(() => {
    const link = document.createElement('link');
    link.href = process.env.PUBLIC_URL + '/Calendar.css';
    link.rel = 'stylesheet';
    document.body.appendChild(link);

    return () => {
        document.body.removeChild(link);
    };
}, []);

artnikbrothers · 2023-03-14T20:58:17Z

Since I didn't want to spend time on finding the best solution and at the same time didn't want to use !important for every style, I've just added a parent class to my css selectors to overwrite the default styles like so:

.my-cool-calendar {
  // calendar styles which I want to overwrite
 .fc {
    ....
  }
}

arshaw · 2023-03-21T21:38:40Z

Version v6.1.5 now ensures FullCalendar's styles load higher-up in the <head> thus allowing your custom styles to take higher precedence.

https://fullcalendar.io/docs/month-view-demo

Is this sufficient for people?

I know people were hoping FullCalendar stops injecting its own styles and instead provides a stylesheet to include, however, this comes with a lot of complexity for the developer, namely that each plugin provides its own styles, some plugins are inter-dependent, and thus the developer would need to understand the dependency graph and import styles in an exact order. This is what we had in v4 and people were constantly screwing it up.

cwolcott · 2023-03-30T12:45:56Z

Works great for me

artknight · 2023-03-30T15:16:26Z

Why can't the fullcalendar css be injected as a link tag rather than within the <style> tags? This way the developers could make sure it does not get injected multiple times per page

malte94 · 2023-03-30T16:26:55Z

@arshaw Thank you for handling this topic so quickly!
Edit: Works perfectly fine now!

trollbot38 · 2023-03-31T03:05:36Z

Version v6.1.5 now ensures FullCalendar's styles load higher-up in the <head> thus allowing your custom styles to take higher precedence.

https://fullcalendar.io/docs/month-view-demo

Is this sufficient for people?

I know people were hoping FullCalendar stops injecting its own styles and instead provides a stylesheet to include, however, this comes with a lot of complexity for the developer, namely that each plugin provides its own styles, some plugins are inter-dependent, and thus the developer would need to understand the dependency graph and import styles in an exact order. This is what we had in v4 and people were constantly screwing it up.

This doesn't work in nextjs production out of the box. I think ti's having trouble inject those style tags in production, but does work in localhost. Any pointers?

nandorojo · 2023-04-26T19:28:33Z

To echo what @trollbot38 said – since upgrading to v6 from v5, I've noticed that after a client-side route with Next.js, the styles don't get injected properly. Refreshing the page works, but navigating from a different client-side route breaks it. Does this seem like something reasonable that could happen? Thanks!

arshaw · 2023-05-08T21:24:12Z

@trollbot38 and @nandorojo , please see this ticket:
#7284
↑
Could you please visit the link, give a 👍 to vote (?), press the 🔈Subscribe button to receive updates?

hughbris · 2024-01-17T23:08:12Z

[Issue is now closed but in Todo(?) I'm guessing comments here are still considered.]

I know people were hoping FullCalendar stops injecting its own styles and instead provides a stylesheet to include, however, this comes with a lot of complexity for the developer, namely that each plugin provides its own styles, some plugins are inter-dependent, and thus the developer would need to understand the dependency graph and import styles in an exact order. This is what we had in v4 and people were constantly screwing it up.

I feel your pain, but isn't this issue about providing standard CSS as an option? I assume this means a toggle setting of some sort. The KISS option could come with "here be dragons" warnings and we'll have to figure out the correct CSS inclusion order to make it all work. With no guarantees either. Is that reasonable?

Not sure if most library consumers are using framework modules or simply pulling from the CDN. As more of a back end developer not using frameworks or wanting to get into JS builds, I prefer this option as it's more intuitive and standard. (Also I'm grateful for it!) I suppose in your effort/reward equation, you'll want to consider how common my type of library user is.

acerix changed the title ~~Is there a way to have an external CSS file?~~ Option to load calendar CSS from an external file instead of injection Feb 27, 2023

acerix added Discussing Distribution labels Feb 27, 2023

arshaw added this to the upcoming-release milestone Mar 21, 2023

indigoxela mentioned this issue Mar 28, 2023

Background event color broken (green instead of red) backdrop-contrib/resource_timeslots#20

Closed

arshaw modified the milestones: v6.1.5, next-release Apr 18, 2023

arshaw modified the milestones: next-release, v6.1.5 May 8, 2023

arshaw closed this as completed May 8, 2023

hughbris mentioned this issue Jan 18, 2024

Styles still applied to main DOM when using Shadow DOM. #7204

Open

1 task

hughbris mentioned this issue Feb 8, 2024

Callback when the calendar done rendering #7580

Open

2 tasks

hughbris mentioned this issue May 18, 2024

how to modify css to remove list-style:none from <ul> hughbris/grav-theme-solarize#16

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Option to load calendar CSS from an external file instead of injection #7220

Option to load calendar CSS from an external file instead of injection #7220

artknight commented Feb 17, 2023

artnikbrothers commented Feb 22, 2023 •

edited

lukas-siarny commented Feb 23, 2023

acerix commented Feb 28, 2023

artknight commented Feb 28, 2023

malte94 commented Mar 14, 2023

malte94 commented Mar 14, 2023

artnikbrothers commented Mar 14, 2023 •

edited

arshaw commented Mar 21, 2023 •

edited

cwolcott commented Mar 30, 2023

artknight commented Mar 30, 2023

malte94 commented Mar 30, 2023 •

edited

trollbot38 commented Mar 31, 2023

nandorojo commented Apr 26, 2023

arshaw commented May 8, 2023

hughbris commented Jan 17, 2024

Option to load calendar CSS from an external file instead of injection #7220

Option to load calendar CSS from an external file instead of injection #7220

Comments

artknight commented Feb 17, 2023

Checklist

Is this feature for a specific connector (React/Angular/etc)?

Feature Description

artnikbrothers commented Feb 22, 2023 • edited

lukas-siarny commented Feb 23, 2023

acerix commented Feb 28, 2023

artknight commented Feb 28, 2023

malte94 commented Mar 14, 2023

malte94 commented Mar 14, 2023

artnikbrothers commented Mar 14, 2023 • edited

arshaw commented Mar 21, 2023 • edited

cwolcott commented Mar 30, 2023

artknight commented Mar 30, 2023

malte94 commented Mar 30, 2023 • edited

trollbot38 commented Mar 31, 2023

nandorojo commented Apr 26, 2023

arshaw commented May 8, 2023

hughbris commented Jan 17, 2024

artnikbrothers commented Feb 22, 2023 •

edited

artnikbrothers commented Mar 14, 2023 •

edited

arshaw commented Mar 21, 2023 •

edited

malte94 commented Mar 30, 2023 •

edited