FullCalendarTimeLine 资源时间线视图

最新推荐文章于 2024-08-24 08:32:31 发布

多喝烫水吖

最新推荐文章于 2024-08-24 08:32:31 发布

阅读量4.5k

点赞数

分类专栏： FullCalendar 文章标签： java

本文链接：https://blog.csdn.net/weixin_39266807/article/details/120223004

版权

本文介绍了如何在FullCalendar版本5.9.0中设置中文，并展示了如何配置视图、资源、事件及点击事件处理。通过后台API获取并展示会议室使用情况，实现了日、周、月视图切换，同时在事件鼠标进入时显示详细信息。

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

fullCalendar 版本5.9.0

FUllCalenda官网有对应视图的代码以及编辑工具

关于fullCalendar相关文件正常引入就可以

控制台出现即可

我们要做的就是找到对应的数据然后调用SuccessBack方法即可，关于插槽标签的色块可以通过后台设置，对应的点击事件使用fullCalendar中的 eventMouseEnter方法即可

    <link href="scheme/fullcalendarnew/lib/main.css" rel="stylesheet">
    <link href="scheme/fullcalendarnew/lib/main.min.css" rel="stylesheet">
    <script src="scheme/fullcalendarnew/lib/main.js"></script>
    <script src="scheme/fullcalendarnew/lib/main.min.js"></script>
    <script src="scheme/fullcalendarnew/lib/locales-all.js"></script>
    <script src="scheme/fullcalendarnew/lib/locales-all.min.js"></script>
    <script src='scheme/fullcalendarnew/lib/locales/zh-cn.js'></script>

document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
    // timeZone: '