vue.js 完整日历不加载CSS

w6lpcovy  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(156)

我正在我的项目中实现fullcalendar,它有Laravel 9和Vue 3。
我认为它没有加载css,因为屏幕上的日历看起来像这样:Calendar Image
我已经做了几个设置。甚至Vue部分也在工作,因为日历在工作。
下面的图片是今天的设置。

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')
                })
        }
    },
}

在完整的日历文档中,以下是关于CSS的说明。
CSS:只要您的生成系统能够处理.css文件导入,就会自动加载FullCalendar的所有CSS。有关配置生成系统的详细信息,请参阅使用ES6生成系统进行初始化。https://fullcalendar.io/docs/vue#:~:text = ticket%20%23152. -,CSS,-All%20of%20FullCalendar%E2%80%99s
当我访问关于ES6 Build System的link时,它描述了我需要使用webpack,而在Laravel应用程序中,使用了vite。
有人能帮我解决这个问题吗?

zwghvu4y

zwghvu4y1#

我通过加载分配日历的大小来解决它,希望这能解决你的问题,我用cdn做了

calendar.render();
calendar.setOption('height', 700);

相关问题