@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/buttonToolbar.md

@@ -0,0 +1,134 @@
+# ButtonToolbar
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/buttonToolbar
+*Captured:* 2025-12-12T12:38:10.158Z
+
+The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.
+
+## ButtonToolbar
+
+### Example: ButtonToolbar
+
+ButtonToolbar
+ButtonButton
+
+ButtonToolbar centered
+CancelSave changes
+
+ButtonToolbar right aligned
+CancelSave changes
+
+ButtonToolbar space between
+PreviousNext
+
+#### Summary
+
+ButtonToolbar
+ButtonButton
+
+ButtonToolbar centered
+CancelSave changes
+
+ButtonToolbar right aligned
+CancelSave changes
+
+ButtonToolbar space between
+PreviousNext
+
+#### React (tsx)
+
+```tsx
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import Button from '@rio-cloud/rio-uikit/Button';
+import StepButton from '@rio-cloud/rio-uikit/StepButton';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => (
+    <div className='max-width-300'>
+        <FormLabel>ButtonToolbar</FormLabel>
+        <ButtonToolbar>
+            <Button>Button</Button>
+            <Button bsStyle='primary'>Button</Button>
+        </ButtonToolbar>
+
+        <Divider />
+
+        <FormLabel>ButtonToolbar centered</FormLabel>
+        <ButtonToolbar alignment='center'>
+            <Button>Cancel</Button>
+            <Button bsStyle='primary'>Save changes</Button>
+        </ButtonToolbar>
+
+        <Divider />
+
+        <FormLabel>ButtonToolbar right aligned</FormLabel>
+        <ButtonToolbar alignment='right'>
+            <Button>Cancel</Button>
+            <Button bsStyle='primary'>Save changes</Button>
+        </ButtonToolbar>
+
+        <Divider />
+
+        <FormLabel>ButtonToolbar space between</FormLabel>
+        <ButtonToolbar alignment='space-between'>
+            <StepButton direction='previous'>Previous</StepButton>
+            <StepButton direction='next' bsStyle='primary'>
+                Next
+            </StepButton>
+        </ButtonToolbar>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-300">
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Button</button>
+        <button type="button" class="btn btn-primary btn-component" tabindex="0">Button</button>
+    </div>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar centered</div>
+    <div class="btn-toolbar justify-content-center">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Cancel</button>
+        <button type="button" class="btn btn-primary btn-component" tabindex="0">Save changes</button>
+    </div>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar right aligned</div>
+    <div class="btn-toolbar justify-content-end">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Cancel</button>
+        <button type="button" class="btn btn-primary btn-component" tabindex="0">Save changes</button>
+    </div>
+    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+        </div>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar space between</div>
+    <div class="btn-toolbar justify-content-between">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-chevron-left">
+            </span>Previous</button>
+        <button type="button" class="btn btn-primary btn-icon-right btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-chevron-right">
+            </span>Next</button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| alignment | 'left' \| 'right' \| 'center' \| 'space-between' | — | Align buttons to e defined side or set them apart. |
+| className | String | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/calendarStripe.md

@@ -0,0 +1,525 @@
+# CalendarStripe
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/calendarStripe
+*Captured:* 2025-12-12T12:38:51.825Z
+
+A headless component where you provide a function that renders the UI for every day to be displayed.
+
+## CalendarStripe
+
+### Example: Example 1
+
+Saturday
+13 December 2025
+
+Sunday
+14 December 2025
+
+Monday
+15 December 2025
+
+Tuesday
+16 December 2025
+
+#### Summary
+
+Saturday
+13 December 2025
+
+Sunday
+14 December 2025
+
+Monday
+15 December 2025
+
+Tuesday
+16 December 2025
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { FormattedDate } from 'react-intl';
+
+import CalendarStripe from '@rio-cloud/rio-uikit/CalendarStripe';
+
+export default () => {
+    const [selectedDates, setSelectedDates] = useState<string[]>([]);
+
+    const handleSelect = (readableDate: string) => {
+        const dateSet = new Set(selectedDates);
+        if (dateSet.has(readableDate)) {
+            dateSet.delete(readableDate);
+        } else {
+            dateSet.add(readableDate);
+        }
+        setSelectedDates([...dateSet]);
+    };
+
+    const renderDay = (date: Date) => (
+        <DayComponent date={date} onSelect={handleSelect} selectedDates={selectedDates} />
+    );
+
+    return (
+        <div>
+            <CalendarStripe renderDay={renderDay} />
+            <div>
+                {selectedDates.map(selectedDate => (
+                    <div key={selectedDate}>{selectedDate}</div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+type DayComponentProps = {
+    date: Date;
+    onSelect: (dateString: string) => void;
+    selectedDates: string[];
+};
+
+const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
+    const [readableDate] = date.toISOString().split('T');
+
+    const isActive = selectedDates.includes(readableDate);
+    const isSaturday = date.getDay() === 6;
+    const isSunday = date.getDay() === 0;
+    const isWeekend = isSaturday || isSunday;
+
+    const dayWrapperClasses = [
+        'padding-15 border border-top-none border-bottom-none',
+        'hover-text-color-darkest hover-bg-highlight-decent cursor-pointer',
+        isWeekend ? 'bg-lightest' : '',
+    ].join(' ');
+
+    return (
+        <div className={dayWrapperClasses} onClick={() => onSelect(readableDate)}>
+            <div className='display-flex align-items-center justify-content-between'>
+                <div className='display-flex flex-column gap-5 text-size-14 line-height-14'>
+                    <div>
+                        <FormattedDate value={date} weekday='long' />
+                    </div>
+                    <div className='text-size-16 text-medium'>
+                        <FormattedDate value={date} year='numeric' month='long' day='numeric' />
+                    </div>
+                </div>
+                <div className='text-color-primary text-size-16 width-20'>
+                    {isActive && <span className='rioglyph rioglyph-ok-sign' />}
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="CalenderStripe display-flex align-items-center overflow-hidden bg-white border rounded">
+        <div class="align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch">
+            <span class="rioglyph rioglyph-chevron-left">
+            </span>
+        </div>
+        <div class="flex-1-1 overflow-hidden">
+            <div style="opacity: 1; transform: none;">
+                <div class="display-flex space-x--1 user-select-none">
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
+                            <div class="display-flex align-items-center justify-content-between">
+                                <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
+                                    <div>Saturday</div>
+                                    <div class="text-size-16 text-medium">13 December 2025</div>
+                                </div>
+                                <div class="text-color-primary text-size-16 width-20">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
+                            <div class="display-flex align-items-center justify-content-between">
+                                <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
+                                    <div>Sunday</div>
+                                    <div class="text-size-16 text-medium">14 December 2025</div>
+                                </div>
+                                <div class="text-color-primary text-size-16 width-20">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
+                            <div class="display-flex align-items-center justify-content-between">
+                                <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
+                                    <div>Monday</div>
+                                    <div class="text-size-16 text-medium">15 December 2025</div>
+                                </div>
+                                <div class="text-color-primary text-size-16 width-20">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
+                            <div class="display-flex align-items-center justify-content-between">
+                                <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
+                                    <div>Tuesday</div>
+                                    <div class="text-size-16 text-medium">16 December 2025</div>
+                                </div>
+                                <div class="text-color-primary text-size-16 width-20">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch">
+            <span class="rioglyph rioglyph-chevron-right">
+            </span>
+        </div>
+    </div>
+    <div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |
+| minDays | Number | 1 | The minimum amount of days that should be shown per page. |
+| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |
+| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |
+| startDate | Date | new Date() | The date of the first day that are rendered. |
+| renderDay | Function | — | A function that renders each individual day to be displayed. |
+| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
+| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
+| buttonClassName | String | — | Additional classes set to the navigation buttons. |
+| className | String | — | Additional classes set to the calendar element. |
+| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |
+| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |
+
+### Example: Example 2
+
+Dec
+13
+2025
+
+Dec
+14
+2025
+
+Dec
+15
+2025
+
+Dec
+16
+2025
+
+Dec
+17
+2025
+
+Dec
+18
+2025
+
+Dec
+19
+2025
+
+Dec
+20
+2025
+
+Dec
+21
+2025
+
+Set to JanuaryToggle Weekends
+
+#### Summary
+
+Dec
+13
+2025
+
+Dec
+14
+2025
+
+Dec
+15
+2025
+
+Dec
+16
+2025
+
+Dec
+17
+2025
+
+Dec
+18
+2025
+
+Dec
+19
+2025
+
+Dec
+20
+2025
+
+Dec
+21
+2025
+
+Set to JanuaryToggle Weekends
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { FormattedDate } from 'react-intl';
+
+import CalendarStripe from '@rio-cloud/rio-uikit/CalendarStripe';
+import Fade from '@rio-cloud/rio-uikit/Fade';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+export default () => {
+    const [selectedReadableDate, setSelectedReadableDate] = useState<string | undefined>();
+    const [selectedDate, setSelectedDate] = useState<Date>();
+    const [startDate, setStartDate] = useState<Date>();
+    const [hideWeekends, setHideWeekends] = useState(false);
+
+    const handleSelect = (readableDate: string, date: Date) => {
+        setSelectedReadableDate(value => {
+            if (value === readableDate) {
+                setSelectedDate(undefined);
+                return;
+            }
+
+            setSelectedDate(date);
+            return readableDate;
+        });
+    };
+
+    return (
+        <div className='min-height-250'>
+            <CalendarStripe
+                minDayWith={80}
+                minDays={5}
+                maxDays={31}
+                skipWeekends={hideWeekends}
+                startDate={startDate}
+                onNextClick={newStartDate => setStartDate(newStartDate)}
+                onPreviousClick={newStartDate => setStartDate(newStartDate)}
+                renderDay={date => (
+                    <DayContent date={date} onSelect={handleSelect} selectedDate={selectedReadableDate} />
+                )}
+                className='position-relative z-index-1 shadow-default'
+            />
+            <Fade initial animationStyle={Fade.FROM_TOP} show={!!selectedReadableDate}>
+                <div
+                    className={
+                        'bg-white border border-top-none rounded-bottom ' +
+                        'padding-x-20 padding-y-15 shadow-default margin-top--2'
+                    }
+                >
+                    <div className='text-medium'>
+                        <FormattedDate value={selectedDate} weekday='long' />
+                    </div>
+                    <FormattedDate value={selectedDate} year='numeric' month='long' day='numeric' />
+                    <div className='margin-top-20 text-medium'>Your Appointments:</div>
+                    <hr className='margin-top-5' />
+                    <div className='text-italic'>No Appointments today</div>
+                </div>
+            </Fade>
+            <div className='btn-toolbar margin-top-15'>
+                <Button onClick={() => setStartDate(new Date(2023, 1, 1))}>Set to January</Button>
+                <Button onClick={() => setHideWeekends(value => !value)}>Toggle Weekends</Button>
+            </div>
+        </div>
+    );
+};
+
+type DayContentProps = {
+    date: Date;
+    onSelect: (dateString: string, date: Date) => void;
+    selectedDate: string | undefined;
+};
+
+const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
+    const [readableDate] = date.toISOString().split('T');
+
+    const isActive = selectedDate === readableDate;
+    const isSaturday = date.getDay() === 6;
+    const isSunday = date.getDay() === 0;
+    const isWeekend = isSaturday || isSunday;
+
+    const dayWrapperClasses = [
+        'cursor-pointer border border-top-none border-bottom-none',
+        'display-grid place-items-center aspect-ratio-1',
+        isWeekend ? 'bg-lightest text-color-gray pointer-events-none' : '',
+        isActive ? 'bg-primary' : 'hover-bg-highlight-decent hover-text-color-darkest',
+    ].join(' ');
+
+    return (
+        <div className={dayWrapperClasses} onClick={() => onSelect(readableDate, date)}>
+            <div className='display-flex flex-column gap-3 text-center'>
+                <div className='text-size-12 line-height-12'>
+                    <FormattedDate value={date} month='short' />
+                </div>
+                <div className='text-size-h3 line-height-h3'>
+                    <FormattedDate value={date} day='numeric' />
+                </div>
+                <div className='text-size-12 line-height-12'>
+                    <FormattedDate value={date} year='numeric' />
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="min-height-250">
+    <div class="CalenderStripe display-flex align-items-center overflow-hidden bg-white border rounded position-relative z-index-1 shadow-default">
+        <div class="align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch">
+            <span class="rioglyph rioglyph-chevron-left">
+            </span>
+        </div>
+        <div class="flex-1-1 overflow-hidden">
+            <div style="opacity: 1; transform: none;">
+                <div class="display-flex space-x--1 user-select-none">
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">13</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">14</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">15</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">16</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">17</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">18</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">19</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">20</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">21</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-h3 line-height-h3">22</div>
+                                <div class="text-size-12 line-height-12">2025</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch">
+            <span class="rioglyph rioglyph-chevron-right">
+            </span>
+        </div>
+    </div>
+    <div class="btn-toolbar margin-top-15">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Set to January</button>
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle Weekends</button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |
+| minDays | Number | 1 | The minimum amount of days that should be shown per page. |
+| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |
+| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |
+| startDate | Date | new Date() | The date of the first day that are rendered. |
+| renderDay | Function | — | A function that renders each individual day to be displayed. |
+| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
+| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
+| buttonClassName | String | — | Additional classes set to the navigation buttons. |
+| className | String | — | Additional classes set to the calendar element. |
+| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |
+| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |