Options
All
  • Public
  • Public/Protected
  • All
Menu

calendar-blocks

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

CalendarProps

CalendarProps: Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange"> & { defaultDate?: Date; displayMonth: number; displayYear: number; rangeValue?: { end: Date | null; start: Date | null }; value?: Date | null; weekStartsOn?: WeekDay; getDateEnabled?: any; onChange?: any; onDisplayChange?: any; onRangeChange?: any; onRangeStartChange?: any }

Variables

Calendar

Calendar: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "value" | "onChange"> & { defaultDate?: Date; displayMonth: number; displayYear: number; rangeValue?: { end: null | Date; start: null | Date }; value?: null | Date; weekStartsOn?: WeekDay; getDateEnabled?: any; onChange?: any; onDisplayChange?: any; onRangeChange?: any; onRangeStartChange?: any } & RefAttributes<any>> = ...

An all-purpose Calendar primitive which manages day selection and various useful event callbacks. Rendering is up to you; this component doesn't render any days or interactive elements - just a div to help track focus within the component.

CalendarDay

CalendarDay: ForwardRefExoticComponent<CalendarDayProps & RefAttributes<HTMLButtonElement>> = ...

Renders a single day in a calendar. The proper rendering of a day depends on the presence of a wrapping Calendar component. This component renders an unstyled

today

today: Date = ...

Today, at midnight

Functions

CalendarDays

Const addMonths

  • addMonths(date: Date, count: number): Date

  • Add months to a date, adjusting the date if necessary.

    Parameters

    • date: Date
    • count: number

    Returns Date

Const getDaysInMonth

  • getDaysInMonth(month: number, year: number): number

  • Get the number of days in a month

    Parameters

    • month: number
    • year: number

    Returns number

getGridDayCount

  • getGridDayCount(month: number, year: number, weekStartsOn: number): number

  • Computes the total number of grid cells in a grid which is large enough to render a calendar month. Includes cells for days which fall outside the current month but are visible because of weekday offsets.

    Parameters

    • month: number
    • year: number
    • weekStartsOn: number

    Returns number

getGridRowCount

  • getGridRowCount(month: number, year: number, weekStartsOn: number): number

  • Computes the total number of grid rows required to display all the days in a calendar month.

    Parameters

    • month: number
    • year: number
    • weekStartsOn: number

    Returns number

getIsFirstRow

  • getIsFirstRow(date: Date, weekStartsOn: number): boolean

  • Determines if a given date is on the first row of its respective calendar grid as it would be rendered.

    Parameters

    • date: Date
    • weekStartsOn: number

    Returns boolean

getIsFirstWeek

  • getIsFirstWeek(date: Date): boolean

  • Determines if a given date is in the first week of its month

    Parameters

    • date: Date

    Returns boolean

getIsLastRow

  • getIsLastRow(date: Date, weekStartsOn: number): boolean

  • Determines if a given date is on the last row of its respective calendar grid as it would be rendered.

    Parameters

    • date: Date
    • weekStartsOn: number

    Returns boolean

getIsLastWeek

  • getIsLastWeek(date: Date): boolean

  • Determines if a given date is in the last week of its month

    Parameters

    • date: Date

    Returns boolean

getIsWeekend

  • getIsWeekend(date: Date): boolean

  • Determines if a given date is a weekend

    Parameters

    • date: Date

    Returns boolean

Const getMonthDayList

  • getMonthDayList(month: number, year: number, weekStartsOn: number): { date: Date; isDifferentMonth: boolean; key: string }[]

  • Expands a month into a grid of days, filling in days from previous or next month as necessary.

    Parameters

    • month: number
    • year: number
    • weekStartsOn: number

    Returns { date: Date; isDifferentMonth: boolean; key: string }[]

getMonthWeekdayOffset

  • getMonthWeekdayOffset(month: number, year: number, weekStartsOn: number): number

  • In a calendar grid, the first day of the month may be offset from the first column if it falls on a day which isn't the first of the week. This computes that offset for a given calendar month.

    Parameters

    • month: number
    • year: number
    • weekStartsOn: number

    Returns number

Const isBefore

  • isBefore(a: null | Date, b: null | Date): boolean

  • Determines if a given date a is before the second date b (exclusive)

    Parameters

    • a: null | Date
    • b: null | Date

    Returns boolean

Const isBetweenDays

  • isBetweenDays(day: Date, a: null | Date, b: null | Date): boolean

  • Determines if a given date is between two other dates (exclusive)

    Parameters

    • day: Date
    • a: null | Date
    • b: null | Date

    Returns boolean

Const isSameDay

  • isSameDay(a: Date, b: null | Date): boolean

  • Determines if two dates are on the same calendar day

    Parameters

    • a: Date
    • b: null | Date

    Returns boolean

isSameMonth

  • isSameMonth(a: Date, b: null | Date): boolean

  • Determines if two dates are on the same calendar month in the same calendar year

    Parameters

    • a: Date
    • b: null | Date

    Returns boolean

rangeIncludesInvalidDate

  • rangeIncludesInvalidDate(start: Date, end: Date, getDateEnabled: (date: Date) => boolean): boolean

  • Computes whether a given range of dates would include a disabled date according to the given getDateEnabled function. This is O(n) in the number of days in the range.

    Parameters

    • start: Date
    • end: Date
    • getDateEnabled: (date: Date) => boolean
        • (date: Date): boolean

        • Parameters

          • date: Date

          Returns boolean

    Returns boolean

useCalendarContext

useCalendarDay

  • useCalendarDay(dayIndex: number, weekStartsOn?: WeekDay): { date: Date; isDifferentMonth: boolean; key: string }

  • Given an enclosing Calendar context, this returns the date at the given index. If you have a row and column, compute the index as row * 7 + column.

    Parameters

    • dayIndex: number
    • weekStartsOn: WeekDay = WeekDay.Sunday

    Returns { date: Date; isDifferentMonth: boolean; key: string }

    • date: Date
    • isDifferentMonth: boolean
    • key: string

useCalendarDayList

  • useCalendarDayList(month: number, year: number, dayStartsOn?: WeekDay): (CalendarDayValue & { key: string })[]

  • A helper hook which computes a list of 'days' and 'blanks' which will render into a calendar grid. The 'blanks' are null values and represent grid cells which don't have a day in them (like if a month starts on Tuesday, Sunday and Monday will be blank). Other values will be Dates.

    Parameters

    • month: number
    • year: number
    • dayStartsOn: WeekDay = WeekDay.Sunday

    Returns (CalendarDayValue & { key: string })[]

Generated using TypeDoc