精华内容
下载资源
问答
  • vue使用FullCalendar插件(基本)

    万次阅读 2020-04-09 18:40:59
    安装 npm install --save @fullcalendar/vue npm install --save @fullcalendar/core npm install --save @fullcalendar/...npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid ...

    安装

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

    导入

    import FullCalendar from "@fullcalendar/vue";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import timeGridPlugin from "@fullcalendar/timegrid";
    import interactionPlugin from "@fullcalendar/interaction";
    
     components: {
        FullCalendar //注册
      },
    
    

    引入

    @import "~@fullcalendar/core/main.css";
    @import "~@fullcalendar/daygrid/main.css";
    @import "~@fullcalendar/timegrid/main.css";
    

    初始化

    
    <template>
     	<FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
    </template>
    <script>
    
    data() {
       return {
         calendarPlugins: [
           dayGridPlugin,
           timeGridPlugin,
           interactionPlugin
         ],
       };
     }
    

    效果图

    在这里插入图片描述
    vue使用fullCalendar(类似日程表)

    展开全文
  • 下载导入其他文章有,这里不多写… vue使用FullCalendar(基本) 显示效果图 添加效果图 代码: 取 消 确 定

    下载导入其他文章有,这里不多写…
    vue使用FullCalendar(基本)
    显示效果图
    在这里插入图片描述
    添加效果图
    在这里插入图片描述
    代码:

    <template>
      <div style="width:90%;margin: 20px auto;">
        <!-- ref 用来拿到这个日历对象  defaultView 默认以月份方式显示 locale 语言 header 头部的按钮 buttonText 头部按钮的文字 plugins 插件 weekends 是否显示周日周天 eventLimit 当框里面显示东西多的时候会显示+1 eventLimitText 在+1后面显示的文字 dateClick 点击事件 eventClick点击框里面内容事件 contentHeight 日历高度-->
        <FullCalendar
          ref="fullCalendar"
          defaultView="dayGridMonth"
          locale="zh-cn"
          :header="{
            left: 'prev',
            center: 'title',
            right:'today next '
          }"
          :buttonText="buttonText"
          :plugins="calendarPlugins"
          weekends="ture"
          :events="getCalendarEvents"
          :eventLimit="true"
          eventLimitText="更多"
          @dateClick="handleDateClick"
          @eventClick="handleEventClick"
          :contentHeight="700"
        />
    
        <el-dialog :visible.sync="dialogFormVisible">
          <el-form class="demo-form-inline">
            <el-form-item label="事件名">
              <el-input v-model="shijian"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import FullCalendar from "@fullcalendar/vue";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import timeGridPlugin from "@fullcalendar/timegrid";
    import interactionPlugin from "@fullcalendar/interaction";
    export default {
      name: "Test",
      components: {
        // 注册
        FullCalendar
      },
      data() {
        return {
          // 事件名
          shijian: "",
          dialogFormVisible: false,
          arg: "",
          buttonText: {
            prev: "上月",
            next: "下月",
            today: "今天"
          },
          calendarPlugins: [
            dayGridPlugin,
            timeGridPlugin,
            interactionPlugin
          ],
          //   初始化加载列表
          calendarEvents: [],
          calendarApi: null
        };
      },
      methods: {
        getCalendarEvents(info, successCallback, failureCallback) {
          const events = [
            ...this.calendarEvents,
            {
              id: 1,
              title: "事件名1",
              start: "2020-04-09"
            },
            {
              id: 2,
              title: "事件名2",
              start: "2020-04-01"
            }
          ]
          // 返回数据加载页面时显示在日历上
          successCallback(events);
        },
        // 点击触发事件
        handleDateClick(arg) {
          // 显示添加弹出框
          this.dialogFormVisible = true;
          // 把当前点击的数据保留
          this.arg = arg;
        },
        // 添加一个事件
        add() {
        // 添加
          this.calendarEvents.push({
            id: 1,
            title: this.shijian,
            start: this.arg.date,
            allDay: this.arg.allDay
          });
          //   清空input
          this.shijian = "";
          //   隐藏弹出框
          this.dialogFormVisible = false;
          //   刷新日历
          this.calendarApi.refetchEvents();
        },
        // 点击已经添加的内容
        handleEventClick(info) {
          alert("id: " + info.event.id);
        }
      },
      mounted() {
        //  把日历对象赋值以便操作日历
        this.calendarApi = this.$refs.fullCalendar.getApi();
      }
    };
    </script>
    
    <style lang='css'>
    @import "~@fullcalendar/core/main.css";
    @import "~@fullcalendar/daygrid/main.css";
    @import "~@fullcalendar/timegrid/main.css";
    </style>
    
    展开全文
  • 官网地址:https://fullcalendar.io/docs/vue github上的开源项目:https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue
    展开全文
  • vue 使用fullcalendar组件的时候,标题过长,导致被overflow: hidden; 我们可以换行; 先找到它的css样式 在该页面下的css中加入这个。(>>>是穿透) .fc-unthemed >>> .fc-content{ white-space: ...

    vue 使用fullcalendar组件的时候,标题过长,导致被overflow: hidden;
    我们可以换行;
    先找到它的css样式
    在该页面下的css中加入这个。(>>>是穿透)
    .fc-unthemed >>> .fc-content{
    white-space: normal;
    }
    这里插入图片描述
    最后效果是这样的在这里插入图片描述
    或者溢出…隐藏
    .fc-unthemed >>> .fc-content{
    text-overflow: ellipsis;
    }
    在这里插入图片描述

    展开全文
  • 最近要写个日程排课的业务,找到了FullCalendar的日期处理。网上的大部分都是老版本,试出了一堆的坑,看着...npm install --save @fullcalendar/vue @fullcalendar/daygrid 然后引入 <script> import FullCalen
  • 此案例是做一个会议预约的页面,可以通过会议室下拉框切换会议室,通过选择日期跳转到某一天的周视图,其中一些个性化的设置包括title和左右切换按钮的...npm install --save @fullcalendar/vue @fullcalendar/day...
  • fullcalendar-timeline 如果你下载下来和你查询的文档 目录结构不一样 缺文件什么 请降低fullcalendar-timeline 版本 我是降低到4.0.0在5.0.0 版本 才使用起来 ,最高版本和百度上查询的文档 有差异
  • 用了两个星期研究这个全日历,具体的命令记不住了,就在packjson文件中导入这些东西 ,注意版本 全日历官网有不同的版本 同样 有些版本不同 就没办法使用 "@fullcalendar/core": "^4.4.2", "@fullcalendar/daygrid...
  • vue-fullcalendar 行程日历插件的使用 (没有灵魂式的记录) 1.首先npm下载 vue1或者vue2 //forVue2 npminstallvue-fullcalendar@latest--save //forVue1 npminstallvue-fullcalendar@0.1.11--save 2.main.js中...
  • 一般使用日历插件vue-fullcalendar都会修改插件的源码,为了防止 npm install 覆盖掉日历插件vue-fullcalendar的内容,在本地引入(不是全局引入)。 1.npm install vue-fullcalendar 下载插件,只引用node_modules/...
  • vueFullCalendar使用

    2020-11-02 18:37:50
    安装 "@fullcalendar/core": "^4.3.1", "@fullcalendar/daygrid": "^4.3.0", "@fullcalendar/interaction": "^4.3.0", ... "@fullcalendar/vue": "^4.3.1", 封装FullCalendar <template> <div>
  • [vue]-插件vue-fullcalendar使用

    千次阅读 2019-08-09 20:38:07
    一、安装 npm install vue-full-calendar 二、使用步骤 1、main.js全局引入 import FullCalendar from 'vue-full-calendar' Vue.use(FullCalendar) ...import { FullCalendar } from 'vue-full-c...
  • vue-fullcalendar-demo 使用商店来保存注释并与fullcalendar组件链接,仅使用vuex和vuetify不会使用任何后端 运行yarn istall 得到包装 运行yarn dev 启动开发服务器 运行yarn build 量产
  • <template> <div> <div id="calendar"></div>... import {Calendar} from '@fullcalendar/core';//npm install --save @fullcalendar/core @fullcalendar/daygrid import dayGr
  • Vuefullcalendar排班插件的使用

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

空空如也

空空如也

1 2 3 4 5 6
收藏数 105
精华内容 42
关键字:

vue使用fullcalendar

vue 订阅