Qwik Date

Qwik calendar, simple integration.

August 2024

> Installation <

npm install qwik-date

> Usage <

import { CalendarInline } from 'qwik-date/inline' //-> inline modeimport { Calendar } from 'qwik-date' //-> inline modeimport { DatePicker } from 'qwik-date' //-> popup modeimport { DatePicker } from 'qwik-date/picker' //-> popup mode

> API Reference <

~Inline mode~

Prop	Description	Default
date	Default date to be used in the calendar	today
fullWeeks	Displays full weeks in the calendar	false
locale	Locale and regional settings for the calendar	'en'
showWeekNumber	Displays the week number in the calendar	false
showDaysOfWeek	Displays the days of the week in the calendar	true
iconLeft	Icon to display on the left side of the calendar	undefined
iconRight	Icon to display on the right side of the calendar	undefined
containerProps	Props to be passed to the calendar's container	-
headerProps	Props to be passed to the calendar's header	-
actionButtonProps	Props for action buttons in the calendar	-
actionLeftProps	Props for the left action	-
actionRightProps	Props for the right action	-
calendarProps	Props to be passed to the calendar's container	-
theadProps	Props to be passed to the thead element of the calendar	-
tbodyProps	Props to be passed to the tbody element of the calendar	-
theadRowProps	Props to be passed to the rows of the thead	-
tbodyRowProps	Props to be passed to the rows of the tbody	-
headerCellProps	Props to be passed to the header cells	-
cellProps	Props to be passed to the body cells of the calendar	-
dayButtonProps	Props for the buttons representing each day in the calendar	-
iconProps	Props to be passed to the icons of the calendar	-
titleProps	Props to be passed to the calendar's title	-
weekNumberProps	Props to be passed to the week numbers in the calendar	-
onDateChange$	Callback function triggered when the date changes in the calendar	undefined
unStyled	Disables default styling	false
bind:date	Signal with the default date	undefined

~Popup mode~

Got the same props as the inline mode, but also accepts the following props:

Prop	Description	Default
triggerProps	Props to be passed to the trigger button	undefined
triggerIcon	Icon component to be displayed in the trigger button	undefined
triggerLabel	Label for the trigger button	undefined

Su	Mo	Tu	We	Th	Fr	Sa