70 lines
1.7 KiB
Markdown
70 lines
1.7 KiB
Markdown
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Note,
|
|
Title,
|
|
CustomArgsTable,
|
|
VariantsTable,
|
|
VariantRow,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { events, blockingDates } from "../_storybookData";
|
|
import "../styles/styles.css";
|
|
import { CalendarEvent } from "../types/events";
|
|
import { Calendar } from "./Calendar";
|
|
|
|
<Meta title="UI/Calendar" component={Calendar} />
|
|
|
|
<Title title="Calendar" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
|
|
|
## Props
|
|
|
|
The Args Table below shows you a breakdown of what props can be passed into the Calendar component. All props should have a desciption to make it self explanitory to see what is going on.
|
|
|
|
<CustomArgsTable of={Calendar} />
|
|
|
|
## Example
|
|
|
|
There will be a few examples of how to use the Calendar component to show different usecases.
|
|
|
|
export const Template = (args) => <Calendar {...args} />;
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Customising Start Hour and EndHour"
|
|
argTypes={{
|
|
startHour: {
|
|
control: { type: "number", min: 0, max: 23, step: 1 },
|
|
},
|
|
endHour: {
|
|
control: { type: "number", min: 0, max: 23, step: 1 },
|
|
},
|
|
}}
|
|
args={{
|
|
sortEvents: true,
|
|
startHour: 8,
|
|
endHour: 20,
|
|
events: events,
|
|
hoverEventDuration: 0,
|
|
blockingDates: blockingDates,
|
|
}}>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
<Canvas>
|
|
<Story name="Onclick Handlers">
|
|
<Calendar
|
|
startHour={8}
|
|
endHour={17}
|
|
events={events}
|
|
onEventClick={(e) => alert(e.title)}
|
|
onEmptyCellClick={(date) => alert(date.toString())}
|
|
sortEvents
|
|
hoverEventDuration={30}
|
|
/>
|
|
</Story>
|
|
</Canvas>
|