# CalendarStripe

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/calendarStripe
*Captured:* 2026-04-27T14:58:16.887Z

A headless component where you provide a function that renders the UI for every day to be displayed.

## CalendarStripe

### Example: Example 1

Tuesday
28 April 2026

Wednesday
29 April 2026

Thursday
30 April 2026

Friday
1 May 2026

#### 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 ">
                            <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">28 April 2026</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>Wednesday</div>
                                    <div class="text-size-16 text-medium">29 April 2026</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>Thursday</div>
                                    <div class="text-size-16 text-medium">30 April 2026</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>Friday</div>
                                    <div class="text-size-16 text-medium">1 May 2026</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. |
| renderDay | (date: Date) => React.JSX.Element | — | A function that renders each individual day to be displayed. |
| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |
| startDate | Date | the current date | The date of the first day that are rendered. |
| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
| buttonClassName | string | — | Additional classes set to the navigation buttons. |
| className | string | — | Additional classes set to the calendar element. |
| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |
| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |

### Example: Example 2

Apr
28
2026

Apr
29
2026

Apr
30
2026

May
1
2026

May
2
2026

May
3
2026

May
4
2026

Set to January Toggle 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  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">Apr</div>
                                <div class="text-size-h3 line-height-h3">28</div>
                                <div class="text-size-12 line-height-12">2026</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">Apr</div>
                                <div class="text-size-h3 line-height-h3">29</div>
                                <div class="text-size-12 line-height-12">2026</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">Apr</div>
                                <div class="text-size-h3 line-height-h3">30</div>
                                <div class="text-size-12 line-height-12">2026</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">May</div>
                                <div class="text-size-h3 line-height-h3">1</div>
                                <div class="text-size-12 line-height-12">2026</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">May</div>
                                <div class="text-size-h3 line-height-h3">2</div>
                                <div class="text-size-12 line-height-12">2026</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">May</div>
                                <div class="text-size-h3 line-height-h3">3</div>
                                <div class="text-size-12 line-height-12">2026</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">May</div>
                                <div class="text-size-h3 line-height-h3">4</div>
                                <div class="text-size-12 line-height-12">2026</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">May</div>
                                <div class="text-size-h3 line-height-h3">5</div>
                                <div class="text-size-12 line-height-12">2026</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">May</div>
                                <div class="text-size-h3 line-height-h3">6</div>
                                <div class="text-size-12 line-height-12">2026</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">May</div>
                                <div class="text-size-h3 line-height-h3">7</div>
                                <div class="text-size-12 line-height-12">2026</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. |
| renderDay | (date: Date) => React.JSX.Element | — | A function that renders each individual day to be displayed. |
| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |
| startDate | Date | the current date | The date of the first day that are rendered. |
| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
| buttonClassName | string | — | Additional classes set to the navigation buttons. |
| className | string | — | Additional classes set to the calendar element. |
| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |
| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |