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

ve-calendar

Current function:

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

2, can specify the maximum number of selected dates

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

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

5, Multi-language support

6, two size display modes

Quick Start

The first step:

Npm install ve-calendar --save
Sh

The second step, on your vue page

Import veCalendar from "ve-calendar";

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

The third step, loading the template:

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

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

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.

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 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
Js

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>
HTML

GitHub

pcloth/ve-calendar

4815

这是一个高性能高扩展性的日历组件。很方便的定义待办事项。This is a high-performance and highly scalable calendar component. It is convenient to define the to-do list. — Read More

Latest commit to the master branch on 9-24-2019
Download as zip