Fullcalendar doesn't load CSS - laravel

Question

I'm implementing fullcalendar in my project that has Laravel 9 and Vue 3.
I think it is not loading the css as the on-screen calendar is looking like this: Calendar Image.
I have already made several settings. Even the Vue part is working because the calendar is working.
Below in the images are the settings that are today.
package.json
{
"private": true,
"scripts": {
"dev": "vite --host",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"bootstrap": "^4.6.2",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.32.11",
"script-loader": "^0.7.2",
"vite": "^3.0.0"
},
"dependencies": {
"#fullcalendar/core": "^5.11.3",
"#fullcalendar/daygrid": "^5.11.3",
"#fullcalendar/interaction": "^5.11.3",
"#fullcalendar/list": "^5.11.3",
"#fullcalendar/timegrid": "^5.11.3",
"#fullcalendar/vue3": "^5.11.2",
"#popperjs/core": "^2.11.6",
"#vitejs/plugin-vue": "^3.1.2",
"laravel-echo": "^1.9.0",
"socket.io-client": "^2.3.0",
"vue": "^3.2.41",
"vue-toastification": "^2.0.0-rc.5"
}
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import fs from 'fs';
const host = 'site.com.br';
export default defineConfig({
plugins: [
laravel({
input: ['resources/sass/app.scss', 'resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
}
}
})
],
server: {
host,
hmr: { host },
https: {
key: fs.readFileSync('C:\\laragon\\etc\\ssl\\privada25296.key'),
cert: fs.readFileSync('C:\\laragon\\etc\\ssl\\certificado25296.crt'),
},
},
});
index.vue
<script>
import { useToast } from "vue-toastification";
import '#fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '#fullcalendar/vue3'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import interactionPlugin from '#fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
}
}
},
mounted() {
const toast = useToast();
this.loadUserCustomers();
Echo.channel('agendamentos_database_user_customer_created')
.listen('UserCustomerCreated', (e) => {
toast.success('Novo cliente vinculado!')
});
},
methods: {
loadUserCustomers() {
axios.get('/api/calendar')
.then(response => {
console.log( response.data.data );
//this.userCustomers = response.data
})
.catch(response => {
console.log('Erro')
})
}
},
}
In the fullcalendar documentation, the following is mentioned about CSS.
CSS: All of FullCalendar’s CSS will be automatically loaded as long as your build system is able to process .css file imports. See Initializing with an ES6 Build System for more information on configuring your build system. https://fullcalendar.io/docs/vue#:~:text=ticket%20%23152.-,CSS,-All%20of%20FullCalendar%E2%80%99s
When I access link about ES6 Build System, it is described that I need to use webpack, and in the Laravel application, vite is used.
Can anyone help me with this problem please?

Answer 1

I solved it by loading allocate the size of the calendar
hope this solve your problem and I did it with the cdn
calendar.render();
calendar.setOption('height', 700);