前端Vue制作日历插件FullCalendar
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
前端Vue制作日历插件FullCalendar
效果图
安装
Vue2:npm install --save @fullcalendar/vue @fullcalendar/core
FullCalendar不同的视图是不同的插件,用的时候需要npm安装一下
npm i - s @fullcalendar/daygrid 月视图
npm i - s @fullcalendar/list 列表视图listDay、listWeek、listMonth和listYear
npm i - s @fullcalendar/timegrid 时间线视图
npm i - s @fullcalendar/moment 时间格式化,但是要先npm i moment
由于@fullcalendar/moment插件自己就用到了moment插件,但是安装的时候并没有带进来,所以需要我们手动安装,不然用的时候就会报错(大无语事件)
import zhcn from "@fullcalendar/core/locales/zh-cn";//引入这个文件用来汉化
其他语言包可以在这里找一下,直接配置locale: "zh-cn"有问题,所以我选择用包然后配置locale:zhcn
完整代码
<template>
<div class="main">
<FullCalendar ref="funllCalendarRef" :options="calendarOptions" />
</div>
</template>
<script>
import "@fullcalendar/core/vdom";
import FullCalendar from "@fullcalendar/vue";
import zhcn from "@fullcalendar/core/locales/zh-cn"; //中文
import dayGridPlugin from "@fullcalendar/daygrid"; //dayGridMonth、dayGridWeek、dayGridDay
import listPlugin from "@fullcalendar/list"; //列表视图listDay、listWeek、listMonth和listYear
import timeGridPlugin from "@fullcalendar/timegrid"; //时间线视图timeGridWeek、timeGridDay
import momentPlugin from "@fullcalendar/moment"; //时间格式化,但是要先npm i moment
export default {
components: {
FullCalendar,
},
data() {
return {
myCalendar: null,
calendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin], //视图插件
initialView: "dayGridMonth",
locale: zhcn, //中文包
// locale: "zh-cn", // 切换语言为中文,有问题
customButtons: { addButton: { text: "新建", click: this.handleAdd } }, //自定义按钮
headerToolbar: {
//按钮位置
start: "addButton",
center: "prev title next",
right: "dayGridMonth,timeGridWeek,listMonth",
},
buttonText: {
// 按钮文字修改
dayGridMonth: "按月",
timeGridWeek: "按周",
listMonth: "列表",
},
slotLabelFormat: "HH:mm", //标签时间格式化
eventTimeFormat: "HH:mm", //日程时间格式化
allDaySlot: false, //不显示all-day(全天)
firstDay: 0, //设置一周中显示的第一天是哪天,周日是o,周一是1,类推
dayMaxEventRows: 3, //单元格最多显示日程数
fixedWeekCount: false, //月视图显示周数,关闭显示正确周数
// aspectRatio: 1.65, //日历单元格宽度与高度比,数值越大高度越小
// displayEventTime: false, //是否显示日程时间,默认true
// displayEventEnd: false, //是否显示日程结束时间,默认false
// showNonCurrentDates: true, //在月视图中,是否应该呈现上个月或下个月的日期,默认true
// weekends: true, //是否显示周末,默认true
// hiddenDays: [], //隐藏某天 [2,4]:隐藏周二,周四
events: [], //日程
eventDidMount: function (info) {
if (info.event.extendedProps.status === "done") {
info.el.style.color = "#BEBFC3";
info.el.style.textDecoration = "line-through";
}
}, //事件挂载
eventClick: this.handleDelete, //事件点击
},
};
},
mounted() {
this.myCalendar = this.$refs.funllCalendarRef.getApi(); //获取日历Api
this.getEventList();
},
methods: {
getEventList() {
this.calendarOptions.events = [
{
id: 1,
title: "日程1",
start: new Date("2022-06-05T00:00:00"),
end: new Date("2022-06-06T00:00:00"),
extendedProps: {
status: "done",
},
},
{
id: 2,
title: "日程2",
start: new Date("2022-06-08T14:14:00"),
end: new Date("2022-06-08T15:15:00"),
},
];
},
// 新增日程
handleAdd() {
console.log("新建事件");
var dateStr = prompt("输入日期YYYY-MM-DD格式");
var date = new Date(dateStr + "T00:00:00");
if (!isNaN(date.valueOf())) {
this.myCalendar.addEvent({
title: "新增日程",
start: date,
allDay: true,
});
} else {
alert("Invalid date.");
}
},
// 点击日程删除
handleDelete(info) {
let event = this.myCalendar.getEventById(info.event.id);
event.remove();
},
},
};
</script>
<style scoped>
.main {
width: 700px;
height: 700px;
margin: 50px auto;
}
.main >>> .fc-toolbar-chunk {
display: flex;
}
.main >>> .fc-next-button,
.main >>> .fc-prev-button {
background: white !important;
border: none;
box-shadow: none !important;
}
.main >>> .fc-icon-chevron-right,
.main >>> .fc-icon-chevron-left {
color: #2c3e50;
}
</style>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)