@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
367 lines (309 loc) • 11 kB
Markdown
# @chayns-components/date
React component package providing 3 documented components for chayns applications.
Documented components: `Calendar`, `DateInfo`, `OpeningTimes`.
## Import
```ts
import { Calendar, DateInfo, OpeningTimes } from '@chayns-components/date';
```
## Typical Usage
```tsx
<Calendar
type={CalendarType.Single}
highlightedDates={[
{
dates: [
getDayOfCurrentMonth(-3),
getDayOfCurrentMonth(1),
getDayOfCurrentMonth(22),
],
style: { textColor: 'white', backgroundColor: 'blue' },
},
{
dates: [getDayOfCurrentMonth(21)],
style: { textColor: 'white', backgroundColor: 'red' },
},
{
dates: [getDayOfCurrentMonth(20), getDayOfCurrentMonth(28)],
style: { textColor: 'white', backgroundColor: 'green' },
},
]}
disabledDates={[getDayOfCurrentMonth(10), getDayOfCurrentMonth(15)]}
categories={[
{
dates: [getDayOfCurrentMonth(35), getDayOfCurrentMonth(13)],
color: 'green',
id: 'meeting',
},
{
dates: [getDayOfCurrentMonth(3), getDayOfCurrentMonth(14)],
color: 'black',
id: 'holiday',
},
{
dates: [getDayOfCurrentMonth(14)],
color: 'purple',
id: 'birthday',
},
]}
/>
```
## Components
- `Calendar`
- `DateInfo`
- `OpeningTimes`
## Calendar
`Calendar` is exported by `@chayns-components/date` and should be imported from the public package entry point.
### Import
```ts
import { Calendar } from '@chayns-components/date';
```
### Examples
#### General
```tsx
<Calendar
type={CalendarType.Single}
highlightedDates={[
{
dates: [
getDayOfCurrentMonth(-3),
getDayOfCurrentMonth(1),
getDayOfCurrentMonth(22),
],
style: { textColor: 'white', backgroundColor: 'blue' },
},
{
dates: [getDayOfCurrentMonth(21)],
style: { textColor: 'white', backgroundColor: 'red' },
},
{
dates: [getDayOfCurrentMonth(20), getDayOfCurrentMonth(28)],
style: { textColor: 'white', backgroundColor: 'green' },
},
]}
disabledDates={[getDayOfCurrentMonth(10), getDayOfCurrentMonth(15)]}
categories={[
{
dates: [getDayOfCurrentMonth(35), getDayOfCurrentMonth(13)],
color: 'green',
id: 'meeting',
},
{
dates: [getDayOfCurrentMonth(3), getDayOfCurrentMonth(14)],
color: 'black',
id: 'holiday',
},
{
dates: [getDayOfCurrentMonth(14)],
color: 'purple',
id: 'birthday',
},
]}
/>
```
#### With Custom Thumb Colors
```tsx
<Calendar
type={CalendarType.Single}
highlightedDates={[
{
dates: [
getDayOfCurrentMonth(-3),
getDayOfCurrentMonth(1),
getDayOfCurrentMonth(22),
],
style: { textColor: 'white', backgroundColor: 'blue' },
},
{
dates: [getDayOfCurrentMonth(21)],
style: { textColor: 'white', backgroundColor: 'red' },
},
{
dates: [getDayOfCurrentMonth(20), getDayOfCurrentMonth(28)],
style: { textColor: 'white', backgroundColor: 'green' },
},
]}
disabledDates={[getDayOfCurrentMonth(10), getDayOfCurrentMonth(15)]}
categories={[
{
dates: [getDayOfCurrentMonth(35), getDayOfCurrentMonth(13)],
color: 'green',
id: 'meeting',
},
{
dates: [getDayOfCurrentMonth(3), getDayOfCurrentMonth(14)],
color: 'black',
id: 'holiday',
},
{
dates: [getDayOfCurrentMonth(14)],
color: 'purple',
id: 'birthday',
},
]}
customThumbColors={{
mainBackgroundColor: 'purple',
mainTextColor: 'white',
secondaryBackgroundColor: 'pink',
}}
/>
```
### Props
No prop documentation available.
### Types
No additional exported types documented.
### Usage Notes
- Import `Calendar` directly from `@chayns-components/date` instead of internal source paths.
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
### Anti Patterns
- Avoid imports from internal paths such as `@chayns-components/date/src/...`; always use the public package export.
## DateInfo
`DateInfo` is exported by `@chayns-components/date` and should be imported from the public package entry point.
### Import
```ts
import { DateInfo } from '@chayns-components/date';
```
### Examples
#### General
```tsx
<DateInfo
date={new Date()}
/>
```
### Props
No prop documentation available.
### Types
No additional exported types documented.
### Usage Notes
- Import `DateInfo` directly from `@chayns-components/date` instead of internal source paths.
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
### Anti Patterns
- Avoid imports from internal paths such as `@chayns-components/date/src/...`; always use the public package export.
## OpeningTimes
`OpeningTimes` is exported by `@chayns-components/date` and should be imported from the public package entry point.
### Import
```ts
import { OpeningTimes } from '@chayns-components/date';
```
### Examples
#### General
```tsx
<OpeningTimes
closedText={'geschlossen'}
weekdays={[
{ id: 0, name: 'Montag' },
{ id: 1, name: 'Dienstag' },
{ id: 2, name: 'Mittwoch' },
{ id: 3, name: 'Donnerstag' },
{ id: 4, name: 'Freitag' },
{ id: 5, name: 'Samstag' },
{ id: 6, name: 'Sonntag' },
]}
openingTimes={[
{
id: 'montag',
weekdayId: 0,
times: [{ start: '08:00', end: '18:00', id: '1' }],
isDisabled: true,
},
{
id: 'dienstag',
weekdayId: 1,
times: [
{ start: '08:00', end: '12:00', id: '2' },
{ start: '11:00', end: '18:00', id: '3' },
],
},
{ id: 'mittwoch', weekdayId: 2, times: [{ start: '08:00', end: '18:00', id: '4' }] },
{ id: 'donnerstag', weekdayId: 3, times: [{ start: '08:00', end: '18:00', id: '5' }] },
{ id: 'freitag', weekdayId: 4, times: [{ start: '08:00', end: '18:00', id: '6' }] },
{ id: 'samstag', weekdayId: 5, times: [{ start: '08:00', end: '18:00', id: '7' }] },
{ id: 'sonntag', weekdayId: 6, times: [{ start: '18:00', end: '08:00', id: '8' }] },
]}
hintText={'Einige der Öffnungszeiten überschneiden sich oder sind nicht in der richtigen Reihenfolge.'}
/>
```
#### Edit Mode
```tsx
<OpeningTimes
closedText={'geschlossen'}
weekdays={[
{ id: 0, name: 'Montag' },
{ id: 1, name: 'Dienstag' },
{ id: 2, name: 'Mittwoch' },
{ id: 3, name: 'Donnerstag' },
{ id: 4, name: 'Freitag' },
{ id: 5, name: 'Samstag' },
{ id: 6, name: 'Sonntag' },
]}
openingTimes={[
{
id: 'montag',
weekdayId: 0,
times: [{ start: '08:00', end: '18:00', id: '1' }],
isDisabled: true,
},
{
id: 'dienstag',
weekdayId: 1,
times: [
{ start: '08:00', end: '12:00', id: '2' },
{ start: '11:00', end: '18:00', id: '3' },
],
},
{ id: 'mittwoch', weekdayId: 2, times: [{ start: '08:00', end: '18:00', id: '4' }] },
{ id: 'donnerstag', weekdayId: 3, times: [{ start: '08:00', end: '18:00', id: '5' }] },
{ id: 'freitag', weekdayId: 4, times: [{ start: '08:00', end: '18:00', id: '6' }] },
{ id: 'samstag', weekdayId: 5, times: [{ start: '08:00', end: '18:00', id: '7' }] },
{ id: 'sonntag', weekdayId: 6, times: [{ start: '18:00', end: '08:00', id: '8' }] },
]}
hintText={'Einige der Öffnungszeiten überschneiden sich oder sind nicht in der richtigen Reihenfolge.'}
editMode
/>
```
#### Only Current Day
```tsx
<OpeningTimes
closedText={'geschlossen'}
weekdays={[
{ id: 0, name: 'Montag' },
{ id: 1, name: 'Dienstag' },
{ id: 2, name: 'Mittwoch' },
{ id: 3, name: 'Donnerstag' },
{ id: 4, name: 'Freitag' },
{ id: 5, name: 'Samstag' },
{ id: 6, name: 'Sonntag' },
]}
openingTimes={[
{
id: 'montag',
weekdayId: 0,
times: [{ start: '08:00', end: '18:00', id: '1' }],
isDisabled: true,
},
{
id: 'dienstag',
weekdayId: 1,
times: [
{ start: '08:00', end: '12:00', id: '2' },
{ start: '11:00', end: '18:00', id: '3' },
],
},
{ id: 'mittwoch', weekdayId: 2, times: [{ start: '08:00', end: '18:00', id: '4' }] },
{ id: 'donnerstag', weekdayId: 3, times: [{ start: '08:00', end: '18:00', id: '5' }] },
{ id: 'freitag', weekdayId: 4, times: [{ start: '08:00', end: '18:00', id: '6' }] },
{ id: 'samstag', weekdayId: 5, times: [{ start: '08:00', end: '18:00', id: '7' }] },
{ id: 'sonntag', weekdayId: 6, times: [{ start: '18:00', end: '08:00', id: '8' }] },
]}
hintText={'Einige der Öffnungszeiten überschneiden sich oder sind nicht in der richtigen Reihenfolge.'}
currentDayId={getCurrentDay()}
/>
```
### Props
No prop documentation available.
### Types
No additional exported types documented.
### Usage Notes
- Import `OpeningTimes` directly from `@chayns-components/date` instead of internal source paths.
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
### Anti Patterns
- Avoid imports from internal paths such as `@chayns-components/date/src/...`; always use the public package export.