plancalendar

一个包含日视图、周视图、月视图的横向查看日期事件的组件

Usage no npm install needed!

<script type="module">
  import plancalendar from 'https://cdn.skypack.dev/plancalendar';
</script>

README

Welcome to planCalendar

planCalendar是一个包含日视图、周视图、月视图的横向查看日期事件的组件。

planCalendar 有哪些功能

  • 日视图：日滑动回调、日期点击回调

  • 周视图：周滑动回调

  • 月视图：月滑动回调、日期点击回调

Install

npm install vue-awesome-swiper --save
npm install planCalendar --save

Import

新建 ddVuePlanCalendar.js

import Vue from "vue"
import ddVuePlanCalendar from "planCalendar"
import "planCalendar/lib/planCalendar.css"
Vue.use(ddVuePlanCalendar)

并在 main.js 中 import

import VueAwesomeSwiper from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
import "./ddVuePlanCalendar/ddVuePlanCalendar.js";
Vue.use(VueAwesomeSwiper)

Use

在需要使用的组件内直接是用planCalendar标签

<template>
    <planCalendar></planCalendar>
</template>

Attributes

  • 日视图：

    dayView：true | false
dayViewData：{ // 日视图数据 - 代表20190712、20190723有数据，日期下显示蓝点
    "20190712": true,
    "20190723": true,
}
daySlideChange：function // 滑动回调事件
dayClick：function // 日期点击回调事件

  • 周视图：

    weekView：true | false
weekViewData：{	// 周视图数据 - 代表20190710、20190708有数据，日期下显示蓝点
    "20190710": true,
    "20190708": true,
}

  • 月视图：

    monthView：true | false
monthViewData： { // 周视图数据 - 代表20190512有两条数据、20190701有四条数据，日期下显示蓝条文字
    "20190512": [
        {
            id: "1",
            name: "工作汇报"
        },
        {
            id: "2",
            name: "出差调研"
        }
    ]
    "20190701": [
        {
            id: "1",
            name: "工作汇报"
        },
        {
            id: "2",
            name: "出差调研"
        },
        {
            id: "3",
            name: "部门团建"
        },
        {
            id: "4",
            name: "啦啦啦啦"
        }
    ],
}
monthSlideChange：function // 滑动回调事件
monthDayClick：function // 日期点击回调事件