diff --git a/packages/core/src/useCalendar/useCalendar.spec.ts b/packages/core/src/useCalendar/useCalendar.spec.ts
index 33633d16..8f0c791d 100644
--- a/packages/core/src/useCalendar/useCalendar.spec.ts
+++ b/packages/core/src/useCalendar/useCalendar.spec.ts
@@ -639,4 +639,164 @@ describe('useCalendar', () => {
expect(screen.getByText(maxDate.toString())).toBeInTheDocument();
});
});
+
+ describe('disabled state', () => {
+ test('prevents all interactions when disabled', async () => {
+ const currentDate = now('UTC');
+
+ await render({
+ components: {
+ CalendarCell,
+ },
+ setup() {
+ const { calendarProps, gridLabelProps, nextButtonProps, previousButtonProps, focusedDate, currentView } =
+ useCalendar({
+ label: 'Calendar',
+ modelValue: currentDate.toDate(),
+ timeZone: 'UTC',
+ disabled: true,
+ });
+
+ return {
+ calendarProps,
+ gridLabelProps,
+ nextButtonProps,
+ previousButtonProps,
+ focusedDate,
+ currentView,
+ currentDate,
+ };
+ },
+ template: `
+
+
+
{{ currentView.type }}
+
+
+
+
{{ focusedDate?.toString() }}
+
+
+ `,
+ });
+
+ await flush();
+
+ // Verify navigation buttons are disabled
+ expect(screen.getByText('Previous')).toBeDisabled();
+ expect(screen.getByText('Next')).toBeDisabled();
+
+ // Try to click navigation buttons
+ await fireEvent.click(screen.getByText('Previous'));
+ await fireEvent.click(screen.getByText('Next'));
+ expect(screen.getByText(currentDate.toString())).toBeInTheDocument();
+
+ // Try to change panel view
+ await fireEvent.click(screen.getByTestId('panel-label'));
+ expect(screen.getByTestId('panel-label')).toHaveTextContent('weeks');
+
+ // Try keyboard navigation
+ const calendar = screen.getByTestId('calendar');
+ await fireEvent.keyDown(calendar, { code: 'ArrowRight' });
+ await fireEvent.keyDown(calendar, { code: 'ArrowLeft' });
+ await fireEvent.keyDown(calendar, { code: 'ArrowUp' });
+ await fireEvent.keyDown(calendar, { code: 'ArrowDown' });
+ await fireEvent.keyDown(calendar, { code: 'PageUp' });
+ await fireEvent.keyDown(calendar, { code: 'PageDown' });
+ await fireEvent.keyDown(calendar, { code: 'Home' });
+ await fireEvent.keyDown(calendar, { code: 'End' });
+ expect(screen.getByText(currentDate.toString())).toBeInTheDocument();
+
+ // Try to select a date
+ const cell = screen.getByTestId('calendar-cell');
+ await fireEvent.click(cell);
+ await fireEvent.keyDown(cell, { code: 'Enter' });
+ expect(screen.getByText(currentDate.toString())).toBeInTheDocument();
+ });
+ });
+
+ describe('readonly state', () => {
+ test('prevents all interactions when readonly', async () => {
+ const currentDate = now('UTC');
+
+ await render({
+ components: {
+ CalendarCell,
+ },
+ setup() {
+ const { calendarProps, gridLabelProps, nextButtonProps, previousButtonProps, focusedDate, currentView } =
+ useCalendar({
+ label: 'Calendar',
+ modelValue: currentDate.toDate(),
+ timeZone: 'UTC',
+ readonly: true,
+ });
+
+ return {
+ calendarProps,
+ gridLabelProps,
+ nextButtonProps,
+ previousButtonProps,
+ focusedDate,
+ currentView,
+ currentDate,
+ };
+ },
+ template: `
+
+
+
{{ currentView.type }}
+
+
+
+
{{ focusedDate?.toString() }}
+
+
+ `,
+ });
+
+ await flush();
+
+ // Verify navigation buttons are disabled
+ expect(screen.getByText('Previous')).toBeDisabled();
+ expect(screen.getByText('Next')).toBeDisabled();
+
+ // Try to click navigation buttons
+ await fireEvent.click(screen.getByText('Previous'));
+ await fireEvent.click(screen.getByText('Next'));
+ expect(screen.getByText(currentDate.toString())).toBeInTheDocument();
+
+ // Try to change panel view
+ await fireEvent.click(screen.getByTestId('panel-label'));
+ expect(screen.getByTestId('panel-label')).toHaveTextContent('weeks');
+
+ // Try keyboard navigation
+ const calendar = screen.getByTestId('calendar');
+ await fireEvent.keyDown(calendar, { code: 'ArrowRight' });
+ await fireEvent.keyDown(calendar, { code: 'ArrowLeft' });
+ await fireEvent.keyDown(calendar, { code: 'ArrowUp' });
+ await fireEvent.keyDown(calendar, { code: 'ArrowDown' });
+ await fireEvent.keyDown(calendar, { code: 'PageUp' });
+ await fireEvent.keyDown(calendar, { code: 'PageDown' });
+ await fireEvent.keyDown(calendar, { code: 'Home' });
+ await fireEvent.keyDown(calendar, { code: 'End' });
+ expect(screen.getByText(currentDate.toString())).toBeInTheDocument();
+
+ // Try to select a date
+ const cell = screen.getByTestId('calendar-cell');
+ await fireEvent.click(cell);
+ await fireEvent.keyDown(cell, { code: 'Enter' });
+ expect(screen.getByText(currentDate.toString())).toBeInTheDocument();
+ });
+ });
});