FullCalendar-5.10.x timeGridWeek 完整配置样例

最新推荐文章于 2024-09-23 10:05:56 发布

最新推荐文章于 2024-09-23 10:05:56 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_35473192/article/details/123686807

版权

这个博客详细介绍了如何配置一个日历组件，包括设置初始视图、时间范围、插件、选择和编辑功能。此外，还展示了如何处理日期选择、事件拖拽停止和日历渲染的回调函数。通过自定义按钮实现日历导航，并提供了事件点击的处理方法。

摘要由CSDN通过智能技术生成

      calendarOptions: {
        // locale: "zh",
        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
        initialView: "timeGridWeek",
        firstDay: 1, //设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        slotLabelFormat: {
          // 左侧时间格式
          hour: "2-digit",
          minute: "2-digit",
          meridiem: "lowercase",
          hour12: false, // false设置时间为24小时
        },
        selectable: true, //可以选中时间,
        selectMirror: true,
        editable: true,
        allDaySlot: false, //是否显示全天
        dropable: true,
        height: 700,
        handleWindowResize: true,
        slotMinTime: "08:00:00", // 开始时间
        slotMaxTime: "22:00:00", // 结束时间
        events: [],
        // 选中事件
        select: function (info) {
          alert("selected " + info.startStr + " to " + info.endStr);
        },
        // 拖