FullCalendar (全日历)Vue组件的使用

FullCalendar (全日历)Vue组件的使用

FullCalendar官方文档地址

FullCalendar日历组件支持Vue React Angular Javascript

今天小编给大家分享的是在Vue2中的使用

如果使用的Vue2的框架

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

如果使用的是Vue3的框架

npm install --save   @fullcalendar/core  @fullcalendar/vue3

示例代码:


<template>
  <div>
    <FullCalendar :options="calendarOptions" />
  </div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from '@fullcalendar/list';
export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [
          dayGridPlugin, //月视图插件
          interactionPlugin,
          timeGridPlugin, //时间视图插件
          listPlugin, //列表视图插件
        ],
        initialView: "dayGridWeek", //dayGridMonth 月视图 timeGridWeek 时间视图 dayGridWeek日视图
        locale: "zh-cn", // 设置语言
        // initialView: 'dayGridMonth'
        nowIndicator: true, //根据当前事件显示刻度线

        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,dayGridWeek,dayGrid",
        },
        events: Array.from({ length: 50 }).map(_=>{
            return { title: "事件" + Math.random(), start: new Date().getTime() + Math.random() * 1000000 }
        }), //试图显示的数据
        eventDragStart: (info) => {
          console.log(info);
          console.log("拖拽开始");
        },
        eventDrop: (info) => {
          // TODO 这里可以修改拖动元素的原有时间
          console.log("====================================");
          console.log(info, "拖拽结束");
          console.log("====================================");
        },
        eventMouseEnter: (mouseEnterInfo) => {
          console.log("====================================");
          console.log(mouseEnterInfo, "鼠标移入事件");
          console.log("====================================");
        },
        eventMouseLeave: (eventMouseLeave) => {
          console.log("====================================");
          console.log(eventMouseLeave, "鼠标移出事件");
          console.log("====================================");
        },
        nowIndicatorDidMount: (info) => {
          console.log("====================================", info);
        },
        eventClick: (eventClickInfo) => {
          console.log("====================================");
          console.log(eventClickInfo, "鼠标点击事件");
          console.log(eventClickInfo.event.id);
          let INdex = this.calendarOptions.events.findIndex((item) => {
            return item.id == eventClickInfo.event.id;
          });
          if (INdex != -1) {
            this.calendarOptions.events.splice(INdex, 1);
          }
          console.log("====================================");
        },
        selectable: true,
        eventStartEditable: true, //允许通过拖动来编辑事件的开始时间。
        eventResizableFromStart:true,//用户是否可以从事件的起始边缘调整事件的大小。
        eventDurationEditable:true,// 允许通过调整大小来编辑事件的持续时间。
        // selectMirror: true,
        editable: true, //是否允许修改日历
        droppable: true, // 在日历之间拖拽
        // unselectAuto:false,//取消用户自动选择
        dragScroll: true, // 拖拽滚动
        // unselectCancel:'',
        selectOverlap: function (event) {
          console.log("====================================");
          console.log(event);
          console.log("====================================");
          //选择重叠
          return event.display === "background";
        },
        dateClick: function (info) {
          /*日期选择*/
          console.log(info);
          //   alert("Clicked on: " + info.dateStr);
          //   alert(
          //     "Coordinates: " + info.jsEvent.pageX + "," + info.jsEvent.pageY
          //   );
          //   alert("Current view: " + info.view.type);
          //   // change the day's background color just for fun
          //   info.dayEl.style.backgroundColor = "red";
        },
        select: (selectionInfo) => {
          let object = {
            id: this.calendarOptions.events.length + 1,
            start: selectionInfo.start,
            end: selectionInfo.end,
            title: "xxxxx",
          };
          //选中事件
          console.log(selectionInfo);
          this.calendarOptions.events.push(object);
        },
        unselect: (jsEvent, view) => {
          console.log("====================================取消");
          console.log(jsEvent, view);
          console.log("====================================");
        },
        buttonText: {
          // 设置按钮
          today: "今天",
          month: "月",
          week: "周",
          dayGrid: "天",
        },
      },
    };
  },
};
</script>
<style lang="scss" scoped></style>

目前知识钻研了一部分的属性,感兴趣的小伙伴可以自己根据官网的文档进行尝试

FullCalendar官方文档地址

参考链接地址
属性参考地址

fullCalendar是一个功能强大的日库,它提供了丰富的API来控制日的行为和外观。在fullCalendar中,可以通过datesRender事件自定义日期单元格的显示。datesRender事件在每个日期单元格被渲染时触发,因此可以利用这个事件来自定义特定日期的样式。 如果你想要设置不为当月的日期置灰,可以在datesRender事件的回调函数中使用date对象来判断当前渲染的日期是否属于当前月。如果不是,则可以添加一个特定的CSS类,或者直接设置样式来改变其显示效果。 以下是一个使用JavaScript实现上述功能的示例代码: ```javascript document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', datesRender: function(info) { var currentDay = info.date; // 获取当前渲染的日期 var currentMonth = currentDay.getMonth(); // 获取当前日期的月份 var currentYear = currentDay.getFullYear(); // 获取当前日期的年份 // 如果当前日期不是当前月,则将其置灰 if (currentYear === info.view.currentDate.getFullYear() && currentMonth === info.view.currentDate.getMonth()) { // 此处代码可以留空,因为已经是当前月 } else { // 设置日期置灰的CSS类或者直接设置样式 info.el.classList.add('off-month-day'); } } }); calendar.render(); }); ``` 接下来是对应的CSS样式: ```css .off-month-day { color: #ccc; /* 置灰效果 */ /* 可以添加更多样式来表现置灰,比如背景色 */ } ``` 请确保你的HTML中有相应的元素来承载日,比如一个具有id="calendar"的div: ```html <div id='calendar'></div> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值