PandaGo Components

Appearance

Return to top
On this page

Weekly Calendar

This will display a weekly calendar with the possibility to navigate between weeks.

Usage

January 2024

Week 1
Mon
1
Tue
2
Wed
3
Thu
4
Fri
5

Props

ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
ds
Date startThe day where the calendar should start displaying weeks Default value: new Date()
number daysNumberNumber of days of the week to be shown Default value: 5
string[] monthsNamesThe names of the months to be used. If not provided, English names will be used Default value: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
string[] weekDaysNamesThe names of the week days to be used. If not provided, English names will be used Default value: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]
number firstDayOfWeekThe first day of the week. If not provided, Monday will be used. Goes from 0 to 6. Default value: 1
(day: Date, index: number) => boolean isDisabledDayA function that will be called for each day to check if it should be disabled or not Default value: undefined
(year: number, week: number) => boolean isDisabledWeekA function that will be called for each week to check if it can be navigated to or not Default value: undefined

Slots

week-numberThe text to be shown in the week pagination.numbernumber
day-contentThe content to be shown in each day column.dayDate

Events

number change-weekEmitted when the user changes the week. The value emitted is the week number
Date day-clickEmitted when the user clicks on a non-disabled day. The value emitted is the day clicked