Skip to content

Commit b4d5b51

Browse files
committed
feat(calendar): disabledDates and disabledWeekdays
1 parent 38db4f1 commit b4d5b51

1 file changed

Lines changed: 100 additions & 0 deletions

File tree

content/plugins/calendar.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,99 @@ const events: CalendarEvent[] = [
541541

542542
Each event produces a small colored dot below the day number. Multiple events on the same day show multiple dots. The `data` field is passed through for your use (e.g. to display event details on tap).
543543

544+
## Disabled Dates
545+
546+
Prevent specific dates or entire weekdays from being selected. Disabled days are rendered with `disabledDayTextColor` and cannot be tapped.
547+
548+
### Disable specific dates
549+
550+
```typescript
551+
// Disable holidays or other specific dates
552+
calendar.disabledDates = [
553+
new Date(2026, 0, 1), // New Year's Day
554+
new Date(2026, 11, 25), // Christmas
555+
new Date(2026, 6, 4), // Independence Day
556+
];
557+
```
558+
559+
### Disable weekdays
560+
561+
```typescript
562+
// Disable weekends (0 = Sunday, 6 = Saturday)
563+
calendar.disabledWeekdays = [0, 6];
564+
```
565+
566+
### Combine both
567+
568+
<FrameworkTabs>
569+
<template #angular>
570+
571+
```html
572+
<NCalendar
573+
[disabledDates]="holidays"
574+
[disabledWeekdays]="[0, 6]"
575+
disabledDayTextColor="#CCCCCC">
576+
</NCalendar>
577+
```
578+
579+
```typescript
580+
export class BookingComponent {
581+
holidays = [
582+
new Date(2026, 0, 1),
583+
new Date(2026, 11, 25),
584+
];
585+
}
586+
```
587+
588+
</template>
589+
<template #react>
590+
591+
```tsx
592+
<nCalendar
593+
disabledDates={holidays}
594+
disabledWeekdays={[0, 6]}
595+
disabledDayTextColor="#CCCCCC"
596+
/>
597+
```
598+
599+
</template>
600+
<template #vue>
601+
602+
```vue
603+
<NCalendar
604+
:disabledDates="holidays"
605+
:disabledWeekdays="[0, 6]"
606+
disabledDayTextColor="#CCCCCC"
607+
/>
608+
```
609+
610+
</template>
611+
<template #svelte>
612+
613+
```svelte
614+
<nCalendar
615+
disabledDates={holidays}
616+
disabledWeekdays={[0, 6]}
617+
disabledDayTextColor="#CCCCCC"
618+
/>
619+
```
620+
621+
</template>
622+
<template #solid>
623+
624+
```jsx
625+
<nCalendar
626+
disabledDates={holidays()}
627+
disabledWeekdays={[0, 6]}
628+
disabledDayTextColor="#CCCCCC"
629+
/>
630+
```
631+
632+
</template>
633+
</FrameworkTabs>
634+
635+
Disabled dates are also reported as `isDisabled: true` in the `dayRender` event, allowing further customization.
636+
544637
## Custom Styling
545638

546639
All style properties can be set via template attributes or programmatically.
@@ -711,6 +804,13 @@ calendar.refresh();
711804
|---|---|---|---|
712805
| `events` | `CalendarEvent[]` | `[]` | Dot markers on days |
713806

807+
### Disabled Dates
808+
809+
| Property | Type | Default | Description |
810+
|---|---|---|---|
811+
| `disabledDates` | `Date[]` | `[]` | Specific dates that cannot be selected |
812+
| `disabledWeekdays` | `number[]` | `[]` | Weekdays to disable (0=Sun, 1=Mon...6=Sat) |
813+
714814
### Spacing
715815

716816
| Property | Type | Default | Description |

0 commit comments

Comments
 (0)