我的需求只显示当月的日历,类似备忘录提示,就用css把头部隐藏了。
一、在fullcalendar官网下载包fullcalendar-5.3.0.zip,解压完压缩包是这样的:
二、把压缩包里的lib文件夹全部复制到你自己的项目,我自己命名为fullcalendar
三、引入
<link rel='stylesheet' href='fullcalendar/main.min.css' />
<script src='fullcalendar/main.min.js'></script>
<script src='fullcalendar/locales/zh-cn.js'></script>// 中文包 否则显示英文
html
<div class="topBox">
<div id='calendar'></div>
</div>
js
<script>
var monthList=[
{
title: '这是819的备注',
start: '2020-08-19'
},
{
title: '这是819第二个备注',
start: '2020-08-19'
},
{
title: '这是821备注',
start: '2020-08-21'
}, ]
document.addEventListener('DOMContentLoaded', function() {
console.log(monthList)
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
views: 'month',
height: 'auto',
locale:'zh-cn',//引入中文包
// editable: true,
// selectable: true,// 移动日程
events:monthList,// 每日日程渲染
});
calendar.render();
});
</script>
效果图
仅个人记录,若能帮助到别人也是极好的