Zaptime Docs

Appearance

Use Calendar ​

Composable for whole calendar state.

useCalendar takes an optional parameter calendarId (useful for managing more calendar states in one page)

Init ​

Initialize the calendar. Set locales properly and fetches days for current selected month.

ts
const { init } = useCalendar(calendarId);

Get Days ​

Re-fetches days for current date.

ts
const { getDays } = useCalendar();

Day clicked ​

Set time slots for current day. Clears previously set time slot.

ts
const { dayClicked } = useCalendar();

dayClicked(day);

Select Time Slot ​

Selects time slots

ts
const { selectTimeSlot } = useCalendar();

selectTimeSlot(timeSlot: TimeSlot)

Next ​

Moves calendar to next month if possible. It also automatically re-fetches days for the month.

ts
const { next } = useCalendar();

next();

Previous ​

Moves calendar to previous month. It also automatically re-fetches days for the month.

ts
const { prev } = useCalendar();

prev();

Day has Time Slot ​

Returns true when given day has any time slot available. False otherwise.

ts
const { dayHasTimeSlot } = useCalendar();

dayHasTimeSlot(day);

Is Time Slot Selected ​

Returns true when given time slot is selected. False otherwise.

ts
const { isSelected } = useCalendar();

isSelected(timeSlot);

Is Day Selected ​

Returns true when given day is selected. False otherwise.

ts
const { isSelectedDay } = useCalendar();

isSelectedDay(day);

Next Month Disabled ​

Returns true when next month is disabled. False otherwise.

ts
const { nextDisabled } = useCalendar();

Previous Month Disabled ​

Returns true when previous month is disabled. False otherwise.

ts
const { prevDisabled } = useCalendar();

Formatted current year ​

Returns formatted current year of calendar state.

ts
const { currentYear } = useCalendar();

Formatted Month Name ​

Returns formatted and localized current month name

ts
const { monthName } = useCalendar();

Calendar State ​

Returns the whole calendar state:

ts
const { state } = useCalendar();

const {
  date,
  days,
  timeSlots,
  monthHasTimeSlots,
  selectedDay,
  loading,
  headers,
  dfnsConfig,
  attendeeState,
} = state.value;