vue快速集成Fullcalendar日程排班

最新推荐文章于 2023-10-17 14:29:37 发布
最新推荐文章于 2023-10-17 14:29:37 发布
阅读量3.5k 收藏 23
点赞数 3
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40231614/article/details/113461739
版权

vue快速集成Fullcalendar日程排班

官方文档地址：https://fullcalendar.io/docs/vue

在这里插入图片描述

1. 安装以下FullCalendar依赖

npm install --save @fullcalendar/vue @fullcalendar/daygrid
npm install --save @fullcalendar/interaction

2. 在页面中引入组件

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

3. 添加组件

<full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>

4. 在页面中引入组件

<template>
    <div class="calendar_box">
        <el-row :gutter="20">
            <el-col :span="18">
                <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
            </el-col>
            <el-col :span="6" class="detail_box">
                <div class="addbtn">
                    <el-button type="primary" @click="addPaiban" size="small">添加排班</el-button>
                </div>
                <el-alert title="排班信息" type="success" :closable="false"> </el-alert>
                <el-form :model="form" label-width="100px">
                    <el-form-item label="排班标题：" >
                        {{form.title}}
                    </el-form-item>
                    <el-form-item label="科室：" >
                        {{form.ksName}}
                    </el-form-item>
                    <el-form-item label="出诊医生：" >
                        {{form.doctorName}}
                    </el-form-item>
                    <el-form-item label="联系电话：" >
                        {{form.phone}}
                    </el-form-item>
                    <el-form-item label="出诊时间：" >
                        {{form.ctime}}
                    </el-form-item>
                    <div class="addbtn" style="text-align: right;margin-right: 20px;">
                        <el-button type="primary" @click="editPaiban" size="small" v-show="isShowBtn">修改</el-button>
                        <el-button type="danger" @click="delData" size="small" v-show="isShowBtn">删除</el-button>
                    </div>
                </el-form>
            </el-col>
        </el-row>  
        
        <!-- 添加或修改 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="80px">
                <el-form-item label="排班标题" >
                    <el-input v-model="form.title"  placeholder="请输入排班标题" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出诊医生" >
                     <el-select v-model="form.doctorId" placeholder="请选择出诊医生">
                        <el-option
                            v-for="item in doctorList"
                            :key="item.doctorId"
                            :label="item.doctorName"
                            :value="item.doctorId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排班时间" >
                    <el-date-picker
                        v-model="form.ctime"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择排班日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save" size="small">保 存</el-button>
            </div>
        </el-dialog>

   </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import axios from 'axios'
 export default {
    name:'FindPaiban',
    components:{FullCalendar},
    data() {
        return {
            isShowBtn: false,
            dialogFormVisible:false,
            form:{
                id:"",
                title:"",
                doctorId:"",
                ctime:'',
                doctorName:"",
                phone:"",
                ksName:''
            },
            formLabelWidth:120,
            calendarOptions: {
                    //   timeGridPlugin  可显示每日时间段
                    height: 700,
                    plugins: [dayGridPlugin, interactionPlugin],
                    headerToolbar: {
                    left: "prev,next today",
                    center: "title",
                    right: "dayGridMonth,dayGridWeek,dayGrid",
                    // right: 'agendaWeek,dayGridWeek,dayGrid'
                },
                buttonText: {
                    // 设置按钮
                    today: "今天",
                    month: "月",
                    week: "周",
                    dayGrid: "天",
                },
                // allDaySlot: false,
                editable: true,
                selectable: true,
                navLinks: true,
                // displayEventEnd: true,//所有视图显示结束时间
                initialView: "dayGridMonth", // 设置默认显示月，可选周、日
                dateClick: this.handleDateClick,
                eventClick: this.handleEventClick,
                eventsSet: this.handleEvents,
                select: this.handleDateSelect,
                // timezone
                // 设置日程
                events: [],
                //events格式如下
                 // {
		          // 	id: 1,
		          // 	title: '09:30~11:30 小破孩',
		          // 	start: '2020-12-11',
		          // 	end: '2020-12-13',
		          // 	color: '#f08f00',
		          // },
		          // {
		          // 	id: 2,
		          // 	title: '9:30~14:30 项目会议',
		          // 	start: '2020-12-14',
		          // 	end: '2020-12-14',
		          // 	color: '#6bb377',

                eventColor: "#f08f00", // 修改日程背景色
                locale: "zh-cn", // 设置语言
                weekNumberCalculation: "ISO", // 周数
                customButtons: {}
            },
            doctorList:[]
        };
    },
    mounted(){
        this.getPaiban();
        this.getAllDoctor()
    },
    methods: {
        //获取排班
        getPaiban(){
            console.log(this)
            //this.calendarOptions.events = this.paibanList;
            this.ajax.request({
                url:'/paiban/findall.action'
            }).then((res)=>{
                if (!res.data.errorcode) {
                    console.log(res.data);
                    res.data.result.paiban.forEach(d => {
                        d.start = d.pbDate.substring(0,10) ;
                        d.color = '#2196F3';
                        d.background = '#2196F3';
                        d.title = d.title;
                        d.doctorName = d.doctorName;
                        d.ksName = d.ksName;
                        d.phone = d.phone;
                    });
                    this.calendarOptions.events = res.data.result.paiban;
                }
            })
        },
        //获取所有医生
        getAllDoctor(){
            this.ajax.request({
                url: '/doctor/findall.action'
            }).then((res) => {
                if (!res.data.errorcode) {
                    console.log(res.data);
                    this.doctorList = res.data.result.doctor;
                }
            })
        },
        //保存
        save(){
            var params = new URLSearchParams();
            params.append("title",this.form.title);
            params.append("pbDate",this.form.ctime);
            params.append("doctorId",this.form.doctorId);
            var url = '/paiban/add.action';
            if(this.form.id != ""){
                params.append("pId",this.form.id);
                url = '/paiban/mod.action';
            }
            console.log(params)
            
            this.ajax.request({
                url: url,
                data: params,
                method:'post'
            }).then((res)=>{
                this.$message.success("保存成功！");
                this.getPaiban();
                this.dialogFormVisible = false;
                this.form = {
                    title:"",
                    ctime:"",
                    doctorId:"",
                    id:'',
                    doctorName:"",
                    phone:"",
                    ksName:''
                }
            })
        },
        //点击排班事件
        handleEventClick(calEvent){
            this.isShowBtn = true;
            var data = calEvent.event;
            console.log(calEvent)
            this.form.id = data._def.extendedProps.pId,
            this.form.doctorId = data._def.extendedProps.doctorId,
            this.form.title = data.title,
            this.form.ctime = data._def.extendedProps.pbDate.substring(0,10),
            this.form.doctorName = data._def.extendedProps.doctorName,
            this.form.ksName = data._def.extendedProps.ksName,
            this.form.phone = data._def.extendedProps.phone
            //this.dialogFormVisible = true;
            console.log(this.dateToString(calEvent.event.start))
        },
        //添加
        addPaiban(){
            this.dialogFormVisible = true;
            this.form = {
                title:"",
                ctime:"",
                doctorId:"",
                id:'',
                doctorName:"",
                phone:"",
                ksName:''
            }
            this.isShowBtn = false;
        },
        //修改
        editPaiban(){
            this.dialogFormVisible = true;
        },
        //删除
        delData(){
            console.log(this.form)
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var params = new URLSearchParams();
                params.append("pId",this.form.id);
                this.ajax.request({
                    url:'/paiban/del.action',
                    data:params,
                    method:'post'
                }).then((res)=>{
                    if(!res.data.errorcode){
                        console.log(res.data);
                        this.$message.success("删除成功");
                        this.getPaiban();
                        this.dialogFormVisible = false;
                    }
                })
                this.dialogFormVisible = false;
            });
        },
        dateToString(now){
            var year = now.getFullYear();
            var month =(now.getMonth() + 1).toString();
            var day = (now.getDate()).toString();
            if (month.length == 1) {
                month = "0" + month;
            }
            if (day.length == 1) {
                day = "0" + day;
            }
            var dateTime = year + "-" + month + "-" + day;
            return dateTime;
        },
        denglu(li){
            let fd = new FormData (document.getElementById("loginform")) ;
            this.ajax.request({
                url:'/yonghu/login.action',
                data:fd,
                method:'post'
            }).then((res)=>{
                if(!res.data.errorcode){

                }
            }).catch(() => {
        
            })
        }
    }
}
</script>

<style scoped>

.addbtn{
    margin-top:15px;
    text-align: left;
    margin-bottom:15px;
}
.calendar_box>>>.el-dialog{
    width: 450px;
}
.calendar_box>>>.el-date-editor.el-input{
    width: 330px;
}
.el-select{
    width: 100%;
}
.detail_box>>>.el-form{
    border:1px solid #ddd;
}
.detail_box>>>.el-form-item__content{
    text-align: left;
    color: #333;
}
</style>
weixin_40231614
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
FullCalendar日历组件集成实战（3）
学海无涯，行者无疆
05-14 1183
有一些应用系统或应用功能，如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件，但功能比较简单，用来做数据展现勉强可用。但如果需要进行复杂的数据展示，以及互动操作如通过点击添加事件，则需要做大量的二次开发。FullCalendar是一款备受欢迎的开源日历组件，以其强大的功能而著称。其基础功能不仅免费且开源，为开发者提供了极大的便利，仅有少量高级功能需要收费。
vue使用fullcalendar 日历组件
weixin_45979310的博客
03-13 1027
官网：https://fullcalendar.io/ 安装 npm install @fullcalendar/core@^5.9.0 npm install @fullcalendar/daygrid@^5.9.0 npm install @fullcalendar/interaction@^5.9.0 npm install @fullcalendar/list@^5.9.0 npm install @fullcalendar/timegrid@^5.9.0
前端可排程的vue 排程甘特图
weixin_46087919的博客
02-08 2172
vue 甘特图 前端 各处找资源 单都不满意 最后结合echart 做了出来
vue+el-table制作岗位排班表
04-13
vue+el-table制作岗位排班表
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
热门推荐
m0_49017085的博客
04-07 1万+
闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。基本的功能可以新建个日程看看样式，可以拖拽日程进去。提示：以下是本篇文章正文内容，下面案例可供参考以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。
element plus calendar 自定义排班值班日历样式（vue3）
zongzi494的博客
05-11 2315
vue2也差不多 把template插槽写法换一下就可以完全复用。
[Vue+ElementUI]甘特图优化
CosecantY的博客
04-08 2383
最近做到了甘特图的需求，发现只有几种可以做的插件，新的功能少，老的界面丑，没办法，自己东拼西凑优化出来一套适合ElementUI风格的插件，这里用的是dhtmlx-gantt。 项目结构 src 丨——components 丨 丨 丨 丨——Gantt 丨 丨——api.js 丨 丨——index.vue 丨 丨——views 丨——myproject ..
springboot基于Vue的MES生产制造执行系统
xy520chxu的博客
09-08 451
开发语言：Java使用框架：spring boot前端技术：JavaScript、VUE.js（2.X）、css3数据库：MySQL 5.7数据库管理工具：Navicat或sqlyog开发工具：IDEA或Ecplise下面主要是对系统实现的功能进行描述，一般在系统实现阶段只算是一个粗略的功能实现，可能符合开发人员的设计预期，但是对于具体使用者来讲还是需要其他人进行发现的，所以这个环节是很有必要进行描述的。
Vue中使用Fullcalendar日历开发日程安排代码完整版
02-08
这个示例可以帮助你快速理解并掌握在Vue中使用FullCalendar进行日程安排开发的方法。 总之，FullCalendar与Vue的结合，为构建功能强大的日程管理系统提供了便利。通过深入学习和实践，你可以创建出满足各种需求的...
在Vue项目中用fullcalendar制作日程表的示例代码
10-16
主要介绍了在Vue项目中用fullcalendar制作日程表，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中使用Fullcalendar日历开发日程安排代码完整版 (项目示例)
09-01
这个项目示例提供了一种方法来集成FullCalendar到Vue项目中，帮助开发者构建出交互性强的日程安排系统。下面我们将深入探讨如何在Vue中使用Fullcalendar以及涉及到的相关知识点。 首先，确保你已经安装了Vue CLI，...
timeline-vuejs-Vue的简约时间表-Vue.js开发
05-27
时间线Vuejs演示时间线Vue:package:安装npm install timeline-vuejs --save // main.js import'../node_modules/timeline-vuejs/dist/timeline-vuejs.c时间线Vuejs演示时间线Vue:package:安装npm安装时间线-vuejs --save // main.js import'../node_modules/timeline-vuejs/dist/timeline-vuejs.css'// component.vue
【Java项目源码】医院住院管理系统.zip
01-31
【Java项目源码】医院住院管理系统
fullcalendar日程组件
08-11
FullCalendar是一款强大的JavaScript日程组件，它支持多种视图（如日视图、周视图、月视图等），并且与各种数据源（如JSON、Google Calendar等）无缝集成。在本篇中，我们将深入探讨如何在Vue.js框架中使用...
基于vue3+ts-el-table合并单元格实现排班功能
最新发布
qq_28813031的博客
10-17 525
基于vue3+ts-el-table合并单元格实现排班功能
vue 自定义月日历日程组件（MSchedule）
weixin_41277748的博客
02-11 5517
效果图 组件的使用 日程内容可以自定义 状态对应颜色可以自定义 <MSchedule :list="plan" @handleDetail="handleDetail" @chooseEntireCard="chooseEntireCard" @changeMonth="changeMonth"> <template v-slot:card="{row}"> <span>时段：{{ row..
VUE fullcalendar 制作排班
weixin_43860369的博客
05-29 2281
1.首先在已创建好的VUE项目下用使用命令行安装好fullcalendar依赖，整行输入enter就行。2.安装日历格子组件（daygrid），事件监听\拖拽组件(interaction)此时便已创建好排班日历了，在浏览器即可看到界面。3.在需要使用组件的VUE页面引入组件。
vue实现一个任务计划表
qq_44586361的博客
06-02 2852
效果图如下所示： 需要用到的指令： 条件渲染 v-show 根据表达式之真假值，切换元素的 display CSS 属性 当条件变化时该指令触发过渡效果 v-model 在表单控件或者组件上创建双向绑定 v-bind 缩写: 动态地绑定一个或多个特性，或一个组件 prop 到表达式 v-on 缩写@ 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰...
YYGH-2-排班管理
小赵的呢
03-24 2730
需求分析 1、页面效果 排班管理这是我们想要实现的页面,从mongodb中获取数据显示到页面上 排班分成三部分显示： 1、科室信息（大科室与小科室树形展示） 2、排班日期，分页显示，根据上传排班数据聚合统计产生 3、排班日期对应的就诊医生信息 2、接口分析 1，科室数据使用Element-ui el-tree组件渲染展示，需要将医院上传的科室数据封装成两层父子级数据； 2，聚合所有排班数据，按日期分页展示，并统计号源数据展示； 3，根据排班日期获取排班详情数据 3、实现分析 虽然是一个页面展示所有内容，但
vue FullCalendar 有日程事件背景色设置
05-20
是的，Vue FullCalendar 组件支持为日程事件设置背景色。你可以通过 `eventColor` 和 `eventBackgroundColor` 属性来设置。 - `eventColor`：设置事件的文本颜色 - `eventBackgroundColor`：设置事件的背景色 例如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值