V-calendar: Disabling Default Theme/Style?

[bornResponsive]

Is there any configuration for disabling the default TailwindCSS and use your own custom stylesheet?
The manual does not provide any information about this with NPM or CDN installation.

Help very much appreciated.

[janvanhelvoort]

On rule 7 of vue.config.js, the extract of css is disabled, therefore the css is included inside the javascript and always loaded inside a <style> tag inside the html. - https://github.com/nathanreyes/v-calendar/blob/master/vue.config.js#L7.

We also have problems with this, because of the inline style, our CSP rules will not load the styles. - https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

If we change rule 7 to true, we will get an external css file, but this will be a breaking change, because everyone needs to load the css by them self.

[bornResponsive]

Hi Jan.
Thanks for the feedback.

So just by changing line 7 to true, TailwindCSS will be disabled for the NPM installation?

I think it will be great if V-Calendar offered 2 option for CDN - one with TailwindCSS and the other barebone just with flexbox/grid layout style.

[janvanhelvoort]

Hi Tuguldur,

Yes, then the lib folder contains a separate css file, if you don't import that file inside you project, the calendar has no styles. But this must be implemented though an pull request or change from @nathanreyes and will break the default working of the package.

@nathanreyes If you need help, let me know. At the moment our release is depending on this change.

[nathanreyes]

Just a couple of notes.

For 2.0 and later, the use of Tailwind classes has been dropped to trim the package size (even with PurgeCSS used). While PurgeCSS theoretically should have taken care of this, many classes needed to be whitelisted in order to support all the supported theme colors. Using CSS variables just made everything simpler using a more conventional CSS approach. As a result, it should also help to more easily override class styles.

All sections of the calendar have had classes applied in the form of vc-pane, vc-title, vc-weeks, vc-weekday, etc. that you can target.

In know that doesn't directly address the question posed, but it is one option to consider.

@janvanhelvoort Regarding extracted styles, if we were to prevent a breaking change, one option might be to include a separate build in a nested package directory. For example, one would have to do something like npm i -S v-calendar/with-css or something like that.

I hesitate to break the current default workflow. Version 3.0 is currently being used for Vue 3 support (which could be adjusted to use this extracted style approach), but if I incorporate this in a minor release (2.x) then I could see lots of people being upset when they upgrade.

I'm definitely open to options though.

[janvanhelvoort]

@nathanreyes. Thank you for the response. I won't suggest to change it in a minor release, but if we can supply 2 more files inside the output directory, highlighted in the screenshot above, it would be great.

Because of the css, which is inside the v-calandar.umd file, webpack won't/doesn't extract that css into our own css bundles. therefore the umd file will inject the css as inline style tags in the header.

If we can find a solution where we have a umd file without css inside it, and a separated css file, we can import that css into our bundle.

[andreasvirkus]

I think this CSS change (dropping Tailwind and the new vc- prefixed classes) should also be documented somewhere 🙏 The theming guide is very outdated - https://vcalendar.io/api/v2.0/theme-styles.html

[victor-chauzov]

Spent a huge amount of time (studied examples, Issues, tried everything written in the documentation), but to no avail. I could not connect the css to the calendar. As a result, it works as it should, but it looks ugly and not like on your example page.

I cannot repeat as written in the example
... < span class = "day-label text-sm text-gray-900"> ...

(https://vcalendar.io/ Custom Calendars - Roll your own calendars using scoped slots https://github.com/nathanreyes/v -calendar / blob / master / docs / .vuepress / components / homepage / custom-calendar.vue)

Please tell me how to properly connect the css to my project. This is probably a small fix, but I can't do it without help.

I have attached a file what my calendar looks like