grassroot
Install

DocsAPI referenceHeadlesscalendar

calendar headless API

The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.

Machine API

@grassroot/ui-headless-core/calendar

Core connector and vanilla API

13 exports
View source packages/ui-headless/core/src/calendar/index.ts

calendarAnatomy

value
DeclarationView source
calendarAnatomyts
export declare const calendarAnatomy: {
  readonly scope: "calendar";
  readonly parts: readonly ["root", "previous", "next", "label", "grid", "weekday", "day"];
};
Name
Kind
Type
Requirement
parts
property
readonly ["root", "previous", "next", "label", "grid", "weekday", "day"]
required
scope
property
"calendar"
required
Name
parts
Kind
property
Type
readonly ["root", "previous", "next", "label", "grid", "weekday", "day"]
Requirement
required
Name
scope
Kind
property
Type
"calendar"
Requirement
required

CalendarApi

interface
DeclarationView source
CalendarApits
interface CalendarApi {
  rootProps(): PartProps;
  previousProps(): PartProps;
  nextProps(): PartProps;
  labelProps(): PartProps;
  gridProps(): PartProps;
  weekdayProps(index: number): PartProps;
  dayProps(index: number): PartProps;
  days(): readonly CalendarDay[];
  readonly value: string | null;
  readonly year: number;
  readonly month: number;
  destroy(): void;
}
Name
Kind
Type
Requirement
dayProps
method
(index: number) => PartProps
required
days
method
() => readonly CalendarDay[]
required
destroy
method
() => void
required
gridProps
method
() => PartProps
required
labelProps
method
() => PartProps
required
month
property
number
required
nextProps
method
() => PartProps
required
previousProps
method
() => PartProps
required
rootProps
method
() => PartProps
required
value
property
string | null
required
weekdayProps
method
(index: number) => PartProps
required
year
property
number
required
Name
dayProps
Kind
method
Type
(index: number) => PartProps
Requirement
required
Name
days
Kind
method
Type
() => readonly CalendarDay[]
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
gridProps
Kind
method
Type
() => PartProps
Requirement
required
Name
labelProps
Kind
method
Type
() => PartProps
Requirement
required
Name
month
Kind
property
Type
number
Requirement
required
Name
nextProps
Kind
method
Type
() => PartProps
Requirement
required
Name
previousProps
Kind
method
Type
() => PartProps
Requirement
required
Name
rootProps
Kind
method
Type
() => PartProps
Requirement
required
Name
value
Kind
property
Type
string | null
Requirement
required
Name
weekdayProps
Kind
method
Type
(index: number) => PartProps
Requirement
required
Name
year
Kind
property
Type
number
Requirement
required

CalendarChangeDetail

interface
DeclarationView source
CalendarChangeDetailts
interface CalendarChangeDetail {
  readonly value: string;
  readonly reason: CalendarReason;
}
Name
Kind
Type
Requirement
reason
property
CalendarReason
required
value
property
string
required
Name
reason
Kind
property
Type
CalendarReason
Requirement
required
Name
value
Kind
property
Type
string
Requirement
required

CalendarConnectOptions

interface
DeclarationView source
CalendarConnectOptionsts
interface CalendarConnectOptions {
  readonly ariaLabel?: string;
  readonly dayLabel?: (value: string) => string;
  readonly messages?: Partial<CalendarMessages>;
  readonly onValueChange?: (detail: CalendarChangeDetail) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
dayLabel
property
(value: string) => string
optional
messages
property
Partial<CalendarMessages>
optional
onValueChange
property
(detail: CalendarChangeDetail) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
dayLabel
Kind
property
Type
(value: string) => string
Requirement
optional
Name
messages
Kind
property
Type
Partial<CalendarMessages>
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: CalendarChangeDetail) => void
Requirement
optional

calendarMessages

value
DeclarationView source
calendarMessagests
export declare const calendarMessages: CalendarMessages;

CalendarMessages

type
DeclarationView source
CalendarMessagests
type CalendarMessages = Pick<MessageTable, "rootLabel" | "previousMonthLabel" | "nextMonthLabel">;

CalendarMount

interface
DeclarationView source
CalendarMountts
interface CalendarMount {
  readonly service: CalendarService;
  readonly connector: CalendarApi;
  readonly root: HTMLElement;
  destroy(): void;
}
Name
Kind
Type
Requirement
connector
property
CalendarApi
required
destroy
method
() => void
required
root
property
HTMLElement
required
service
property
CalendarService
required
Name
connector
Kind
property
Type
CalendarApi
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
root
Kind
property
Type
HTMLElement
Requirement
required
Name
service
Kind
property
Type
CalendarService
Requirement
required

CalendarPart

type
DeclarationView source
CalendarPartts
type CalendarPart = (typeof calendarAnatomy.parts)[number];

CalendarService

type
DeclarationView source
CalendarServicets
type CalendarService = Service<CalendarInput, "ready", CalendarContext, CalendarEvent, CalendarCommand>;

connectCalendar

function
DeclarationView source
connectCalendarts
declare function connectCalendar(service: CalendarService, scope: PartScope, options?: CalendarConnectOptions): CalendarApi;
Name
Kind
Type
Requirement
service
parameter
CalendarService
required
scope
parameter
PartScope
required
options
parameter
CalendarConnectOptions
optional
return
return value
CalendarApi
n/a
Name
service
Kind
parameter
Type
CalendarService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
CalendarConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
CalendarApi
Requirement
n/a

mountCalendar

function
DeclarationView source
mountCalendarts
declare function mountCalendar(container: HTMLElement, options?: MountCalendarOptions): CalendarMount;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
MountCalendarOptions
optional
return
return value
CalendarMount
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
MountCalendarOptions
Requirement
optional
Name
return
Kind
return value
Type
CalendarMount
Requirement
n/a

MountCalendarOptions

interface
DeclarationView source
MountCalendarOptionsts
interface MountCalendarOptions extends CalendarInput, Pick<CalendarConnectOptions, "ariaLabel" | "messages"> {
  readonly onValueChange?: (detail: CalendarChangeDetail) => void;
}
Name
Kind
Type
Requirement
onValueChange
property
(detail: CalendarChangeDetail) => void
optional
Name
onValueChange
Kind
property
Type
(detail: CalendarChangeDetail) => void
Requirement
optional

runCalendarCommand

function
DeclarationView source
runCalendarCommandts
declare function runCalendarCommand(command: CalendarCommand, options?: CalendarConnectOptions): void;
Name
Kind
Type
Requirement
command
parameter
CalendarCommand
required
options
parameter
CalendarConnectOptions
optional
return
return value
void
n/a
Name
command
Kind
parameter
Type
CalendarCommand
Requirement
required
Name
options
Kind
parameter
Type
CalendarConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
void
Requirement
n/a

Framework adapters

Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.

React example follows below.

React imports

@grassroot/ui-headless-react/calendarts
import { Root, RootProvider } from "@grassroot/ui-headless-react/calendar";

Vue imports

@grassroot/ui-headless-vue/calendarts
<script setup lang="ts">
import { Root, RootProvider } from "@grassroot/ui-headless-vue/calendar";
</script>

Angular imports

@grassroot/ui-headless-angular/calendarts
import { GrCalendarDay, GrCalendarRoot, GrCalendarRootProvider } from "@grassroot/ui-headless-angular/calendar";

Svelte imports

@grassroot/ui-headless-svelte/calendarts
<script lang="ts">
  import { Root } from "@grassroot/ui-headless-svelte/calendar";
</script>

Solid imports

@grassroot/ui-headless-solid/calendarts
import { Root, RootProvider } from "@grassroot/ui-headless-solid/calendar";

@grassroot/ui-headless-react/calendar

React adapter

7 exports
View source packages/ui-headless/react/src/calendar/index.ts

CalendarRootProps

interface
DeclarationView source
CalendarRootPropsts
interface CalendarRootProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange">, CalendarInput {
  readonly id?: string;
  readonly ariaLabel?: string;
  readonly dayLabel?: (value: string) => string;
  readonly onValueChange?: (detail: {
    readonly value: string;
    readonly reason: string;
  }) => void;
  readonly monthLabel?: (year: number, month: number) => ReactNode;
  readonly weekdayLabels?: readonly ReactNode[];
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
dayLabel
property
(value: string) => string
optional
id
property
string
optional
monthLabel
property
(year: number, month: number) => ReactNode
optional
onValueChange
property
(detail: { readonly value: string; readonly reason: string; }) => void
optional
weekdayLabels
property
readonly ReactNode[]
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
dayLabel
Kind
property
Type
(value: string) => string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
monthLabel
Kind
property
Type
(year: number, month: number) => ReactNode
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: { readonly value: string; readonly reason: string; }) => void
Requirement
optional
Name
weekdayLabels
Kind
property
Type
readonly ReactNode[]
Requirement
optional

CalendarRootProviderProps

interface
DeclarationView source
CalendarRootProviderPropsts
interface CalendarRootProviderProps extends HTMLAttributes<HTMLDivElement> {
  readonly value: UseCalendarResult;
  readonly monthLabel?: (year: number, month: number) => ReactNode;
  readonly weekdayLabels?: readonly ReactNode[];
}
Name
Kind
Type
Requirement
monthLabel
property
(year: number, month: number) => ReactNode
optional
value
property
UseCalendarResult
required
weekdayLabels
property
readonly ReactNode[]
optional
Name
monthLabel
Kind
property
Type
(year: number, month: number) => ReactNode
Requirement
optional
Name
value
Kind
property
Type
UseCalendarResult
Requirement
required
Name
weekdayLabels
Kind
property
Type
readonly ReactNode[]
Requirement
optional

Root

value
DeclarationView source
Rootts
export declare const Root: import("react").ForwardRefExoticComponent<CalendarRootProps & import("react").RefAttributes<HTMLDivElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("react").ForwardRefExoticComponent<CalendarRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

useCalendar

function
DeclarationView source
useCalendarts
declare function useCalendar(input: CalendarInput, options?: UseCalendarOptions): UseCalendarResult;
Name
Kind
Type
Requirement
input
parameter
CalendarInput
required
options
parameter
UseCalendarOptions
optional
return
return value
UseCalendarResult
n/a
Name
input
Kind
parameter
Type
CalendarInput
Requirement
required
Name
options
Kind
parameter
Type
UseCalendarOptions
Requirement
optional
Name
return
Kind
return value
Type
UseCalendarResult
Requirement
n/a

UseCalendarOptions

interface
DeclarationView source
UseCalendarOptionsts
interface UseCalendarOptions {
  readonly id?: string;
  readonly ariaLabel?: string;
  readonly dayLabel?: (value: string) => string;
  readonly onValueChange?: (detail: {
    readonly value: string;
    readonly reason: string;
  }) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
dayLabel
property
(value: string) => string
optional
id
property
string
optional
onValueChange
property
(detail: { readonly value: string; readonly reason: string; }) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
dayLabel
Kind
property
Type
(value: string) => string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: { readonly value: string; readonly reason: string; }) => void
Requirement
optional

UseCalendarResult

interface
DeclarationView source
UseCalendarResultts
interface UseCalendarResult {
  readonly service: CalendarService;
  readonly connector: CalendarApi;
  readonly snapshot: CalendarSnapshot;
}
Name
Kind
Type
Requirement
connector
property
CalendarApi
required
service
property
CalendarService
required
snapshot
property
CalendarSnapshot
required
Name
connector
Kind
property
Type
CalendarApi
Requirement
required
Name
service
Kind
property
Type
CalendarService
Requirement
required
Name
snapshot
Kind
property
Type
CalendarSnapshot
Requirement
required

@grassroot/ui-headless-vue/calendar

Vue adapter

4 exports
View source packages/ui-headless/vue/src/calendar/index.ts

Root

value
DeclarationView source
Rootts
export declare const Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  value: PropType<string | null | undefined>;
  defaultValue: PropType<string | null | undefined>;
  today: StringConstructor;
  weekStartsOn: NumberConstructor;
  id: StringConstructor;
  ariaLabel: StringConstructor;
  dayLabel: PropType<(value: string) => string>;
  monthLabel: PropType<CalendarMonthLabel>;
  weekdayLabels: PropType<readonly unknown[]>;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
  valueChange: (_detail: unknown) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  value: PropType<string | null | undefined>;
  defaultValue: PropType<string | null | undefined>;
  today: StringConstructor;
  weekStartsOn: NumberConstructor;
  id: StringConstructor;
  ariaLabel: StringConstructor;
  dayLabel: PropType<(value: string) => string>;
  monthLabel: PropType<CalendarMonthLabel>;
  weekdayLabels: PropType<readonly unknown[]>;
}>> & Readonly<{
  onValueChange?: ((_detail: unknown) => any) | undefined;
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  value: {
    type: PropType<UseCalendarResult>;
    required: true;
  };
  monthLabel: PropType<CalendarMonthLabel>;
  weekdayLabels: PropType<readonly unknown[]>;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  value: {
    type: PropType<UseCalendarResult>;
    required: true;
  };
  monthLabel: PropType<CalendarMonthLabel>;
  weekdayLabels: PropType<readonly unknown[]>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

useCalendar

function
DeclarationView source
useCalendarts
declare function useCalendar(input: () => CalendarInput, options?: () => CalendarOptions): UseCalendarResult;
Name
Kind
Type
Requirement
input
parameter
() => CalendarInput
required
options
parameter
() => CalendarOptions
optional
return
return value
UseCalendarResult
n/a
Name
input
Kind
parameter
Type
() => CalendarInput
Requirement
required
Name
options
Kind
parameter
Type
() => CalendarOptions
Requirement
optional
Name
return
Kind
return value
Type
UseCalendarResult
Requirement
n/a

UseCalendarResult

interface
DeclarationView source
UseCalendarResultts
interface UseCalendarResult {
  readonly service: CalendarService;
  readonly connector: CalendarApi;
  readonly snapshot: ShallowRef<CalendarSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
CalendarApi
required
service
property
CalendarService
required
snapshot
property
ShallowRef<CalendarSnapshot>
required
Name
connector
Kind
property
Type
CalendarApi
Requirement
required
Name
service
Kind
property
Type
CalendarService
Requirement
required
Name
snapshot
Kind
property
Type
ShallowRef<CalendarSnapshot>
Requirement
required

@grassroot/ui-headless-angular/calendar

Angular adapter

5 exports
View source packages/ui-headless/angular/src/calendar/index.ts

CalendarStore

interface
DeclarationView source
CalendarStorets
export interface CalendarStore {
    readonly service: CalendarService;
    readonly connector: CalendarApi;
    readonly scope: PartScope;
    readonly version: WritableSignal<number>;
    start(): void;
    stop(): void;
    sync(input: Record<string, unknown>): void;
    syncOptions(options: Record<string, unknown>): void;
}
Name
Kind
Type
Requirement
connector
property
CalendarApi
required
scope
property
PartScope
required
service
property
CalendarService
required
start
method
() => void
required
stop
method
() => void
required
sync
method
(input: Record<string, unknown>) => void
required
syncOptions
method
(options: Record<string, unknown>) => void
required
version
property
WritableSignal<number>
required
Name
connector
Kind
property
Type
CalendarApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
CalendarService
Requirement
required
Name
start
Kind
method
Type
() => void
Requirement
required
Name
stop
Kind
method
Type
() => void
Requirement
required
Name
sync
Kind
method
Type
(input: Record<string, unknown>) => void
Requirement
required
Name
syncOptions
Kind
method
Type
(options: Record<string, unknown>) => void
Requirement
required
Name
version
Kind
property
Type
WritableSignal<number>
Requirement
required

createCalendarStore

function
DeclarationView source
createCalendarStorets
export declare function createCalendarStore(initial: Record<string, unknown>, options?: CalendarOptions): CalendarStore;
Name
Kind
Type
Requirement
initial
parameter
Record<string, unknown>
required
options
parameter
CalendarOptions
optional
return
return value
CalendarStore
n/a
Name
initial
Kind
parameter
Type
Record<string, unknown>
Requirement
required
Name
options
Kind
parameter
Type
CalendarOptions
Requirement
optional
Name
return
Kind
return value
Type
CalendarStore
Requirement
n/a

GrCalendarDay

class
DeclarationView source
GrCalendarDayts
export declare class GrCalendarDay {
    static ɵfac: i0.ɵɵFactoryDeclaration<GrCalendarDay, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<GrCalendarDay, "[grCalendarDay]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrCalendarDay, "[grCalendarDay]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrCalendarDay, never>
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrCalendarDay, "[grCalendarDay]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrCalendarDay, never>
Requirement
required

GrCalendarRoot

class
DeclarationView source
GrCalendarRootts
export declare class GrCalendarRoot implements OnDestroy {
    readonly value: import("@angular/core").InputSignal<string | null | undefined>;
    readonly defaultValue: import("@angular/core").InputSignal<string | null | undefined>;
    readonly today: import("@angular/core").InputSignal<string | undefined>;
    readonly weekStartsOn: import("@angular/core").InputSignal<number | undefined>;
    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
    readonly dayLabel: import("@angular/core").InputSignal<((value: string) => string) | undefined>;
    readonly monthLabel: import("@angular/core").InputSignal<((year: number, month: number) => string) | undefined>;
    readonly weekdayLabels: import("@angular/core").InputSignal<readonly string[] | undefined>;
    readonly valueChange: import("@angular/core").OutputEmitterRef<{
        value: string;
        reason: string;
    }>;
    readonly store: CalendarStore;
    private readonly host;
    private readonly parts;
    private last;
    constructor();
    private applyParts;
    private ensureGrid;
    private apply;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrCalendarRoot, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrCalendarRoot, "gr-calendar-root", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "weekStartsOn": { "alias": "weekStartsOn"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; "monthLabel": { "alias": "monthLabel"; "required": false; "isSignal": true; }; "weekdayLabels": { "alias": "weekdayLabels"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
}
Name
Kind
Type
Requirement
apply
property
any
required
applyParts
property
any
required
ariaLabel
property
import("@angular/core").InputSignal<string | undefined>
required
dayLabel
property
import("@angular/core").InputSignal<((value: string) => string) | undefined>
required
defaultValue
property
import("@angular/core").InputSignal<string | null | undefined>
required
ensureGrid
property
any
required
host
property
any
required
last
property
any
required
monthLabel
property
import("@angular/core").InputSignal<((year: number, month: number) => string) | undefined>
required
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrCalendarRoot, "gr-calendar-root", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "weekStartsOn": { "alias": "weekStartsOn"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; "monthLabel": { "alias": "monthLabel"; "required": false; "isSignal": true; }; "weekdayLabels": { "alias": "weekdayLabels"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrCalendarRoot, never>
required
parts
property
any
required
store
property
CalendarStore
required
Name
apply
Kind
property
Type
any
Requirement
required
Name
applyParts
Kind
property
Type
any
Requirement
required
Name
ariaLabel
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Name
dayLabel
Kind
property
Type
import("@angular/core").InputSignal<((value: string) => string) | undefined>
Requirement
required
Name
defaultValue
Kind
property
Type
import("@angular/core").InputSignal<string | null | undefined>
Requirement
required
Name
ensureGrid
Kind
property
Type
any
Requirement
required
Name
host
Kind
property
Type
any
Requirement
required
Name
last
Kind
property
Type
any
Requirement
required
Name
monthLabel
Kind
property
Type
import("@angular/core").InputSignal<((year: number, month: number) => string) | undefined>
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrCalendarRoot, "gr-calendar-root", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "weekStartsOn": { "alias": "weekStartsOn"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; "monthLabel": { "alias": "monthLabel"; "required": false; "isSignal": true; }; "weekdayLabels": { "alias": "weekdayLabels"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrCalendarRoot, never>
Requirement
required
Name
parts
Kind
property
Type
any
Requirement
required
Name
store
Kind
property
Type
CalendarStore
Requirement
required
Name
today
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Name
value
Kind
property
Type
import("@angular/core").InputSignal<string | null | undefined>
Requirement
required
Name
valueChange
Kind
property
Type
import("@angular/core").OutputEmitterRef<{ value: string; reason: string; }>
Requirement
required
Name
weekdayLabels
Kind
property
Type
import("@angular/core").InputSignal<readonly string[] | undefined>
Requirement
required
Name
weekStartsOn
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required

GrCalendarRootProvider

class
DeclarationView source
GrCalendarRootProviderts
export declare class GrCalendarRootProvider implements OnDestroy {
    private readonly store;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrCalendarRootProvider, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrCalendarRootProvider, "gr-calendar-root-provider", never, {}, {}, never, ["*"], true, never>;
}
Name
Kind
Type
Requirement
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrCalendarRootProvider, "gr-calendar-root-provider", never, {}, {}, never, ["*"], true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrCalendarRootProvider, never>
required
store
property
any
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrCalendarRootProvider, "gr-calendar-root-provider", never, {}, {}, never, ["*"], true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrCalendarRootProvider, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required

@grassroot/ui-headless-svelte/calendar

Svelte adapter

4 exports
View source packages/ui-headless/svelte/src/calendar/index.ts

createCalendar

function
DeclarationView source
createCalendarts
export declare function createCalendar(input: () => CalendarInput, options?: UseCalendarOptions): UseCalendarResult;
Name
Kind
Type
Requirement
input
parameter
() => CalendarInput
required
options
parameter
UseCalendarOptions
optional
return
return value
UseCalendarResult
n/a
Name
input
Kind
parameter
Type
() => CalendarInput
Requirement
required
Name
options
Kind
parameter
Type
UseCalendarOptions
Requirement
optional
Name
return
Kind
return value
Type
UseCalendarResult
Requirement
n/a

Root

value
DeclarationView source
Rootts
export declare const Root: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a

UseCalendarOptions

interface
DeclarationView source
UseCalendarOptionsts
export interface UseCalendarOptions {
    id?: string;
    ariaLabel?: string;
    dayLabel?: (value: string) => string;
    onValueChange?: (detail: {
        value: string;
        reason: string;
    }) => void;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
dayLabel
property
(value: string) => string
optional
id
property
string
optional
onValueChange
property
(detail: { value: string; reason: string; }) => void
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
dayLabel
Kind
property
Type
(value: string) => string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: { value: string; reason: string; }) => void
Requirement
optional

UseCalendarResult

interface
DeclarationView source
UseCalendarResultts
export interface UseCalendarResult {
    service: CalendarService;
    connector: CalendarApi;
    version: () => number;
}
Name
Kind
Type
Requirement
connector
property
CalendarApi
required
service
property
CalendarService
required
version
property
() => number
required
Name
connector
Kind
property
Type
CalendarApi
Requirement
required
Name
service
Kind
property
Type
CalendarService
Requirement
required
Name
version
Kind
property
Type
() => number
Requirement
required

@grassroot/ui-headless-solid/calendar

Solid adapter

5 exports
View source packages/ui-headless/solid/src/calendar/index.ts

CalendarRootProps

interface
DeclarationView source
CalendarRootPropsts
export interface CalendarRootProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange">, CalendarInput {
    id?: string;
    ariaLabel?: string;
    dayLabel?: (value: string) => string;
    onValueChange?: (detail: {
        value: string;
        reason: string;
    }) => void;
    monthLabel?: (year: number, month: number) => JSX.Element;
    weekdayLabels?: readonly JSX.Element[];
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
dayLabel
property
(value: string) => string
optional
id
property
string
optional
monthLabel
property
(year: number, month: number) => JSX.Element
optional
onValueChange
property
(detail: { value: string; reason: string; }) => void
optional
weekdayLabels
property
readonly JSX.Element[]
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
dayLabel
Kind
property
Type
(value: string) => string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
monthLabel
Kind
property
Type
(year: number, month: number) => JSX.Element
Requirement
optional
Name
onValueChange
Kind
property
Type
(detail: { value: string; reason: string; }) => void
Requirement
optional
Name
weekdayLabels
Kind
property
Type
readonly JSX.Element[]
Requirement
optional

Root

function
DeclarationView source
Rootts
export declare function Root(props: CalendarRootProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
CalendarRootProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
CalendarRootProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

RootProvider

function
DeclarationView source
RootProviderts
export declare function RootProvider(props: {
    value: UseCalendarResult;
} & JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
{ value: UseCalendarResult; } & JSX.HTMLAttributes<HTMLDivElement>
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
{ value: UseCalendarResult; } & JSX.HTMLAttributes<HTMLDivElement>
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

useCalendar

function
DeclarationView source
useCalendarts
export declare function useCalendar(input: () => CalendarInput, options?: UseCalendarOptions): UseCalendarResult;
Name
Kind
Type
Requirement
input
parameter
() => CalendarInput
required
options
parameter
UseCalendarOptions
optional
return
return value
UseCalendarResult
n/a
Name
input
Kind
parameter
Type
() => CalendarInput
Requirement
required
Name
options
Kind
parameter
Type
UseCalendarOptions
Requirement
optional
Name
return
Kind
return value
Type
UseCalendarResult
Requirement
n/a

UseCalendarResult

interface
DeclarationView source
UseCalendarResultts
export interface UseCalendarResult {
    readonly service: CalendarService;
    readonly connector: CalendarApi;
    readonly snapshot: Accessor<CalendarSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
CalendarApi
required
service
property
CalendarService
required
snapshot
property
Accessor<CalendarSnapshot>
required
Name
connector
Kind
property
Type
CalendarApi
Requirement
required
Name
service
Kind
property
Type
CalendarService
Requirement
required
Name
snapshot
Kind
property
Type
Accessor<CalendarSnapshot>
Requirement
required