精华内容
下载资源
问答
  • springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j) java开源商城系统 下载导入其他文章有,这里不多写… vue使用FullCalendar(基本) 显示效果图 添加效果图 代码: 取 消 确 定 springboot实战...

    springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j)

    java开源商城系统

    下载导入其他文章有,这里不多写…
    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>
    

    springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j)

    java开源商城系统

    展开全文
  • 用了两个星期研究这个全日历,具体的命令记不住了,就在packjson文件中导入这些东西 ,注意版本 全日历官网有不同的版本 同样 有些版本不同 就没办法使用 "@fullcalendar/core": "^4.4.2", "@fullcalendar/daygrid...

    fm:

    在这里插入图片描述

    用了两个星期研究这个全日历,具体的命令记不住了,就在packjson文件中导入这些东西 ,注意版本 全日历官网有不同的版本 同样 有些版本不同 就没办法使用

     "@fullcalendar/core": "^4.4.2",
        "@fullcalendar/daygrid": "^4.3.0",
        "@fullcalendar/interaction": "^4.3.0",
        "@fullcalendar/list": "^4.4.2",
        "@fullcalendar/resource-timeline": "^4.4.2",
        "@fullcalendar/timegrid": "^4.3.0",
        "@fullcalendar/timeline": "^4.3.0",
        "@fullcalendar/vue": "^4.3.1",
    
    
    
    import FullCalendar from '@fullcalendar/vue'
    import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
    import interactionPlugin,{ Draggable }  from '@fullcalendar/interaction'
    import TodayListDetail from './components/TodayListDetail'
    import calendarColor from 
    import '@fullcalendar/core/main.css'
    import '@fullcalendar/timeline/main.css'
    import '@fullcalendar/resource-timeline/main.css'
    
    
      components: {
        FullCalendar,
        Schedule,
        CRMFullScreenDetail: () =>
          import('@/components/CRMFullScreenDetail')
      },
    
    
    

    然后呢 这里就是左侧的拖拽列表 最重要的是 external-events 这个id 最后是通过dom 获取到这个左侧列表监听拖拽到日历中
    在这里插入图片描述

      mounted() {
        var containerEl = document.getElementById('external-events');
    
        // 初始化外部事件
        new Draggable(containerEl, {
            itemSelector: '.fc-event',
            eventData: function(eventEl) {
              console.log(eventEl,eventEl.innerText,'11111')
              return {
                title: eventEl.innerText
              }
            },
          }
        );
    

    然后就是日历

      <FullCalendar
            ref="fullCalendar"
            :defaultView="defaultView"
            :header="{
              left: '',
              // center: 'prevYear,prev, title, next,nextYear',
              // center: 'title',
               center: '',
              right: ''
            }"
            :aspectRatio="aspectRatio"
            :schedulerLicenseKey="licenseKey"
            :plugins="calendarPlugins"
            :initialView = initialView
            :editable="true"
            :droppable="true"
            :stickyHeaderDates="true"
            :stickyFooterScrollbar="true"
            :selectable="true"
            :weekends="calendarWeekends"
            :first-day="firstDay"
            :event-time-format="evnetTime"
            :all-day-slot="true"
            :event-limit="true"
            :resourceAreaWidth='resourceAreaWidth'
            @select="handleDateSelect"
            :events="calendarEvents"
            :now-indicator="true"
            :display-event-end="false"
            :column-format="{day: 'dddd M/d'}"
            all-day-text="全天"
            no-events-message="暂无日程"
            timeZone="local"
            class="calendar-main"
            week-number-calculation="ISO"
            :resources="resources"
            :fixedWeekCount='false'
            :handleWindowResize="true"
            :resourceGroupField="resourceGroupField"
            @eventClick="eventClick"
            @eventDrop="eventDrop"
            @eventChange="drops"
            @eventsSet="eventsSet"
            @eventResize="eventResize"
            @eventReceive="eventReceive"
            @eventMouseEnter="eventMouseEnter"
            @eventMouseLeave="eventMouseLeave"
            :visibleRange="visibleRange"
            @eventRender="eventRender"
          >
          </FullCalendar>
    
    
    //这个是根据上面定义的 至于上面定义的方法(带@的都是方法)  可以自己打印试下
    data(){
       return{
                contentHeight: document.documentElement.clientHeight - 80,
          licenseKey: "GPL-My-Project-Is-Open-Source",
          // 你需要用到的插件
          calendarPlugins: [
            resourceTimelinePlugin,
            interactionPlugin,
          ],
          initialView:null,
          defaultView:'resourceTimeline',
          visibleRange: {
            start: '2021-03-01',
            end: '2021-03-19'
          },
          resourceAreaWidth:'10%',
          // 是否展示周六周日
          calendarWeekends: true,
          pop_show:false,
          calendarEvents: [],
          // 存储所有事件,方便筛选
          calendarList: [],
          colorList: calendarColor.colorList,
    
          evnetTime: {
            hour: 'numeric',
            minute: '2-digit',
            hour12: false
          },
          firstDay: 1, // 把每周设置为从周一开始
          scheduleLoading: false,
          aspectRatio: 1.85,
          droppable:true,
          resources: [],
         }
    }
    

    这里是定义的方法 就几个例子 可以根据上面定义的去打印看看 具体的就不介绍了 可以看官网 https://fullcalendar.io/

        // 渲染之后 自定义html
        eventRender(info){
        //改变表格的头部资源
          document.getElementsByClassName('fc-cell-text')[0].innerText='DKM行程'
          console.log(info)
          var span = document.createElement('span')
          // span.style.color = 'black'
          if (info.event.extendedProps.change_data) {
               span.classList.add('popBox_icon')
            }
          // span.style.border='solid 1px red'
          span.innerHTML= '<i class='+info.event.extendedProps.icon_class+'></i>'
          info.el.childNodes[0].childNodes[0].insertBefore(span,info.el.childNodes[0].childNodes[0].childNodes[0]);
          // info.el.childNodes[0].childNodes[0].classList.add('newClass')
        },
    
    
    
    
        //获取当月 下月时间
        getMonthBeginEnd(n) {
          var n=n
          let obj = { start: '', end: '' }
          obj.start = moment(moment().month(moment().month()+n).startOf('month').valueOf()).format('YYYY-MM-DD');
          obj.end   = moment(moment().month(moment().month()+(n+1)).startOf('month').valueOf()).format('YYYY-MM-DD');
          // obj.start =  moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD')
          // obj.end =moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD')
    
          return obj
        },
    
    
    
        eventReceive(info){
          var that =this
          console.log(info,'外部事件拖拽到日历')
        },
    

    css

    .fc-sun {
      这里是星期六星期日加背景色
      background: rgb(222, 245, 218) !important;
    }
     .fc-sat{
      background: rgb(222, 245, 218) !important;
    
    }
    

    最后 分享一个 网站 叫codepen 链接https://codepen.io/trending 自己探索吧

    展开全文
  • FullCalendar Vue组件 该项目为FullCalendar提供了正式的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

    最近要写个日程排课的业务,找到了FullCalendar的日期处理。网上的大部分都是老版本,试出了一堆的坑,看着文档,慢慢的敲出个大概。我写的这些如果帮不了你,你还是去看下文档,虽然是英文的,带能解除大部分的问题。FullCalendar文档地址

    贴一张效果图,如果和你的需求不一样,那就没办法了。
    效果图
    首先是安装插件

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

    然后引入

    <script>
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'
    import interactionPlugin from '@fullcalendar/interaction'
    
    export default {
      components: {
        FullCalendar // make the <FullCalendar> tag available
      },
      data() {
        return {
          calendarOptions: {
            plugins: [ dayGridPlugin, interactionPlugin ],
            initialView: 'dayGridMonth'
          }
        }
      }
    }
    </script>
    <template>
      <FullCalendar :options="calendarOptions" />
    </template>
    

    这里是月日历,要改成周日历的话,需要安装

    npm install --save @fullcalendar/timegrid
    

    然后引入,(不一步一步的来了,其他的都配置上的区别了)

    <script>
    import FullCalendar from '@fullcalendar/vue'
    // import dayGridPlugin from '@fullcalendar/daygrid'
    import interactionPlugin from '@fullcalendar/interaction'
    import timeGridPlugin from "@fullcalendar/timegrid";
    export default {
      components: {
        FullCalendar // make the <FullCalendar> tag available
      },
      data() {
        return {
          calendarOptions: {
          	initialDate:new Date()//控制指定显示日期
            plugins: [ timeGridPlugin, interactionPlugin ],
            initialView: 'timeGridWeek'
            locale: "zh",//中文
            slotMinTime:'09:00',//展示时间
            slotMaxTime:'18:00',//展示时间
            dateClick: this.addEvent,//点击日历个空白触发事件
            eventClick: this.editEvent,//点击event触发事件
            events: [{
    	        title:"",
    			start:"",
    			end:"",
    			id:""
    		}],//日程
          }
        }
      },
      methods:{
      	addEvent(info) {
          console.log(info)
        },
        editEvent(info) {
          console.log(info)
        },
      }
    }
    </script>
    <template>
      <FullCalendar :options="calendarOptions" />
    </template>
    

    如果要对events的数据修改,就能保存id。

    如果还有别的疑问,可以留言,我尽量的帮忙,毕竟自己也是菜鸟前端。
    在搜索的其他问题,最高是对比下版本。不然报的错,会怀疑自我

    展开全文
  • 此案例是做一个会议预约的页面,可以通过会议室下拉框切换会议室,通过选择日期跳转到某一天的周视图,其中一些个性化的设置包括title和左右切换按钮的...npm install --save @fullcalendar/vue @fullcalendar/day...
  • Vue使用FullCalendar技术

    千次阅读 2021-01-19 14:54:02
    npm install --save @fullcalendar/vue 下面包是日历的周视图、日视图等插件包: npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/...
  • 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 ...
  • 手把手教你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='scss' scoped>...
  • vue-fullcalendar 行程日历插件的使用 (没有灵魂式的记录) 1.首先npm下载 vue1或者vue2 //forVue2 npminstallvue-fullcalendar@latest--save //forVue1 npminstallvue-fullcalendar@0.1.11--save 2.main.js中...
  • 官网地址:https://fullcalendar.io/docs/vue github上的开源项目:https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue
  • ps:我真的感觉自己是个前端了,最近天天在写前端。不过很多复杂逻辑,后台处理起来比较麻烦,所以只...vue使用fullcalendar及简单案例 使用版本:5.3.0 效果图 安装 在package.json中引入如下,运行“npm i” .
  • fullcalendar-timeline 如果你下载下来和你查询的文档 目录结构不一样 缺文件什么 请降低fullcalendar-timeline 版本 我是降低到4.0.0在5.0.0 版本 才使用起来 ,最高版本和百度上查询的文档 有差异
  • ** 在这里介绍下vue框架中,vue-fullcalendar插件的使用 详情请看原文
  • vue+Fullcalendar.zip

    2021-07-13 16:29:55
    Vue使用Fullcalendar日历开发日程安排代码完整版
  • 最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图: 安装 FullCalendar的功能被分解为“插件”。如果您需要它提供的功能,您只需要...
  • 官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue ...目前没有vue的中文文档 在vue中安装fullcalendar npm install --save @...在项目中使用fullcalendar i
  • npm install --save @fullcalendar/vue 下面包是日历的周视图、日视图等插件包: npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/...
  • 因为工作的需要,我对vue的了解并不深,对Fullcalendar更没有了解,纯属功能的需要,大概花了一天的时间学习了一下,学习一样东西应该去看官网或者去看github里面的项目这样可以快速上手。学习总结一下方便自己查找 ...
  • Vue日历插件 fullcalendar 使用

    千次阅读 2019-10-31 17:03:08
    Fullcalendar安装 ...npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list npm install --save @fullcalendar/interaction npm ins...
  • 一、下载 ...import FullCalendar from 'vue-fullcalendar' Vue.use(FullCalendar) 2、用到日历的组件 <template> <div> <full-calendar :events="monthData" class="test-fc
  • vue-fullcalendar GitHub地址 最终效果: 一、根据GitHub文档安装 npm install vue-fullcalendar@latest --save 二、main.js文件中写入 import fullCalendar from 'vue-fullcalendar' Vue.component('full-...
  • vue FullCalendar 全日历在Vue中项目使用

    千次阅读 2020-05-28 18:35:05
    FullCalendar
  • 组件一: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 和 ...
  • vue构建的完整日历。不需要jquery。调度事件管理
  • vue 本地引入日历插件vue-fullcalendar

    千次阅读 2020-06-30 17:08:05
    一般使用日历插件vue-fullcalendar都会修改插件的源码,为了防止 npm install 覆盖掉日历插件vue-fullcalendar的内容,在本地引入(不是全局引入)。 1.npm install vue-fullcalendar 下载插件,只引用node_modules/...
  • npm install --save @fullcalendar/vue @fullcalendar/daygrid 2、在模板中添加标签 <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar&g
  • vue-fullcalendar 改成中文,亲测有效

    千次阅读 2020-10-26 18:02:22
    试了网上很多做法还是不行,最后无奈决定进去看下代码 我这个版本的是 lang=“zh” 你们可以试下,不行的话自己进去页面看看
  • Vuefullcalendar排班插件的使用

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,017
精华内容 406
关键字:

vue使用fullcalendar

vue 订阅