FullCalendar日历效果

最新推荐文章于 2024-07-17 08:11:13 发布
最新推荐文章于 2024-07-17 08:11:13 发布
阅读量385 收藏 2
点赞数 1
分类专栏： FullCalendar 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42892210/article/details/107684944
版权

分享一下FullCalendar日历效果
动态新增排班数据
在这里插入图片描述
查看看所有的排班信息
在这里插入图片描述

addShiftManage.html

在这里插入代码片
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="zdxtInclude :: header('新增排班')"/>
    <link th:href="@{/ajax/libs/fullcalendar/core/main.css}" rel='stylesheet' />
    <link th:href='@{/ajax/libs/fullcalendar/daygrid/main.css}' rel='stylesheet' />
    <link th:href='@{/ajax/libs/fullcalendar/timegrid/main.css}' rel='stylesheet' />
    <link th:href='@{/ajax/libs/fullcalendar/timeline/main.css}' rel='stylesheet' />
    <link th:href='@{/ajax/libs/fullcalendar/resource-timeline/main.css}' rel='stylesheet' />
    <link th:href='@{/project/duty/css/shiftDutyManage/shiftDutyManage.css}' rel='stylesheet' />
    <th:block th:include=" zdxtInclude :: footer"/>
    <script th:src="@{/ajax/libs/fullcalendar/lunar.js}"></script>
    <script th:src='@{/ajax/libs/fullcalendar/core/main.js}'></script>
    <script th:src='@{/ajax/libs/fullcalendar/interaction/main.js}'></script>
    <script th:src='@{/ajax/libs/fullcalendar/daygrid/main.js}'></script>
    <script th:src='@{/ajax/libs/fullcalendar/timegrid/main.js}'></script>
    <script th:src='@{/ajax/libs/fullcalendar/timeline/main.js}'></script>
    <script th:src='@{/ajax/libs/fullcalendar/resource-common/main.js}'></script>
    <script th:src='@{/ajax/libs/fullcalendar/resource-timeline/main.js}'></script>
    <script th:src='@{/ajax/libs/fullcalendar/core/locales/zh-cn.js}'></script>
    <script th:src='@{/project/duty/js/shiftDutyManage/addDutyManage.js}'></script>
</head>
<body>
<div id="add_popup" class="popup_menu app-menu">
    <ul id="duty-li">
    </ul>
</div>
<div class="form-group" >
    <label class="control-label">排班标题：</label>
    <div class="col-sm-2">
        <input name="title" id="title" class="form-control" type="text" />
    </div>
</div>
<div class="fc-toolbar duty-time"><div>
</div>
</div>
<div id='calendar'></div>
<script>

    $addDutyManage.loadData();
    /**
     * 去掉浏览器右击事件
     */
    document.oncontextmenu = function(){
        return false;
    }
    /**
     * 日期格式化
     */
    function formatDate(date) {
        var date = new Date(date);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        return YY + MM + DD ;
    }

    /**
     * 每个人每天只能存在一个日程，
     * 如果在选择日程覆盖之前选中的日程（去重）
     * @param arr
     * @returns {*}
     */
    function unique(arr){
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(formatDate(arr[i].start)==formatDate(arr[j].start)){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(i,1);
                    j--;
                }
            }
        }
        return arr;
    }
    /**
     * 点击保存提交日程
     */
    function submitHandler(){
        var dutyArrangeClassData=[];
        var events=$addDutyManage.calendar.getEvents();
        $.each(events,function(i,obj){
            var data=obj._def.extendedProps;
            dutyArrangeClassData.push(data);
        })
        var title=$("#title").val();
        if(title==null || title==""){
            $.modal.alert("请输入标题")
        }else {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: $addDutyManage.dutyData + "/add?title=" + title,
                data: JSON.stringify(dutyArrangeClassData),
                contentType: "application/json",
                success: function (result) {
                    $.operate.successCallback(result);
                },
                error: function (data) {
                    $.modal.alert("操作异常");
                }
            });
        }
    }
</script>
</body>
</html>

addDutyManage.js

在这里插入代码片
var $addDutyManage={
     prefix : ctx + "duty/classRole",
     prefixDetail : ctx + "duty/classesDetail",
     dutyData : ctx +"duty/shiftManage",
     dutyDictItemPrefix: ctx + "project/duty/basDutyDictItem",
     isAddPopupShow : false,
     resources:[],
     calendar:"",
    /**
     * 展示日历日程控件
     */
    loadData:function () {
        $addDutyManage.loadDataAddEvent();
        $addDutyManage.dutyClassRole();
    },

    /**
     * 展示日历日程控件--值班人员只显示自己的
     */
    myLoadData:function () {
        $addDutyManage.loadDataAddEvent();
        $addDutyManage.myDutyClassRole();
    },

    /**
     * 展示日历日程控件添加事件
     */
    loadDataAddEvent: function () {
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            $addDutyManage.loadDutyLi(false,"","","","","");
            $addDutyManage.calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'interaction', 'resourceTimeline' ],
                selectable: true,
                locale:'zh-cn',
                defaultView: 'resourceTimelineWeek',
                views: {
                    resourceTimelineWeek: {
                        type: 'resourceTimeline',
                        duration: { days: 14 },
                        buttonText: '日期',
                        slotDuration: '24:00',

                    }
                },
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next',
                },
                resourceLabelText: '姓名',
                resourceGroupField: 'building',
                resourceOrder: '-building',
                resources: $addDutyManage.resources,
                dateClick: function(arg) {
                    var resourceId=arg.resource.id;
                    /*值班角色编号*/
                    var dutyRoleId=arg.resource.extendedProps.dutyRoleId;
                    /*值班角色名称*/
                    var dutyRoleName=arg.resource.extendedProps.dutyRoleName;
                    /*值班人姓名*/
                    var dutyPerson=arg.resource.extendedProps.dutyPerson;
                    var festivalTime=formatDate(arg.date);
                    if(arg.jsEvent.button==2){
                        $('#add_popup').show();
                        $("#add_popup").css({
                            top: arg.jsEvent.clientY,
                            left: arg.jsEvent.clientX
                        });
                        $addDutyManage.loadDutyLi(true,resourceId,festivalTime,dutyRoleId,dutyRoleName,dutyPerson);
                    }
                },
                eventClick: function(arg) {
                    if(arg.jsEvent.button==2){
                        $('#add_popup').show();
                        $("#add_popup").css({
                            top: arg.jsEvent.clientY,
                            left: arg.jsEvent.clientX
                        });
                        $addDutyManage.loadDutyInfo(arg);
                    }
                },

            });

            $addDutyManage.calendar.render();
        });
    },
    /**
     * 点击eventClick加载班次信息
     */
    loadDutyInfo:function(arg){
        var html="";
        _this=arg;
        $.ajax({
            type:"POST",
            url:$addDutyManage.prefixDetail+"/selectDutyClassesDetailList",
            success:function(res){
                var html=""
                $.each(res, function (i,obj) {
                    html+=' <li><a οnclick="$addDutyManage.submitTags(_this,\''+obj.guid+'\',\''+obj.classesName+'\',\''+obj.classesColor+'\',)">' + obj.classesName + '</a></li>';
                })
                var id=arg.event.id;
                html += ' <li><a οnclick="$addDutyManage.btnDelete(\''+id+'\')">删除</a></li>'
                $("#duty-li").html(html)
            }
        })
    },
    /**
     * 点击dateClick加载班次信息
     */
    loadDutyLi:function(isLi,resourceId,festivalTime,dutyRoleId,dutyRoleName,dutyPerson){
        var result={
            "resourceId":resourceId,
            "festivalTime":festivalTime,
            "dutyRoleId":dutyRoleId,
            "dutyRoleName":dutyRoleName,
            "dutyPerson":dutyPerson
        }
        _this=result;
        var html="";
        $.ajax({
            type:"POST",
            url:$addDutyManage.prefixDetail+"/selectDutyClassesDetailList",
            success:function(res){
                $.each(res, function (i,obj) {
                    if(isLi) {
                        html+=' <li><a οnclick="$addDutyManage.submitTag(_this,\''+obj.guid+'\',\''+obj.classesName+'\',\''+obj.classesColor+'\',)">' + obj.classesName + '</a></li>';
                    }else{
                        $(".duty-time div").append('<span><i style="background: '+obj.classesColor+'"></i>'+obj.classesName+':</span> <span>'+obj.beginTime+'</span><span>-</span><span>'+obj.endTime+'</span>');
                    }
                })
                if(isLi) {
                    var id=dutyRoleId+festivalTime;
                    html += ' <li><a οnclick="$addDutyManage.btnDelete(\''+id+'\')">删除</a></li>'
                    $("#duty-li").html(html)
                }
            }
        })
    },
    /**
     * 加载值班角色
     */
    dutyClassRole:function(){
        $.ajax({
            type:"POST",
            url:$addDutyManage.prefix+"/list",
            async:false,
            success:function(res){
                $.each(res.rows, function (i,obj) {
                    var postName="";
                    if(obj.postList!=null && obj.postList!=""){
                        postName="("+obj.postList[0].postName+")"
                    }
                    $addDutyManage.resources.push({ id: obj.guid,
                        building:$addDutyManage.getEveDutyItemType(obj.dutyPosition),
                        title: obj.dutyName+postName,dutyRoleId: obj.guid,
                        dutyRoleName:obj.dutyPosition,
                        dutyPerson:obj.dutyName});
                })
                return $addDutyManage.resources;
            }
        })
    },

    /**
     * 加载我的值班角色
     */
    myDutyClassRole:function(){
        $.ajax({
            type:"POST",
            url:$addDutyManage.prefix+"/selectMyDutyClassRoleList",
            async:false,
            success:function(res){
                $.each(res, function (i,obj) {
                    $addDutyManage.resources.push({ id: obj.guid,
                        building:$addDutyManage.getEveDutyItemType(obj.dutyPosition),
                        title: obj.dutyName,dutyRoleId: obj.guid,
                        dutyRoleName:obj.dutyPosition,
                        dutyPerson:obj.dutyName});
                })
                return $addDutyManage.resources;
            }
        })
    },
    /**
     * 动态添加日程(如:白班,晚班)dateClick
     */
    submitTag:function(result,guid,classesName,classesColor){
        var id=result.dutyRoleId+result.festivalTime;
        //删除相同时间同一个人的信息
        var event =$addDutyManage.calendar.getEventById(id)
        if(event!=null){
            event.remove()
        }
        //添加事件
        $addDutyManage.calendar.addEvent({
            id:id,
            groupId:result.resourceId,
            resourceId: result.dutyRoleId,
            start: result.festivalTime,
            title:classesName,
            dutyRoleId:result.dutyRoleId,
            dutyDate:formatDate(result.festivalTime),
            classesName:guid,
            backgroundColor:classesColor,
            borderColor:classesColor,});
        $('#add_popup').hide()
    },
    /**
     * eventClick删除原来的日程添加新日程
     */
    submitTags:function(result,guid,classesName,classesColor) {
        //删除相同时间同一个人的信息
        var event =$addDutyManage.calendar.getEventById(result.event.id);
        if(event!=null){
            event.remove()
        }
        //添加事件
        $addDutyManage.calendar.addEvent({
            id:result.event.id,
            groupId:result.event.groupId,
            resourceId:result.event.extendedProps.dutyRoleId,
            start:formatDate(result.event.start),
            title:classesName,
            dutyRoleId:result.event.extendedProps.dutyRoleId,
            dutyDate:formatDate(result.event.start),
            classesName:guid,
            backgroundColor:classesColor,
            borderColor:classesColor,});
        $('#add_popup').hide()
    },
    btnDelete:function(id){
        var event =$addDutyManage.calendar.getEventById(id);
        if(event!=null){
            event.remove()
        }
        $('#add_popup').hide()
    },
    getEveDutyItemType:function (value) {
        var res="";
        var config = {
            url: this.dutyDictItemPrefix + "/getItemListByDataDictValue/dutyposition",
            type: "get",
            dataType: "json",
            data: {},
            async:false,  //同步
            success: function(result){
                for (var i = 0; i <result.length ; i++) {
                    if(value == result[i].paramId){
                        res= result[i].paramValue
                    }
                }
            }
        };
        $.ajax(config);
        return res;
    },
}

官网地址
https://fullcalendar.io/
百度网盘
链接: https://pan.baidu.com/s/1doeNF4G-feYVTa5Oy8zYsA 提取码: 4eup

qq_42892210
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于FullCalendar插件的简单个人日程安排系统（1）
MarhongBaLa的博客
11-27 1953
一个基于FullCalendar插件的个人日程安排系统。
fullCalendar日历控件的使用总结
qq_15704535的专栏
04-23 1726
因为项目需求，用了三天时间研究这个控件，改写成自己想要的。总结如下： 官方文档 http://fullcalendar.io/docs/ 说明文档 http://blog.csdn.net/zhenyuanjie/article/details/16984065 视频教程 http://www.verycd.com/topics/2782321/ 日程例子http://www.very
fullCalendar制作一款简单的日历日程
04-20
NULL 博文链接：https://lihong11.iteye.com/blog/1894505
FullCalendar日历组件集成实战（20）
最新发布
学海无涯，行者无疆
07-17 819
有一些应用系统或应用功能，如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件，但功能比较简单，用来做数据展现勉强可用。但如果需要进行复杂的数据展示，以及互动操作如通过点击添加事件，则需要做大量的二次开发。FullCalendar是一款备受欢迎的开源日历组件，以其强大的功能而著称。其基础功能不仅免费且开源，为开发者提供了极大的便利，仅有少量高级功能需要收费。
有关fullcalendar插件制作日历方法
weixin_44282563的博客
07-23 185
最近在公司需要制作一个办公系统的功能，所以接触到了fullcalendar插件， 相关js包，其中zh-cn是语言包，由于jquery js包在公共页面中已经引用，因此再次没有引入， 以下是js页面。 相关的详细信息可以参考fullcalendar文档，如有疑问欢迎留言互相学习。 第一篇微博，如果写的不好，敬请谅解和提宝贵的意见。 ...
jQuery插件FullCalendar日程表实现可扩展Google日历功能
yingyingol
02-07 80
这个介绍jQuery日历FullCalendar插件是一个非常不错的日历工具，可用于制作日程表或计划安排等，可扩展Google日历功能，制作个性化的日程表，同时可绑定点击事件或拖动事件，使用非常方便，效果图如下： jQuery插件FullCalendar日程表实现可扩展Google日历功能 jQuery插件FullCalendar在线实例 http://arshaw.com/fullcale...
基于jquery的日历控件 fullcalendar 3.9.0
10-07
FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发
fullcalendar 日历改造
泡泡菜叶的博客
03-31 2070
参考：1：http://feifei.im/archives/1682：blog.csdn.net/u010222318/article/details/30083841jsp页面<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.uti
fullcalendar日历
08-06
开发者可以自定义颜色、字体和布局，或者使用预设的主题来快速调整日历的视觉效果。 3. **JavaScript集成**： - `js` 文件夹中通常包含了全历日历的核心库`fullcalendar.js`，以及可能的插件和自定义脚本。在HTML...
fullcalendar显示出勤日_FullCalendar日历插件应用之数据展现(一)
weixin_39749501的博客
12-19 426
开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。由于项目需求，需要通过日历的方式展现某些数据，在网上搜索了很多日历的插件，觉得比较好用的还是fullCalendar，下面是我写的一个简单Demo，如有不足，请多多指正！！！一、引入必要的文件：二、在界面中添加div块：初始化calend...
Strues2+JSP+Fullcalendar 日历任务提醒
10-11
8. **样式和交互优化**：根据项目需求，可能还需要对FullCalendar的样式进行自定义，以及优化用户体验，如添加提示信息、动画效果等。 这个项目展示了如何将前后端分离的开发模式运用到实际项目中，利用Struts2的...
FullCalendar基于spring+springmvc+mybatis整合开发日历功能
04-26
开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。FullCalendar用日历的形式直观的展示了日程安排、代办事宜等事件，那么日历中的事件是怎么添加进去的呢？本文将结合实例详细展示。。
fullcalendar日历 可点击事件
06-16
全历（FullCalendar）是一款广泛使用的JavaScript库，用于在网页上展示交互式的日历视图。这个库允许用户轻松地创建、编辑和显示各种类型的事件，包括日程、会议和其他重要日期。"全历可点击事件"指的是用户可以通过...
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
热门推荐
m0_49017085的博客
04-07 1万+
闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。基本的功能可以新建个日程看看样式，可以拖拽日程进去。提示：以下是本篇文章正文内容，下面案例可供参考以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。
Jeesite引用fullcalendar实现日程排班
m0_60769905的博客
06-07 539
Jeesite引用fullcalendar实现日程排班： 此次使用的是fullcalendar1.6版本。
VUE fullcalendar 制作排班
weixin_43860369的博客
05-29 2418
1.首先在已创建好的VUE项目下用使用命令行安装好fullcalendar依赖，整行输入enter就行。2.安装日历格子组件（daygrid），事件监听\拖拽组件(interaction)此时便已创建好排班日历了，在浏览器即可看到界面。3.在需要使用组件的VUE页面引入组件。
一键排班时代到来
技术黑板
12-27 7100
每月一次的排班次次都需要花三个小时，身心痛苦，在两个sheet表之间查找复制黏贴姓名和电话也是个闹心的活儿…现在做出了软件，排个班是秒秒钟的事儿，还能导出EXCEL，效率提升了百万倍！优哉游哉     排班需求很明确：     之前，它是这样的：     1.每天两名同学值班     2.安排脾气相投或互相熟悉的在同组     3.一男一女，因为男生少，所以有
fullcalendar
m0_69364630的博客
08-17 158
项目中只用到了月视图，插件中还有周视图，日视图。
JavaWeb项目FullCalendar日历插件使用
Ezreal_geng的博客
08-28 4378
使用FullCalendar需要引用的文件 1.css文件 2.js文件 <link href="${base}/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" /> <script src="${base}/assets/global/plugins/fullca
fullcalendar日历使用vue3
08-11
在Vue 3中使用FullCalendar日历，你可以按照以下步骤进行操作： 1. 首先，安装FullCalendar和相关依赖： ```bash npm install @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid ``` 2. 在Vue组件中引入FullCalendar： ```javascript import { createApp } from 'vue'; import FullCalendar from '@fullcalendar/vue'; import dayGridPlugin from '@fullcalendar/daygrid'; import timeGridPlugin from '@fullcalendar/timegrid'; const app = createApp(...); app.use(FullCalendar); app.use(dayGridPlugin); app.use(timeGridPlugin); app.mount('#app'); ``` 3. 在Vue组件中使用FullCalendar： ```html <template> <FullCalendar :options="calendarOptions" /> </template> <script> export default { data() { return { calendarOptions: { // 设置日历的配置选项 initialView: 'dayGridMonth', // 初始视图为月份视图 events: [ // 设置日历事件 { title: '事件1', start: '2022-01-01' }, { title: '事件2', start: '2022-01-05', end: '2022-01-07' }, ], }, }; }, }; </script> ``` 通过上述步骤，你就可以在Vue 3中使用FullCalendar日历插件了。你可以根据FullCalendar的文档进一步了解其它配置选项和功能。希望对你有帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值