Documentation Index
Fetch the complete documentation index at: /docs/llms.txt
Use this file to discover all available pages before exploring further.
isEventTypeView together with the event slug and either a username (individual event) or a team id (team event).
import { CalendarView } from "@calcom/atoms";
export default function Calendar( props : CalendarProps ) {
return (
<div>
<CalendarView isEventTypeView username={props.calUsername} eventSlug={props.eventSlug} />
</div>
)
}
import { CalendarView } from "@calcom/atoms";
export default function Calendar( props : CalendarProps ) {
return (
<div>
<CalendarView isEventTypeView teamId={props.teamId} eventSlug={props.eventSlug} />
</div>
)
}
| Name | Required | Description |
|---|---|---|
| isEventTypeView | Yes | Must be true to render the event type view |
| eventSlug | Yes | Unique slug created for a particular event |
| username | Optional | Username of the person whose schedule is displayed, required only for individual events |
| teamId | Optional | Id of the team the event belongs to, required only for team events |
isEventTypeView, the atom renders the busy times of the given users, colored by their order in userIds, and their intersected availability as clickable slots. Omit userIds to show the authenticated user’s own calendar.
import { CalendarView } from "@calcom/atoms";
export default function InterviewCalendar( props : InterviewCalendarProps ) {
return (
<div>
<CalendarView
userIds={props.interviewerIds}
eventTypeId={props.eventTypeId}
bookingUid={props.bookingUid}
timezone={props.meetingTimezone}
onTimezoneChange={props.onMeetingTimezoneChange}
showTimezoneControls
showSlotIntervalControls
onCellClick={(date) => props.onSlotPicked(date)}
onEventClick={(event) => props.onBookingOpened(event)}
/>
</div>
)
}
| Name | Description |
|---|---|
| userIds | Users whose busy times and availability are displayed. An empty array renders an unavailable calendar; omit it to show the authenticated user’s own calendar |
| weekStart | First day of the displayed week. Defaults to Sunday |
| eventTypeId | Event type the meeting is booked with; its length and slot interval drive the grid |
| duration | Slot duration in minutes for the hover preview, click grid and availability slots. Defaults to 30 |
| slotInterval | Minutes between consecutive slot starts. Defaults to the event type’s interval, then to the duration. Passing it makes the slot interval picker controlled |
| bookingUid | Booking to keep visible and highlighted on the grid, whoever its hosts are |
| initialDate | Week to open on. Defaults to the current week, or to the week of bookingUid when that booking is loaded. Past weeks can be navigated with the header arrows |
| timezone | Timezone the grid is drawn in. Passing it makes the calendar controlled; leave it out to start from the authenticated user’s timezone |
| showTimezoneControls | Shows an editable meeting timezone above the grid, next to every displayed user’s timezone |
| onTimezoneChange | Fires when a meeting timezone is picked, whether or not timezone is controlled |
| showSlotIntervalControls | Shows a slot interval picker above the grid so the cadence can be changed on the spot |
| slotIntervalOptions | Intervals offered by the picker, in minutes. Defaults to 15, 30 and 60; the current interval is always included |
| onSlotIntervalChange | Fires when a slot interval is picked, whether or not slotInterval is controlled |
| onCellClick | Fires for clicks anywhere on the grid, inside or outside the users’ availability, with the clicked Date |
| onEventClick | Fires when an existing event on the grid is clicked |
Was this page helpful?