我正在我的项目中实现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。
有人能帮我解决这个问题吗?
1条答案
按热度按时间zwghvu4y1#
我通过加载分配日历的大小来解决它,希望这能解决你的问题,我用cdn做了