---
title: "Angular Event calendar Blocked Days and Date Ranges Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/eventcalendar/blocked-days-ranges"
---
# Blocked Days and Date Ranges - Angular Event calendar demo
Disable weekends and date ranges in a Angular event calendar — block dates and drag-and-drop, and choose between strict or permissive validation modes. For Angular 22 and Ionic 8.
- [Live demo](https://demo.mobiscroll.com/angular/eventcalendar/blocked-days-ranges)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/calendar-view/blocked-days-ranges)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/blocked-days-ranges.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/blocked-days-ranges.md), [React](https://demo.mobiscroll.com/react/eventcalendar/blocked-days-ranges.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/blocked-days-ranges.md)
## Description
Entire days and ranges can be blocked out to manage event creation and editing more efficiently.
To disable specific or recurring days you can pass an array to the [`invalid`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-invalid) option. A couple of examples:
- To disable weekends, use the [recurring object](https://demo.mobiscroll.com/angular/eventcalendar/recurring-events) - `recurring: { repeat: 'weekly', weekDays: 'SA,SU' }`
- Disable a specific range - `{ start: new Date(2020, 11, 19), end: new Date(2020, 11, 20) }`
When dragging events onto disabled days, they will automatically be denied and [`onEventCreateFailed`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventCreateFailed) / [`onEventUpdateFailed`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventUpdateFailed) events will be triggered, from which custom logic can be executed to show a toast or maybe a modal for data correction. The built-in logic of how the calendar handles validation on user interaction can be controlled through the [`invalidateEvent`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-invalidateEvent) option:
- `'strict'` - Strict being the default, no event overlap is allowed with invalid ranges.
- `'start-end'` - With start-end validation the calendar checks if the start or end of the event coincides with any invalid range. Other overlaps are allowed.
If you're interested in invalids for a given range (including recurring occurrences), you can use the [`getInvalids`](https://mobiscroll.com/docs/angular/eventcalendar/api#method-getInvalids) function.
## What this demo shows
- A desktop month view event calendar shows a full month grid with event labels displayed directly inside the day cells.
- **Invalid days** Weekends are disabled through recurring invalid rules, and additional specific dates are disabled separately.
- **Disabled cell styling** Invalid day cells have a gray overlay that indicates events cannot be created on those days.
- **Month grid** Day cell display events, each event label has a colored line on the left, the event title, and the end time of the event on the right.
- **Event interaction** Hovering over or selecting an event label highlights it and shows resize handles on both sides, indicating that the event can be resized by clicking and dragging.
- **Validation mode selector** A control panel next to the calendar (left side) `Configure the built-in validation` includes two selectable validation modes.
- **Validation options** The first option `Events cannot start or end on invalids, but can overlap` allows events to start and end only on valid dates while still allowing overlap with invalid days.
- **Validation options** The default selected option `Events cannot overlap invalid ranges at all` prevents events from overlapping invalid days.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Event creation** Clicking and dragging on an empty part of a day cell creates a new event.
- **Validation during creation** Event creation follows the active validation mode and is blocked on invalid dates or invalid overlaps based on the selected option.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button between them on the right.
## Best for
- **Booking and availability rules** Useful when certain days must stay unavailable for booking, scheduling, or reservation creation.
- **Office closures and non-working days** A good fit for workflows where weekends, holidays, or blackout dates should not accept new events.
- **Operational scheduling** Works well for teams that need to enforce date-based scheduling restrictions while still allowing users to view existing events.
- **Validation policy comparisons** Helpful when you want to compare stricter invalid-range enforcement with a more permissive start-and-end-only validation rule.
## Tutorial
### Configure the built-in validation
- ( ) Events cannot start or end on invalids, but can overlap
- (x) Events cannot overlap invalid ranges at all
```html
```
With "Events cannot start or end on invalids, but can overlap":
```html
```
```ts
invalid: [
{
recurring: {
repeat: 'weekly',
weekDays: 'SA,SU'
}
}, {
start: '2026-10-19T00:00',
end: '2026-10-20T00:00'
title: 'Team offsite',
allDay: true
}, {
start: '2026-10-26T00:00',
end: '2026-10-27T00:00',
title: 'Team offsite',
allDay: true
}
];
onEventCreateFailed () {
this.notify.toast({
message: 'Can\'t create event on this date'
});
};
onEventUpdateFailed () {
this.notify.toast({
message: 'Can\'t add event on this date'
});
};
```
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`labels`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-labels) - option
- [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option
- [`invalidateEvent`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-invalidateEvent) - option
- [`invalid`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-invalid) - option
- [`onEventCreateFailed`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventCreateFailed) - event
- [`onEventUpdateFailed`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventUpdateFailed) - event
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
## Code
### Component
```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, Notifications, setOptions } from '@mobiscroll/angular';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [Notifications],
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
constructor(
private http: HttpClient,
private notify: Notifications,
) {}
myEvents: MbscCalendarEvent[] = [];
settings: MbscEventcalendarOptions = {
view: {
calendar: {
labels: true,
},
},
dragToCreate: true,
dragToMove: true,
dragToResize: true,
invalidateEvent: 'strict',
invalid: [
{
recurring: {
repeat: 'weekly',
weekDays: 'SA,SU',
},
},
{
allDay: true,
start: '2026-10-19T00:00',
end: '2026-10-20T00:00',
},
{
allDay: true,
start: '2026-10-26T00:00',
end: '2026-10-27T00:00',
},
],
onEventCreateFailed: () => {
this.notify.toast({
message: "Can't create event on this date",
});
},
onEventUpdateFailed: () => {
this.notify.toast({
message: "Can't add event on this date",
});
},
};
ngOnInit(): void {
this.http.jsonp('https://trial.mobiscroll.com/work-events/', 'callback').subscribe((resp) => {
this.myEvents = resp;
});
}
}
```
### Template
```html
```
## Implementation notes
- Set `view: { calendar: { labels: true } }`. Enable `dragToCreate: true`, `dragToMove: true`, and `dragToResize: true` so users can create and edit events interactively.
- Pass an `invalid` array to block days. Use a recurring rule for recurring days - for example weekends: `{ recurring: { repeat: 'weekly', weekDays: 'SA,SU' } }`. Block specific date ranges with `{ allDay: true, start: '...', end: '...' }`.
- Set `invalidateEvent` to control how strictly events interact with invalid ranges: `'strict'` (the default) blocks any overlap with an invalid range; `'start-end'` allows overlap but prevents the event start or end from landing on an invalid range.
- `onEventCreateFailed` and `onEventUpdateFailed` (Vue: `@event-create-failed`, `@event-update-failed`) fire when Mobiscroll blocks a creation or move due to an invalid date.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-angular.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config angular
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
ng serve
```
On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation
## Related demos
- Previous: [Drag and Drop Between Calendars](https://demo.mobiscroll.com/angular/eventcalendar/drag-drop-between-calendar-instances.md) - Drag and drop events between two side-by-side Angular event calendar in month view — move events across separate calendars with cross-calendar drag and drop.
- Next: [Double Booking Prevention](https://demo.mobiscroll.com/angular/eventcalendar/prevent-double-booking-events.md) - Prevent overlapping events in a Angular event calendar — block double bookings per event or across all events with in-calendar conflict alerts.