You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
543
543
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
+
newDate(2026, 0, 1), // New Year's Day
554
+
newDate(2026, 11, 25), // Christmas
555
+
newDate(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
+
exportclassBookingComponent {
581
+
holidays = [
582
+
newDate(2026, 0, 1),
583
+
newDate(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
+
544
637
## Custom Styling
545
638
546
639
All style properties can be set via template attributes or programmatically.
@@ -711,6 +804,13 @@ calendar.refresh();
711
804
|---|---|---|---|
712
805
|`events`|`CalendarEvent[]`|`[]`| Dot markers on days |
713
806
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) |
0 commit comments