Calendar

Because the calendar plug-ins provided in the plug-in market either cannot meet the sliding requirements, or cannot meet the dynamic sliding calculation requirements and other issues.

Therefore, we provide the only calendar plug-in in the plug-in market currently that supports dynamic sliding calculation, multiple sliding switching modes (vertical, horizontal, non-sliding), multiple calendar types (Weekly, monthly calendar), multiple date selection mode (date single selection, date multiple selection, date range selection), Multi-calendar starting day of the week (Sunday, Monday), Custom theme color，custom text, lunar calendar display, allows you to enjoy the silky smooth use of the calendar.

In order for developers to use the calendar more conveniently, we have integrated the calendar dynamic code copy function in the demo phone next to it. You can directly perform any operation on it and then click on the title to copy the calendar code under the current operation (completely dynamic code, paste it and it’s ready to use).

platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage (insert mode)

By setting the 'insert' attribute to 'true', the calendar will be directly displayed on the page, and the 'change' event will be triggered when selected

vue

<template>
	<view class="index">
		<wu-calendar :insert="true" @change="calendarChange"></wu-calendar>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarChange(e) {
				console.log(e);
			}
		}
	}
</script>

<template>
	<view class="index">
		<wu-calendar :insert="true" @change="calendarChange"></wu-calendar>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarChange(e) {
				console.log(e);
			}
		}
	}
</script>

pop-up mode

By setting the 'insert' attribute to 'false' and triggering the 'open' method through the 'ref' of the calendar to use the calendar in pop-up mode, clicking OK will trigger the 'confirm' event

vue

<template>
	<view class="index">
		<wu-calendar ref="calendar" @confirm="calendarConfirm" :insert="false"></wu-calendar>
		<button @click="open">open calendar</button>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // open calendar
            open() {
                this.$refs.calendar.open();
            }
		}
	}
</script>

<template>
	<view class="index">
		<wu-calendar ref="calendar" @confirm="calendarConfirm" :insert="false"></wu-calendar>
		<button @click="open">open calendar</button>
	</view>
</template>

<script>
	export default {
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // open calendar
            open() {
                this.$refs.calendar.open();
            }
		}
	}
</script>

Slide switch mode

We have implemented a dynamic sliding switch calculation process, which can dynamically calculate the two months before and after you switch.

Specify the slide switch mode by setting the slideSwitchMode property, the default is horizontal.

horizontal Horizontal slide switch
vertical Vertical slide switch
none Don't use swipe

vue

<wu-calendar slideSwitchMode="vertical"></wu-calendar>

<wu-calendar slideSwitchMode="vertical"></wu-calendar>

Calendar type

Specify the calendar type by setting the type attribute, which defaults to month.

month monthly calendar
week weekly calendar

Both calendar types support folding effects, and you can also specify whether to support folding through fold.

month’s fold defaults to false
fold for week defaults to true

vue

<wu-calendar type="month" :fold="false"></wu-calendar>

<wu-calendar type="month" :fold="false"></wu-calendar>

The calendar starts with the day of the week

Specify the day of the week the calendar starts on by setting the startWeek property, which defaults to sun.

sun Sunday
mon Monday

vue

<wu-calendar type="month" :fold="true" startWeek="mon"></wu-calendar>

<wu-calendar type="month" :fold="true" startWeek="mon"></wu-calendar>

Date single selection

The mode attribute is single, enabling date radio selection (the default is date radio selection).
The default value in this mode is set via date, in character format.

vue

<wu-calendar date="2024-06-17"></wu-calendar>

<wu-calendar date="2024-06-17"></wu-calendar>

Date Multiple Selection

You need to enable date multiple selection by setting the mode attribute to multiple.
The default value in this mode is set through date, and the format is an array.

vue

<wu-calendar mode="multiple" :date="['2024-06-17', '2024-06-21', '2024-06-24']"></wu-calendar>

<wu-calendar mode="multiple" :date="['2024-06-17', '2024-06-21', '2024-06-24']"></wu-calendar>

Date range selection

Date range selection needs to be enabled by setting the mode attribute to range.
The default value in this mode is set through date, and the format is an array.

vue

<wu-calendar mode="range" :date="['2024-06-19', '2024-07-09']"> </wu-calendar>

<wu-calendar mode="range" :date="['2024-06-19', '2024-07-09']"> </wu-calendar>

Default date

useToday defaults to true, and when the date is uncertain, today will be used as the default date.

mode will have different effects when set to different modes.

single(radio) mode will select today’s date
multiple(multi-select) mode retains the first today's date
range(range selection) mode sets the start date to today's date

If you do not want to use the default date you can set useToday to false.

vue

<wu-calendar mode="single" :useToday="false"></wu-calendar>

<wu-calendar mode="single" :useToday="false"></wu-calendar>

Set the date optional range

You can set the date optional range by using 'start date' and 'end date' .

startDate Start date
endDate End date

vue

<wu-calendar startDate="2024-06-19" endDate="2024-07-19"></wu-calendar>

<wu-calendar startDate="2024-06-19" endDate="2024-07-19"></wu-calendar>

The date range is the same day

You need to set the rangeSameDay attribute to true to allow the date selection range to start on the same day (date range selection needs to be turned on).

vue

<wu-calendar mode="range" :rangeSameDay="true"></wu-calendar>

<wu-calendar mode="range" :rangeSameDay="true"></wu-calendar>

Reselect the end date within the selection range

You need to set the rangeEndRepick attribute to true to enable reselecting the end date by clicking within the date of the selection range after the selection is completed (date range selection needs to be turned on).

vue

<wu-calendar mode="range" :rangeEndRepick="true"></wu-calendar>

<wu-calendar mode="range" :rangeEndRepick="true"></wu-calendar>

Truncate when encountering disabled dates within the selection range

You need to set the rangeHaveDisableTruncation property to `true`` to enable truncation when encountering disabled dates within the selection range (date range selection needs to be enabled).

If truncation is allowed, the end date of the selection range will be the date before the first disabled date

vue

<wu-calendar mode="range": rangeHaveDisableTruncation="true"></wu-calendar>

<wu-calendar mode="range": rangeHaveDisableTruncation="true"></wu-calendar>

lunar calendar display

You need to enable the lunar calendar display of the calendar by setting the lunar property to true.

vue

<wu-calendar :lunar="true"></wu-calendar>

<wu-calendar :lunar="true"></wu-calendar>

Is only current month data displayed on a monthly basis

You need to enable monthly display of only current month data by setting the monthShowCurrentMonth property to true.

vue

<wu-calendar :monthShowCurrentMonth="true"></wu-calendar>

<wu-calendar :monthShowCurrentMonth="true"></wu-calendar>

Custom theme color

Specify a custom theme color by setting the color attribute, and the rest of the custom theme color will be automatically generated through the Color API of wu-ui, allowing you to set the theme color at will without being obtrusive.

vue

<wu-calendar color="#6ac695"></wu-calendar>

<wu-calendar color="#6ac695"></wu-calendar>

custom copywriting

Implementing custom dates through the 'selected' attribute

Custom Date All Properties

vue

<template>
	<view class="index">
		<wu-calendar 
            :selected="selected" 
            ref="calendar" 
            @confirm="calendarConfirm" 
            :insert="false"
        ></wu-calendar>
		<button @click="open">Open Calendar</button>
	</view>
</template>

<script>
	export default {
        data() {
            return {
                // Custom copywriting specifying three dates Yesterday, two days later, and five days later
                // In addition to variable declarations, custom copywriting can be used for function calculation properties as long as the return format is correct
				selected: [
                    {
                        date: '2024-06-18',
                        info: '￥850',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red',
                        disable: true // 禁用
                    },
                    {
                        date: '2024-06-21',
                        info: '￥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red'
                    },
                    {
                        date: '2024-06-24',
                        info: '￥900',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red'
                    },
                ]
			}
        },
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // Open Calendar
            open() {
                this.$refs.calendar.open();
            },
		}
	}
</script>

<template>
	<view class="index">
		<wu-calendar 
            :selected="selected" 
            ref="calendar" 
            @confirm="calendarConfirm" 
            :insert="false"
        ></wu-calendar>
		<button @click="open">Open Calendar</button>
	</view>
</template>

<script>
	export default {
        data() {
            return {
                // Custom copywriting specifying three dates Yesterday, two days later, and five days later
                // In addition to variable declarations, custom copywriting can be used for function calculation properties as long as the return format is correct
				selected: [
                    {
                        date: '2024-06-18',
                        info: '￥850',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red',
                        disable: true // 禁用
                    },
                    {
                        date: '2024-06-21',
                        info: '￥950',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red'
                    },
                    {
                        date: '2024-06-24',
                        info: '￥900',
                        infoColor: '#6ac695',
                        topInfo: '打折',
                        topInfoColor: '#6ac695',
                        badgeColor: 'red'
                    },
                ]
			}
        },
		methods: {
			calendarConfirm(e) {
				console.log(e);
			},
            // Open Calendar
            open() {
                this.$refs.calendar.open();
            },
		}
	}
</script>

API

Selected Options

Customize the date content attribute, which can set multiple dates with the type Array [Object].

attribute name	illustrate	type	Defaults	optional value
date	Date, format: YYYY-mm-dd	String	-	-
info	copy below	String	-	-
infoColor	below copy color	String	#e43d33	-
topInfo	copywriting above	String	-	-
topInfoColor	copywriting above color	String	#e43d33	-
badge	Whether to display dots	Boolean	false	true / false
badgeColor 1.4.5	dots color	String	#e43d33	-
badgeSize 1.3.0	Dot size	String	16rpx	-
badgePosition	The position of the dot display	String	top-right	top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
disable	Whether to disable	Boolean	false	true / false

Calendar Props

attribute name	illustrate	type	Defaults	optional value
date	Customize the default selected time, the default is today, when mode="multiple" or "range", the value needs to be an array, mode="single", the value must be a string	String	Today's date	-
mode	date selection type	String	single	single-single date / multiple-multiple dates / range-date range selection
type 1.3.0	calendar type	String	month	month-Monthly Calendar / week-Weekly Calendar
fold 1.3.0	Does it support folding	Boolean	month: true, week: false	true / false
startWeek 1.3.0	Calendar starts with the day of the week	String	sun	sun-Sunday / mon-Monday
maskClick	Do you want to click on the mask layer to close	Boolean	false	true / false
useToday	Whether to use the default date (today)	Boolean	true	true / false
lunar	Whether to display the lunar date	Boolean	false	true/false
monthShowCurrentMonth	Is only current month data displayed on a monthly basis	Boolean	false	true / false
rangeSameDay	The date selection range starts from the same day	Boolean	false	true / false
rangeEndRepick	After selecting, click within the date range to reselect the end date	Boolean	false	true / false
rangeHaveDisableTruncation 1.3.1	Truncation of disabled dates encountered within the date selection range	Boolean	false	true / false
startDate	Date Range Selection - Start Date	String	-	-
endDate	Date Range Selection - End Date	String	-	-
insert	Insert mode, true: insert mode; false: popup mode	Boolean	true	true/false
slideSwitchMode	Slide to switch mode	String	horizontal	horizontal/vertical/none
showMonth	Whether to display the month as the background	Boolean	true	true/false
clearDate	Whether to clear the last selected content in the pop-up window mode	Boolean	true	true/false
disabledChoice	Do you want to disable clicking on the calendar	Boolean	false	true / false
selected	RBI, look forward to the format[{date: '2019-06-27', info: 'check in', data: { custom: 'custom information', name: 'custom message header',xxx:xxx... }}]	Array[Object]	-	See examples of custom copywriting，Selected Options parameter details
color	custom theme color	String	#3c9cff	-
itemHeight 1.3.7	The height of each date in the calendar, in px	Number	64	-
cancelColor	cancel text color	String	#333333	-
confirmColor	Determine the color of the text	String	#333333	-
startText	When mode=range, the prompt text at the bottom of the first date	String	开始	-
endText	When mode=range, the prompt text at the bottom of the last date	String	结束	-
actBadgeColor 1.4.6	When a certain date `badgeColor` is set through the `selected` attribute, if the date is selected and the theme color matches `badgeColor`, the logo will display this color	String	#fff	-
operationPosition 1.4.7	Display location of pop-up calendar cancel and confirm buttons	String	top	top / bottom
confirmFullDate 1.5.0	Whether a complete date needs to be selected when the confirmation button on the popup calendar is clicked	Boolean	false	true / false

Calendar Methods

method name	illustrate
open	When `insert` is `false`, call this method to pop up the calendar component
close	When `insert` is `false`, call this method to close the calendar component
reset 1.4.5	reset calendar data

Calendar Events

event name	illustrate	return parameter
close	Trigger when the calendar pop-up mask layer is triggered to close	-
cancel 1.4.5	When `insert` is `false`, triggered when the cancel button is clicked	-
confirm	When `insert` is `false`, fires when the confirm button is clicked	Return date related parameters
change	Fired when a date is selected when `insert` is `true`	Return date related parameters
monthSwitch	Triggered when switching months	{year, month, fullDate}
foldSwitch 1.3.0	Triggered when switching folding state	{type, status}

Calendar Slots

slot	illustrate
header	calendar header custom slot
operation	popup calendar cancel and confirm button slot

v-slot:header

value name	illustrate
nowDate	current month time data

Calendar ​

platform compatibility ​

Basic usage (insert mode) ​

pop-up mode ​

Slide switch mode ​

Calendar type ​

The calendar starts with the day of the week ​

Date single selection ​

Date Multiple Selection ​

Date range selection ​

Default date ​

Set the date optional range ​

The date range is the same day ​

Reselect the end date within the selection range ​

Truncate when encountering disabled dates within the selection range ​

lunar calendar display ​

Is only current month data displayed on a monthly basis ​

Custom theme color ​

custom copywriting ​

API ​

Selected Options ​

Calendar Props ​

Calendar Methods ​

Calendar Events ​

Calendar Slots ​

v-slot:header ​