动态满满的可拖拽日历时间浮窗组件，摸鱼哪有这种事

2024-01-20 21:44:06

一、浮窗日历组件介绍

组件优势：

1、操作直观：支持鼠标拖动、点击切换，轻松掌控时间；
2、全景化可视：以图形化的方式，展示当前时间的更多状态，一目了然；
3、灵活多变：多种颜色、主题、样式自定义，彰显你的品味。

二、组件功能

1、时间切换：支持任意日期、月份、年份切换，轻松穿梭于时间长河中；
2、拖拽功能：支持鼠标拖拽，快速添加、删除、移动日程，排期更轻松；
3、多任务管理：支持多个日程同时管理，一目了然地查看任务状态；
4、提醒功能：支持日程提醒，避免遗忘重要事项，把握每一个机遇。

三、应用场景

1、项目管理：用于项目计划、排期、进度跟踪等；
2、日程管理：用于个人日程、工作安排等；
3、时间管理：用于个人时间管理、提高效率等；
4、团队协作：用于团队协作、任务分配等。

四、API与使用

1. 安装

npm install vue-draggable-calendar

2. 使用

import Vue from 'vue'
import DraggableCalendar from 'vue-draggable-calendar'

Vue.component('draggable-calendar', DraggableCalendar)

3. API

// props
props: {
  // 日历宽度
  width: {
    type: String,
    default: '100%'
  },
  // 日历高度
  height: {
    type: String,
    default: '400px'
  },
  // 是否显示边框
  bordered: {
    type: Boolean,
    default: false
  },
  // 是否显示标题
  title: {
    type: Boolean,
    default: true
  },
  // 标题内容
  titleText: {
    type: String,
    default: '日历'
  },
  // 标题样式
  titleStyle: {
    type: Object,
    default: () => {}
  },
  // 是否显示工具栏
  toolbar: {
    type: Boolean,
    default: true
  },
  // 工具栏样式
  toolbarStyle: {
    type: Object,
    default: () => {}
  },
  // 是否显示年份选择器
  yearPicker: {
    type: Boolean,
    default: true
  },
  // 是否显示月份选择器
  monthPicker: {
    type: Boolean,
    default: true
  },
  // 是否显示日期选择器
  datePicker: {
    type: Boolean,
    default: true
  },
  // 选择器样式
  pickerStyle: {
    type: Object,
    default: () => {}
  },
  // 是否显示日程列表
  scheduleList: {
    type: Boolean,
    default: true
  },
  // 日程列表样式
  scheduleListStyle: {
    type: Object,
    default: () => {}
  },
  // 日程数据
  schedules: {
    type: Array,
    default: () => []
  },
  // 日程样式
  scheduleStyle: {
    type: Object,
    default: () => {}
  },
  // 是否启用拖拽功能
  draggable: {
    type: Boolean,
    default: true
  },
  // 拖拽样式
  dragStyle: {
    type: Object,
    default: () => {}
  },
  // 拖拽时是否显示占位符
  dragPlaceholder: {
    type: Boolean,
    default: true
  },
  // 拖拽时占位符样式
  dragPlaceholderStyle: {
    type: Object,
    default: () => {}
  },
  // 自定义日期格式化函数
  formatter: {
    type: Function,
    default: (date) => date.toLocaleDateString()
  },
  // 自定义日程颜色函数
  colorFunc: {
    type: Function,
    default: (schedule) => {
      return schedule.color || '#000'
    }
  }
}