简介
fullcalendar是由typescript编写的
安装
# npm 安装
npm install --save @fullcalendar/core @fullcalendar/daygrid
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin ]
});
calendar.render();
});
#cdn 在线引用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>截图
- 拖拽事件
- 时间轴
- 时间表格
- 选择日期
- 后台事件
- 主题
- 语言
总结
源码地址：https://github.com/fullcalendar/fullcalendar，有兴趣的同学可以去研究。
最后希望大家多多评论、关注、点赞、转发，你们的支持，是我更新下去的最大动力。