Vue组件中使用 fullcalendar

发布于:2021-07-19 07:11:00

    首先下载安装所需要的包

    npm i @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/vue
    引入到当前vue 组件中

    import FullCalendar from "@fullcalendar/vue";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import interactionPlugin from "@fullcalendar/interaction";
    注册组件


    components: {
    FullCalendar,
    },
    配置参数


calendarOptions: {
locale: "zh", // 中文
buttonText: {
// 按钮文本
today: "今天",
month: "月视图",
week: "周视图",
// day: "日视图",
},
plugins: [dayGridPlugin, interactionPlugin],
headerToolbar: {
left: "prev,next today", // 左侧按钮 点击触发对应顺序的字符串代表的事件
center: "title", // 中间标题
right: "dayGridMonth,dayGridWeek", // 右侧按钮 点击触发对应顺序的字符串代表的事件
},
initialView: "dayGridMonth", // 初始化 开始视图类型
editable: false, // 是否可以拖拽编辑
selectable: true,
dateClick: this.handleDateClick, // 点击日期触发事件
events: [ // 存储 添加的日程
{title: "放假",
start:"2021-03-05",
end:"2021-03-08", // 结束日期(不包含当天)
id: "bianhao1111",
color: "#f00",
}
],
eventClick: this.handleEventClick, // 点击 添加的日程触发事件
},

    效果图如下所示

相关推荐

最新更新

猜你喜欢