KCalendar

A container that displays data in calendar form.

Install

pnpm

pnpm add @ikun-ui/calendar

yarn

yarn add @ikun-ui/calendar

npm

npm install @ikun-ui/calendar

Basic usage

A basic calendar component with Year/Month switch.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Card mode

Nested inside a container element for rendering in limited space.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Custom render

Custom rendering via slots.

🏀

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31 💃🎤🤟	1 💃🎤🤟	2	3 💃🎤🤟	4	5 💃🎤🤟	6
7 💃🎤🤟	8	9 💃🎤🤟	10	11 💃🎤🤟	12	13 💃🎤🤟
14	15 💃🎤🤟	16	17 💃🎤🤟	18	19 💃🎤🤟	20
21 💃🎤🤟	22	23 💃🎤🤟	24	25 💃🎤🤟	26	27 💃🎤🤟
28	29 💃🎤🤟	30	1 💃🎤🤟	2	3 💃🎤🤟	4
5 💃🎤🤟	6	7 💃🎤🤟	8	9 💃🎤🤟	10	11 💃🎤🤟

Calendar Props

Name	Type	Default	Description
mode	month | year	year	The display mode of the calendar.
value	Dayjs	-	The current selected date.
fullscreen	boolean	true	Whether to display in full-screen.
validRange	[Dayjs, Dayjs]	[]	To set valid range.
disabledDate	(currentDate: Dayjs) => boolean	-	Function that specifies the dates that cannot be selected.
locale	object	default	The calendar's locale.
cls	string	''	Additional class for component
attrs	any	{}	Additional attributes

Calendar Events

Name	Description	Type
select	Callback for when a date is selected, include source info.	(v: { date: Dayjs, source: 'month' | 'year' })=> void
panelChange	Callback for when panel changes.	(v: { date: Dayjs, mode: 'month' | 'year' })=> void

Calendar Slots

Name	Description
header	Content of the header.
monthFullCell	Content of the month cell, the content will override the cell
monthCell	Content of the month cell, the content will be appended to the cell
dateFullCell	Content of the date cell, the content will override the cell.
dateCell	Content of the date cell, the content will be appended to the cell

Header slot params

interface SelectOption {
	label: string;
	value: string;
	id: string;
}

interface HeaderSlotPa {
	// Current mode
	mode: 'year' | 'month';
	// Select callback of ‘year’
	handleYearSelect: (v: { detail: SelectOption }) => void;
	// Select callback of ‘month’
	handleMonthSelect: (v: { detail: SelectOption }) => void;
	// Switch mode callback
	handleMYClick: (v: 'year' | 'month') => void;
	// Select rendering data of ‘year’
	yearList: Array<SelectOption>;
	// Select rendering data of ‘month’
	monthList: Array<SelectOption>;
	// The value of the year selector
	year: SelectOption;
	// The value of the month selector
	month: SelectOption;
}

dateCell slot params

interface dateCellSlotPa {
	// Data used for rendering
	date: { instance: Dayjs };
}

dateFullCell slot params

interface dateFullCellSlotPa {
	// Data used for rendering
	date: { instance: Dayjs };
}

MonthCell slot params

interface monthCellSlotPa {
	// Data used for rendering
	month: Dayjs;
}

MonthFullCell slot params

interface monthFullCellSlotPa {
	// Data used for rendering
	month: Dayjs;
}