精华内容
下载资源
问答
  • vue使用fullcalendar 日历组件
    2022-03-13 21:24:58

    官网: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@
    更多相关内容
  • FullCalendar Vue组件 该项目为FullCalendar提供了正式的Vue组件,并且具有相同的设置。
  • vue构建的完整日历。不需要jquery。调度事件管理
  • vue-fullcalendar 一个基于vue.js的全日历组件,不需要Jquery或fullCalendar.js。 目前,它只支持月视图。 它的灵感来自fullCalendar.io
  • 最终效果: ...import FullCalendar from 'vue-fullcalendar' Vue.use(FullCalendar) 3、vue中使用 <template> <div> <full-calendar :events="monthData" class="test-fc" fir.

    最终效果:

     安装过程:

    1、下载

    npm install vue-fullcalendar

    2、main.js引用

    import FullCalendar from 'vue-fullcalendar'
    Vue.use(FullCalendar)

    3、vue中使用

    <template>
      <div>
        <full-calendar
          :events="monthData"
          class="test-fc"
          first-day="1"
          locale="fr"
          @changeMonth="changeMonth"
          @eventClick="eventClick"
          @dayClick="dayClick"
          @moreClick="moreClick"
          lang="zh"
        ></full-calendar>
      </div>
    </template>
    
    <script>
    import { FullCalendar } from "vue-fullcalendar";
    export default {
      data() {
        return {
          monthData: [
            {
              title: "调查活动", // 事件内容
              start: "2021-09-06", // 事件开始时间
              end: "2021-09-07", // 事件结束时间
              cssClass: "red" // 事件的样式   class名(由后台返回数据)  red为自己定义的class名
            }
          ]
        };
      },
      methods: {
        // 选择月份
        changeMonth(start, end, current) {
          console.log(
            "changeMonth",
            start.format(),
            end.format(),
            current.format()
          );
        },
        // 点击事件
        eventClick(event, jsEvent, pos) {
          console.log("eventClick", event, jsEvent, pos);
        },
        // 点击当天
        dayClick(day, jsEvent) {
          console.log("dayClick", day, jsEvent);
        },
        // 查看更多
        moreClick(day, events, jsEvent) {
          console.log("moreCLick", day, events, jsEvent);
        }
      },
      components: {
        "full-calendar": require("vue-fullcalendar")
      }
    };
    </script>
    <style scoped>
    .red {
      background: red;
    }
    .blue {
      background: blue;
    }
    </style>
    

    展开全文
  • 首先下载安装所需要的包 ...引入到当前vue 组件中import FullCalendar from "@fullcalendar/vue"; import dayGridPlugin from "@fullcalendar/daygrid"; import interactionPlugin from "@fullcalendar/interaction"; .
    1. 首先下载安装所需要的包
      	npm i @fullcalendar/daygrid  @fullcalendar/interaction @fullcalendar/vue
      
    2. 引入到当前vue 组件中
      import FullCalendar from "@fullcalendar/vue";
      import dayGridPlugin from "@fullcalendar/daygrid";
      import interactionPlugin from "@fullcalendar/interaction";
      
    3. 注册组件
          <FullCalendar :options="calendarOptions" />
      
        components: {
          FullCalendar,
        },
      
    4. 配置参数
    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, // 点击 添加的日程触发事件
          },
    
    1. 效果图如下所示
      效果图
    展开全文
  • Vuefullcalendar排班插件的使用

    千次阅读 2020-09-19 10:52:16
    前言 之前在做web管理端界面的时候,有一个需求。需要写一个排班的日历表。在网上找了一波,发现了fullcalendar插件,但是在使用过程中也遇到了很多坑。现在排坑完成,分享出来,大家一起进步! 安装插件包 ...

    前言

    之前在做web管理端界面的时候,有一个需求。需要写一个排班的日历表。在网上找了一波,发现了fullcalendar插件,但是在使用过程中也遇到了很多坑。现在排坑完成,分享出来,大家一起进步!

    安装插件包

    1.在网上看到许多案例都是直接安装
    npm install vue-fullcalendar
    这样的方法的确包安装成功了,但是在引入Css样式的时候却出现错误,去包里面查看,发现缺少了main.css文件。后面下载了很多案例,终于找到了一个完整的安装包。
    2.完整安装包,复制到package.json下的dependencies里面,再npm i

      "@fullcalendar/core": "^4.3.1",
       "@fullcalendar/daygrid": "^4.3.0",
       "@fullcalendar/interaction": "^4.3.0",
       "@fullcalendar/timegrid": "^4.3.0",
       "@fullcalendar/vue": "^4.3.1",
    

    3.使用方法
    在想要使用插件的script中,引入

    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'
    import timeGridPlugin from '@fullcalendar/timegrid'
    import interactionPlugin from '@fullcalendar/interaction'
    

    然后,引入组件

     components: {
        FullCalendar,
      },
      data () {
        return {
        isshow:false,
        devices:[],
        text:"",
        isAdd:null,
          buttonText: {
            today: '今天',
            month: '月',
            week: '周',
            day: '天',
            list: '列表'
          },
          calendarPlugins: [ // plugins must be defined in the JS
            dayGridPlugin,
            timeGridPlugin,
            interactionPlugin // needed for dateClick
          ],
          calendarWeekends: true,
          calendarEvents: [ // initial event data
            
          ],
          calendarApi: null
        }
      },
    

    最后在templete中引用

     <FullCalendar
          ref="fullCalendar"
          defaultView="dayGridMonth"
          locale="zh-cn"
          :header="{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          }"
          :showNonCurrentDates="false"
          :buttonText="buttonText"
          :plugins="calendarPlugins"
          :weekends="calendarWeekends"
          :events="getCalendarEvents"
          :eventLimit="true"
          eventLimitText="更多"
          @dateClick="handleDateClick"
          @eventClick="handleEventClick"
          @eventMouseEnter="detailView"
          @eventMouseLeave="move"
          />
    

    完整代码

    <template>
      <div>
        <div class="main">
        <div v-show="isshow" class="info">{{text}}</div>
          <FullCalendar
          ref="fullCalendar"
          defaultView="dayGridMonth"
          locale="zh-cn"
          :header="{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          }"
          :showNonCurrentDates="false"
          :buttonText="buttonText"
          :plugins="calendarPlugins"
          :weekends="calendarWeekends"
          :events="getCalendarEvents"
          :eventLimit="true"
          eventLimitText="更多"
          @dateClick="handleDateClick"
          @eventClick="handleEventClick"
          @eventMouseEnter="detailView"
          @eventMouseLeave="move"
          />
        </div>
    
      </div>
    </template>
    
    <script >
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'
    import timeGridPlugin from '@fullcalendar/timegrid'
    import interactionPlugin from '@fullcalendar/interaction'
    import edit from "./edit"
    
    export default {
      name: "Frequency",
      components: {
        FullCalendar,
               edit
      },
    
      data () {
        return {
        isshow:false,
        devices:[],
        text:"",
        isAdd:null,
          buttonText: {
            today: '今天',
            month: '月',
            week: '周',
            day: '天',
            list: '列表'
          },
          calendarPlugins: [ // plugins must be defined in the JS
            dayGridPlugin,
            timeGridPlugin,
            interactionPlugin // needed for dateClick
          ],
          calendarWeekends: true,
          calendarEvents: [ // initial event data
            
          ],
          calendarApi: null
        }
      },
      methods: {
            dev(){
                    this.$frequency.getName().then(resp=>{
                        if(resp.data.code==200){
                           this.devices=resp.data.data
                        }
                    })
                },
           
        getCalendarEvents (info, successCallback, failureCallback) {
          const events = [
            ...this.calendarEvents,
          
          ]
          successCallback(events)
        },
        toggleWeekends () {
          this.calendarWeekends = !this.calendarWeekends // update a property
        },
        gotoPast () {
          this.calendarApi.gotoDate('2019-08-01') // call a method on the Calendar object
        },
        detailView(event){
            console.log(event)
            this.isshow=true
            this.text=event.event.title
           
        },
        handleDateClick (arg) {
            console.log(arg)
             this.isAdd=true;
                      this.$layer.iframe({
                        shadeClose: false,
                        content: {
                        content: edit, //传递的组件对象
                        parent: this, //当前的vue对象
                        shadeClose: false,
                         data: {
                        dateStr:arg.dateStr
                        }
                        },
                        title: "排班",
                    });
          this.calendarApi.refetchEvents()
        },
        move(){
            this.isshow=false
        },
        handleEventClick (info) {
            console.log(info)
             this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                let params={
                    id:info.event.id
                }
                this.$frequency.delete(params).then(resp=>{
                    if(resp.data.code==200){
                         this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getFrequencyList();
                    //   this.calendarApi.refetchEvents()
                    }
                })
    
             
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
           
           },
        parserDate(date) {
          var t = Date.parse(date)
          if (!isNaN(t)) {
            return new Date(Date.parse(date.replace(/-/g, '/')))
          }
        },
        getFrequencyList(){
            this.$frequency.getFrequencyList().then(resp=>{
                if(resp.data.code==200){
                    console.log("拿到数据",resp.data.data)
                     this.calendarEvents=[]
                    resp.data.data.forEach(element => {
                        let obj={};
                        obj.title=element.teamName+":"+element.startTime+"-"+element.endTime+"备注:"+element.remark
                        obj.start=this.parserDate(element.date)
                        obj.allDay=true,
                        obj.id=element.id
                        this.calendarEvents.push(obj)
    
                    });
                    // console.log("push进去",this.calendarEvents)
                    console.log("是否进入")
                    this.calendarApi.refetchEvents()
                }
            })
        }
      },
      mounted () {
       
        this.dev()
        this.calendarApi = this.$refs.fullCalendar.getApi();
      },
      created(){
           this.getFrequencyList();
      }
    };
    </script>
    
    <style lang="scss" scoped>
    @import '~@fullcalendar/core/main.css';
    @import '~@fullcalendar/daygrid/main.css';
    @import '~@fullcalendar/timegrid/main.css';
    .main {
      margin: 10px;
      text-align: center;
      background: #fff;
      padding: 10px;
    }
    .info{
        min-height: 50px;
        min-width: 300px;
        line-height: 30px;
        position:fixed;
        top:0px;
        left: 43%;
        color:forestgreen;
        background: rgba(173,255,47,.2);
    }
    </style>
    

    我做出来的效果
    在这里插入图片描述

    展开全文
  • vue 使用fullcalendar组件的时候,标题过长,导致被overflow: hidden; 我们可以换行; 先找到它的css样式 在该页面下的css中加入这个。(>>>是穿透) .fc-unthemed >>> .fc-content{ white-space: ...
  • vue 本地引入日历插件vue-fullcalendar

    千次阅读 2020-06-30 17:08:05
    1.npm install vue-fullcalendar 下载插件,只引用node_modules/vue-fullcalendar/src文件夹,改名为vue-fullcalendar 可放到src下,只要引用得到的位置,相当于写好的vue组件。(我的路径 src>components>vue...
  • fullcalendar-timeline 如果你下载下来和你查询的文档 目录结构不一样 缺文件什么 请降低fullcalendar-timeline 版本 我是降低到4.0.0在5.0.0 版本 才使用起来 ,最高版本和百度上查询的文档 有差异
  • 官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue ...npm install --save @fullcalendar/vue @fullcalendar/core 在项目中使用fullcalendar i
  • ​​​​​​引用git:vue-fullcalendarhttps://github.com/Wanderxx/vue-fullcalendar 项目要做一个日历,在每天展示事件,不同类别的事件样式不一,点击事件弹窗查看详情,弹窗内点击穿透等功能 由于项目本身...
  • //main.js从'vue-full-calendar'导入FullCalendar Vue.use(FullCalendar)但是,您也可以导入独立组件以在本地添加或用于更复杂的安装。 //从“ vue-full-calendar”导入foo.vue导入{FullCalendar}导出默认{组件:{...
  • 首先修改一下package.json文件内容,然后npm i即可:(与fullcalendar无关的,可自行处理删除) package.json: { "name": "webtemplate", "version": "1.0.0", "description": "A Vue.js project", "author": ...
  • vue下使用fullcalendar及简单案例

    千次阅读 2021-11-05 10:45:57
    引子:最近公司要做个人日程管理,故鄙人思前想后,选择了fullcalendar组件。但!官方文档全是英文,对于英语四级都没过的我,真是很心累。只能发扬面向百度编程的优良传统,找了好多案例做出来了。现总结如下: ...
  • FullCalendar会生成真实的... 它告诉核心FullCalendar包开始使用React虚拟DOM节点(而不是通常使用的Preact节点)进行渲染,从而将FullCalendar转换为“真实” React组件。 您可以从此博客文章中学到更多(更多信息)。
  • vue-fullcalendar-demo 使用商店来保存注释并与fullcalendar组件链接,仅使用vuex和vuetify不会使用任何后端 运行yarn istall 得到包装 运行yarn dev 启动开发服务器 运行yarn build 量产
  • npm install --save @fullcalendar/vue 下面包是日历的周视图、日视图等插件包: npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/...
  • vue中使用FullCalendarvue2.0的日历插件) 本文旨在让那些第一次在vue中使用FullCalendar但是又无从下手的小伙伴能够快速的上手FullCalendar。 如果英文比较好的小伙伴也可以移步 FullCalendar官网 介绍 ...
  • 手把手教你vue项目使用fullcalendar

    千次阅读 2020-04-30 11:52:45
    组件官网 与 配置文档 首先下载 npm install --save @fullcalendar/core @fullcalendar/daygrid 引用css 与 js <script src="~@fullcalendar/core/locales/zh-cn.js"></script> <style lang='...
  • 阴历的vue组件。 使用Moment.js进行日期操作
  • 一、下载 ...import FullCalendar from 'vue-fullcalendar' Vue.use(FullCalendar) 2、用到日历的组件 <template> <div> <full-calendar :events="monthData" class="test-fc
  • 组件一:vue-calendar 参考:https://blog.csdn.net/weixin_43023873/article/details/91850497?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 和 ...
  • 第一个日历/日程表做好的情况下,当我想在切换或者进入该页面时获取当前视图的起始时间来动态加载这个时间段的事件。 想要获取该属性,我们需要用到datesRender事件....FullCalendar defaultView="timeGridWeek" ...
  • 这是一个Vue日历的组件,可以切换周和月的显示模式(另有动画效果)
  • fullcalendar是最强大的日历插件,其中一般开发工作中所需要的日历功能基本都满足了。...fullcalendar-vue的github地址https://github.com/fullcalendar/fullcalendar-vue https://fullcalendar.io/docs/vue 我想...
  • fullCalendar日程表在Vue项目中的应用 fullCalendar相关API 使用fullCalendar插件在项目中实现日程排版,支持天、月日程转换,自定义事件 页面布局 通过按钮切换天与月视图的转换,天视图回显具体的时分排版项目,...
  • 本文案例是月视图下的预定管理 安装FullCalendar,按需引入,官方文档:...在页面中引用fullcalendar组件 <template> <div class='calendarAll'> <div class='calendarBox'> <F
  • vue组件中使用全日历fullcalendar,使用方法如下: 1.先把需要用到的包下载好 npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction ‘@fullcalendar/timegrid...
  • vue fullCalendar的使用步骤。支持显示农历和响应鼠标右键的修改改方法。IE9的兼容问题解决方法。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 717
精华内容 286
关键字:

vue组件fullcalendar