可扩展日历组件_高性能和高度可扩展的日历组件-CSDN博客

本文介绍了一个高性能、高度可扩展的日历组件ve-calendar，支持农历显示、多语言、自定义事件和插槽等功能。适用于Vue.js项目，提供快速启动指南和详细配置选项。

摘要由CSDN通过智能技术生成

可扩展日历组件

日历 (ve-calendar)

This is a high-performance and highly scalable calendar component. It is convenient to define the to-do list.

这是一个高性能且高度可扩展的日历组件。定义待办事项列表很方便。

View demo 查看演示 Download Source 下载源

当前功能： (Current function:)

1, display the lunar calendar, solar terms, festivals before 2050

1，显示农历，2025年以前的节日

2, can specify the maximum number of selected dates

2，可以指定所选日期的最大数量

3, available slots custom date number, lunar calendar, event area

3，可用插槽自定义日期编号，农历，活动区域

4, Available slots define the left and right key menus (the right-click menu has a default item)

4，可用插槽定义左右键菜单(右键菜单具有默认项)

5, Multi-language support

5，多国语言支持

6, two size display modes

6，两种尺寸显示方式

快速开始 (Quick Start)

第一步： (The first step:)

Npm install ve-calendar --save

第二步，在您的vue页面上 (The second step, on your vue page)

Import veCalendar from "ve-calendar";

// in your vue <script>
Export default {
    Components: {
        veCalendar
    }
}

第三步，加载模板： (The third step, loading the template:)

<veCalendar v-model="selectDateList"></veCalendar>

道具参数 (props parameter)

Parameter Name	Type	Default	Description
Value	array	none	v-model binding value, is the current selected date list
Activate-date	object	date of the year	contains two values year current year, month current month
Most-choice	number	0	up to choose the number of days, 0 infinity. Negative number indicates prohibition of selection
Cross-month	boolean	false	whether to allow cross-month selection
pick-mode	boolean	true	Pick mode: When true, the number of newly selected days exceeds the number of most-choice settings, and the oldest date will be discarded. When false, more than most-choice settings will no longer be selected
right-menu	boolean	true	Whether to display the right mouse menu
day-event-menu	string	day-event-menu	Popup menu's class name
day-event-menu-item	string	day-event-menu-item	popup menu item class name
lang	string	zh-cn	Multi-language support, default Simplified Chinese. Lu and Lunar Holidays are not displayed in en mode, and can only be customized using slots
mode	string	normal	normal/mini/auto Three display modes, auto is automatically switched according to the width.
lunar	boolean	true	Whether to display the lunar region or not, the corresponding slot cannot be used.
event	boolean	true	Whether to display the event area, if prohibited, the corresponding slot can not be used.
height	string	auto	The height of the component's rendering.
enabled-list	array	[]	Only allow dates in the list to be selected
disabled-list	array	[]	The date in the list cannot be selected, and the enabled-list should not be used at the same time

参数名称	类型	默认	描述
值	数组	没有	v模型绑定值，是当前选择的日期列表
激活日期	目的	一年中的日期	包含两个值年份当前年份，月份当前月份
最选择	数	0	最多选择天数，即0无限。负数表示禁止选择
跨月	布尔值	假	是否允许跨月选择
选择模式	布尔值	真正	选择模式：为true时，新选择的天数超过最多选择设置的数量，最早的日期将被丢弃。设为假时，将不再选择超过多数选择的设置
右菜单	布尔值	真正	是否显示鼠标右键菜单
日事菜单	串	日事菜单	弹出菜单的类别名称
日事件菜单项	串	日事件菜单项	弹出菜单项的类别名称
郎	串	zh-cn	多语言支持，默认为简体中文。农历和农历假期不会在en模式下显示，只能使用广告位进行自定义
模式	串	正常	普通/迷你/自动三种显示模式，自动根据宽度切换。
月球	布尔值	真正	无论是否显示月球区域，都无法使用相应的插槽。
事件	布尔值	真正	是否显示事件区域，如果禁止，则不能使用相应的插槽。
高度	串	汽车	组件渲染的高度。
启用列表	数组	[]	只允许选择列表中的日期
残疾人名单	数组	[]	无法选择列表中的日期，并且不应同时使用启用列表

事件 (event)

Name	Parameter	Description
Refresh-calendar	None	Trigger/change activation year when switching calendars
Change	selectedDate/array	Fired when the selected date changes, the parameter is the list of currently selected dates (string)
append-event	day	The default right-click menu is followed by an outgoing event. day is the day of the mouse click. If you use the right-menu slot, this event is invalidated and you need to write it yourself.

名称	参数	描述
刷新日历	没有	切换日历时触发/更改激活年份
更改	selectedDate / array	当选定日期更改时触发，该参数是当前选定日期的列表(字符串)
追加事件	天	默认的右键单击菜单后面是传出事件。 day是鼠标单击的日期。如果使用右菜单插槽，则此事件无效，需要自己编写。

插槽 (slot)

Name	Parameter	Description
day-number	day	is used to replace the default upper-left digit, day is the data object of the day
day-lunar	day	It is used to replace the lunar calendar, festivals, and solar terms in the upper right corner. day is the data object of the day
day-event	slot-scope="{day,popMenu}"	Used to display the functions such as to-do items, day is the data object of the day, popMenu is the method of the pop-up left-click menu passed by the component, you must call as follows: @click="popMenu($event,{day,item} Only the item is the data that needs to be passed in. Only the other parameters are necessary.
day-event-left-menu	slot-scope="{currentEvent,eventMenuShow}"	When there is a to-do item, click the left mouse button to pop up the menu slot; currentEvent is the {day,item} parameter passed in by the popMenu above.
day-event-right-menu	slot-scope="{currentEvent,eventRightMenuShow}"	Menu slot that pops up when the right mouse button clicks on a blank event area

名称	参数	描述
天数	天	用于替换默认的左上数字，day是当天的数据对象
日月	天	它用于替换右上角的阴历，节日和节气。 day是当天的数据对象
日事	slot-scope =“ {day，popMenu}”	用于显示待办事项等功能，day是当天的数据对象，popMenu是组件传递的弹出式左击菜单的方法，必须调用如下：@ click =“ popMenu ($ event，{day，item}只有项目是需要传递的数据。只有其他参数是必需的。
日事件左菜单	slot-scope =“ {currentEvent，eventMenuShow}”	有待办事项时，单击鼠标左键弹出菜单栏； currentEvent是上面的popMenu传递的{day，item}参数。
日活动右菜单	slot-scope =“ {currentEvent，eventRightMenuShow}”	鼠标右键单击空白事件区域时弹出的菜单栏

日数据内容 (day data content)

isToday = false;
//solar calendar
sYear = sYear; //4 digits in AD
sMonth = sMonth; //number of the month
sDay = sDay; //AD figures
Week = week; //weeks, 1 Chinese
    
// Lunar
lYear = lYear; //4 digits in AD
lMonth = lMonth; // Lunar month number
lMonthChinese = ''
lDay = lDay; // Chinese lunar calendar number
isLeap = isLeap; // Is it a lunar month?
lDayChinese = 'First Day'

//character
cYear = cYear; //yearly column, 2 Chinese
cMonth = cMonth; //Moon, 2 Chinese
cDay = cDay; //Japanese, 2 Chinese

Color = ''; // The color of the holiday display

lunarFestival = ''; // Lunar Holidays
solarFestival = ''; // Gregorian calendar
solarTerms = ''; // Solar Terms

If (`${sMonth}`.length == 1) sMonth = `0${sMonth}`;
If (`${sDay}`.length == 1) sDay = `0${sDay}`;
sDate = `${sYear}-${sMonth}-${sDay}` // string date

演示 (demo)

<template>
    <div id="app" >
        <ve-calendar  v-model="selected" :height="height" :lunar="lunar" :event="event" :pick-mode="pickMode" :offDays="offDays" :mode="mode" :most-choice="mostChoice" @refresh-calendar="refreshC"   :cross-month="crossMonth" @append-event="appendEvent"  @click-event="clickEvent" >
            <!--<div slot="day-number" slot-scope="{day}">-->
                <!--<span :style="day.sMonth===month&&test.indexOf(day.sDay)>=0?'color:red;':''">{{day.sDay}}</span>-->
            <!--</div>-->
            <div slot="day-event" slot-scope="{day,popMenu}">
                <div v-if="test.indexOf(day.sDay)>=0">
                    <div @click="popMenu($event,{day,item})" style="color:red;">{{item}}</div>
                </div>
            </div>
            <div slot="day-event-left-menu" slot-scope="{currentEvent,eventMenuShow}">
                <!-- 这里如果需要调用多重包装的数据，请放到v-if里面 -->
                <div v-if="currentEvent.day">{{currentEvent.day.sDate}}</div>
                <div @click="deleteEvent(currentEvent.item)" class="day-event-menu-item">使用插槽控制菜单</div>
            </div>

            <div slot="day-event-right-menu" slot-scope="{currentEvent,eventRightMenuShow}" >
                <div v-if="currentEvent.day">{{currentEvent.day.sDate}}</div>
                <div class="day-event-menu-item">右键插槽控制菜单</div>
            </div>

        </ve-calendar>
        <div class="demo-div" >
            <div>
                <label for="selected">选中的日期array</label>
                <input id="selected" type="text" :value="selected" placeholder="选中上面的日期">
            </div>
            <div>
                <label for="height">组件高度</label>
                <input id="height" type="text" v-model="height">
            </div>

            <div>
                <label for="mostChoice">最大选择数量</label>
                <input id="mostChoice" type="number" v-model="mostChoice" title="0是无限，-1是禁止">
            </div>

            <div>
                <label for="item">给每月2号添加事件</label>
                <input id="item" type="text" v-model="item">
            </div>

            <div>
                <button @click="event=!event">事件开关{{event}}</button>
                <button @click="lunar=!lunar">农历{{lunar}}</button>
                <button @click="pickMode=!pickMode">挑选模式{{pickMode}}</button>
                <button @click="crossMonth=!crossMonth">跨月选择{{crossMonth}}</button>
            </div>
            <div>
                <button @click="changeMode">模式{{mode}}</button>
                <button @click="setOffDays">把选中日期设置为休息日</button>
            </div>

        </div>
        
    </div>
</template>

<script>
import veCalendar from "ve-calendar";

export default {
    name: "App",
    data() {
        return {
            modeList: ["mini", "normal", "auto"],
            modeIndex: 0,
            mode: "",
            item:"去看世界杯",
            lunar:true,
            offDays:[],
            pickMode:false,
            mostChoice:0,
            crossMonth:true,
            event:true,
            activateDate: {
                year: 2017,
                month: 6
            },
            height:'500px',
            month: 6,
            test: [2],
            selected: []
        };
    },
    methods: {
        changeMode() {
            this.modeIndex++;
            this.mode = this.modeList[this.modeIndex % 3];
        },
        setOffDays(){


            this.offDays = JSON.parse(JSON.stringify(this.selected))
            this.selected = []
        },
        refreshC(yearmonth, data) {
            console.log(yearmonth, data);
        },
        clickEvent(e, data) {
            console.log(e, data);
        },
        deleteEvent(item) {
            console.log(`你打算删除事情${item}`);
        },
        appendEvent(day) {
            console.log("appendEvent", day);
        }
    },
    mounted() {
        this.changeMode();
    },
    components: {
        veCalendar
    }
};
</script>

<style>
    .demo-div {
        padding: 20px;
        height: 200px;
    }

    .demo-div div {
        margin-top: 10px;
    }
</style>