Calendar

The calendar component allows users to select a single date or a range of dates from a visual calendar interface. It provides a consistent way to enable date selection within applications, supporting both single-date and range selection patterns.


                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="column" gap="medium">
                                                            <w-calendar id="calendar-basic"></w-calendar>
                                                          </w-stack>
                                                        </template>
                                                        <script type="module">
                                                        const calendarBasic = document.querySelector('#calendar-basic');
                                                        calendarBasic.addEventListener('update:modelValue', e => {
                                                          onDateSelected(e.detail[0]);
                                                        });
                                                        
                                                        function onDateSelected(arrayDateSelected) {
                                                          console.log(arrayDateSelected.detail[0][0]);
                                                        }
                                                        </script>

Props

Name	Description	Type	Default	Values
v-model model-value	The selected date(s) of the calendar.	Array		Array<Date>
first-day-of-week	Sets the first day of the week for different countries. 0 is Sunday and 1 is Monday.	Number		0, 1, 2, 3, 4, 5, 6
multi-month	Controls whether the calendar is multi month or not.	Boolean	false
range	Controls whether the calendar is range.	Boolean	false
dates-disabled	Controls which dates are blocked from being selected.	Object	{}	{ before: Date, after: Date, dates: Array<Date>, ranges: Array<{ from: Date, to: Date }> }
dates-highlighted	Controls which dates are highlighted.	Object	{}	{ before: Date, after: Date, dates: Array<Date>, ranges: Array<{ from: Date, to: Date }> }
highlight-current-week	Highlights the current week based on the selected date.	Boolean	false
locale	The locale to use for the calendar.	String	'default'	default, de-DE, en-GB, en-US, es-CO, es-MX, es-ES, es-US, it-IT, pl-PL, pt-BR, pt-PT, tr-TR
full-width	Controls if the button extends to fill the width of the container.	Boolean	false
translations	Object with all necessary translations.	object	{ month: 'Month', year: 'Year', previousMonth: 'Previous month', nextMonth: 'Next month', }	{ month, year, previousMonth, nextMonth }

Events

Name	Description	Type
v-model update:modelValue	Emits the selected date(s). If the calendar is single month, it will emit an array with one date. If the calendar is multi * month, it will emit an array with two dates.	{ "names": [ "Array<Date>" ] }
select	Emits the selected date.	{ "names": [ "Date" ] }