85 lines
2.1 KiB
Plaintext
85 lines
2.1 KiB
Plaintext
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
|
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
|
|
|
import {
|
|
|
|
Title,
|
|
CustomArgsTable,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { events, blockingDates } from "../_storybookData";
|
|
import "../styles/styles.css";
|
|
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) => <TooltipProvider><Calendar {...args} /></TooltipProvider>;
|
|
|
|
<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"
|
|
args={{
|
|
startHour: 8,
|
|
endHour: 17,
|
|
hoverEventDuration: 30,
|
|
}}
|
|
argTypes={{
|
|
startHour: {
|
|
control: { type: "number", min: 0, max: 23, step: 1 },
|
|
},
|
|
endHour: {
|
|
control: { type: "number", min: 0, max: 23, step: 1 },
|
|
},
|
|
hoverEventDuration: {
|
|
control: { type: "number", min: 0, max: 60, step: 1 },
|
|
},
|
|
}}>
|
|
{({ ...args }) => (
|
|
<TooltipProvider>
|
|
<Calendar
|
|
{...args}
|
|
events={events}
|
|
onEventClick={(e) => alert(e.title)}
|
|
onEmptyCellClick={(date) => alert(date.toString())}
|
|
sortEvents
|
|
/>
|
|
</TooltipProvider>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|