[Component]: Calendar component

[dilandoogan]

Figma Design Document

https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=118-3469&mode=design&t=QqSZY4PDQY4PYWXh-0

General Usage Example

<bl-calendar></bl-calendar>

Rules

• Calendar will be a generic component which can be use either in a date picker component or a different ui element.
• By default, the current date and year appear in the calendar.
• It will have three types such as single, range or multiple.
• In a single type calendar user select one specific date from the menu calendar. It requires a day, month, and year to be selected.User also can deselect the day.
• The date range picker functions much like the single date picker but instead of choosing just one date the user can choose a start and end date. Each point requires a day, month, and year to be selected.
• In a multiple type calendar user can select multiple dates and deselect if she wants.
• If user defines a min-date or max-date property, calendar will disable all dates before min-date property or will disable all dates after max-date property.
• If user defines value, calendar will be shown with those dates as selected.

Attributes

Attribute	Description	Default Value
type(string)	Enables to select dates single, multiple or range	single
min-date(Date,string)	All dates before the given date will be disabled	null
max-date(Date,string)	All dates after the given date will be disabled	null
value (Date,Date[])	Initially selected date	null
start-of-week (number)	number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday	1
allowDeselect (boolean)	Determines whether user can deselect the date by clicking on selected item, applicable only when range-picker="false"	false
disabledDates (Date,Date[])	Defines disabled dates	null

Events

Event	Description	Return Value
bl-calendar-change	Event will pass selected date to the parent component	Date,Date[]

References

https://mantine.dev/dates/date-picker/ https://github.com/Hacker0x01/react-datepicker https://mui.com/x/react-date-pickers/date-time-picker/

[fatihhayri]

Rules section "It will have two mode such as single and range." but type "Enables to select dates single, multiple or range"

[ozkersemih]

In rules, there is User can define locale string to change language of the calendar sentence. So, I thought there might be a property like locale or something like that to set language.

[erbilnas]

In rules, there is User can define locale string to change language of the calendar sentence. So, I thought there might be a property like locale or something like that to set language.

As far as I recall, we discussed using our localization module for this purpose. We shouldn’t need to retrieve any additional properties for it.