手把手教你vue项目使用fullcalendar

组件官网 与 配置文档

1. 首先下载

npm install --save @fullcalendar/core @fullcalendar/daygrid

2. 引用css 与 js

<script src="~@fullcalendar/core/locales/zh-cn.js"></script>
<style lang='scss' scoped>
	@import '~@fullcalendar/core/main.css';
	@import '~@fullcalendar/daygrid/main.css';
</style>

3. vue.config.js配置 “~”指向 node_modules

const path = require('path')
module.exports = {
	chainWebpack: config => {
		config.resolve.alias
			.set('~', path.join(__dirname,'./node_modules')) 
	}
}

4. 页面引用 组件渲染

// 页面写一个id为calendar 的容器
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
	var calendarEl = document.getElementById('calendar');

	let calendar = new Calendar(calendarEl, {
		plugins: [dayGridPlugin],		// 组件种类
		defaultView: 'dayGridMonth',	
		locale: 'zh-cn',				// 中文
		events: [{						// 展示数据
				"title": "开会",
				"start": "2020-04-01"
			},
			{
				"groupId": "999",
				"title": "上班",
				"start": "2020-04-09T06:00:00+00:00"
			},
			{
				"groupId": "999",
				"title": "吃饭",
				"start": "2020-04-09T12:00:00+00:00"
			},
			{
				"url": "https://www.baidu.com/",
				"title": "跳转百度",
				"start": "2020-04-02",
				"end": "2020-04-07",
				"color": 'pink'
			}
		]
	});
	calendar.render();
});

跑起项目就看到效果图了