--- title: "React Event calendar Blocked Days and Date Ranges Example | Mobiscroll" component: "Event calendar" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/eventcalendar/blocked-days-ranges" --- # Blocked Days and Date Ranges - React Event calendar demo Disable weekends and date ranges in a React event calendar — block dates and drag-and-drop, and choose between strict or permissive validation modes. For React and Next.JS. - [Live demo](https://demo.mobiscroll.com/react/eventcalendar/blocked-days-ranges) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/calendar-view/blocked-days-ranges) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/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), [Angular](https://demo.mobiscroll.com/angular/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/react/eventcalendar/api#opt-invalid) option. A couple of examples: - To disable weekends, use the [recurring object](https://demo.mobiscroll.com/react/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/react/eventcalendar/api#event-onEventCreateFailed) / [`onEventUpdateFailed`](https://mobiscroll.com/docs/react/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/react/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/react/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 ```jsx const inv = [ { 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 } ]; const onEventCreateFailed = React.useCallback(() => { mobiscroll.toast({ message: 'Can\'t create event on this date' }); }); const onEventUpdateFailed = React.useCallback(() => { mobiscroll.toast({ message: 'Can\'t add event on this date' }); }); ``` With "Events cannot start or end on invalids, but can overlap": ```jsx const inv = [ { 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 } ]; const onEventCreateFailed = React.useCallback(() => { mobiscroll.toast({ message: 'Can\'t create event on this date' }); }); const onEventUpdateFailed = React.useCallback(() => { mobiscroll.toast({ message: 'Can\'t add event on this date' }); }); ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option - [`labels`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-labels) - option - [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option - [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option - [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option - [`invalidateEvent`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-invalidateEvent) - option - [`invalid`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-invalid) - option - [`onEventCreateFailed`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventCreateFailed) - event - [`onEventUpdateFailed`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventUpdateFailed) - event - [`onClose`](https://mobiscroll.com/docs/react/notifications/toast#event-onClose) - event ## Code ### JSX ```jsx import { Eventcalendar, getJson, setOptions, Toast } from '@mobiscroll/react'; import { useCallback, useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); function App() { const [myEvents, setEvents] = useState([]); const [isToastOpen, setToastOpen] = useState(false); const [toastText, setToastText] = useState(); const myInvalid = useMemo( () => [ { 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', }, ], [], ); const myView = useMemo(() => ({ calendar: { labels: true } }), []); const handleEventCreateFailed = useCallback(() => { setToastText("Can't create event on this date"); setToastOpen(true); }, []); const handleEventUpdateFailed = useCallback(() => { setToastText("Can't add event on this date"); setToastOpen(true); }, []); const handleToastClose = useCallback(() => { setToastOpen(false); }, []); useEffect(() => { getJson( 'https://trial.mobiscroll.com/work-events/', (events) => { setEvents(events); }, 'jsonp', ); }, []); return ( <> ); } export default App; ``` ### TSX ```tsx import { Eventcalendar, getJson, MbscCalendarEvent, setOptions, Toast } from '@mobiscroll/react'; import { FC, useCallback, useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); const App: FC = () => { const [myEvents, setEvents] = useState([]); const [isToastOpen, setToastOpen] = useState(false); const [toastText, setToastText] = useState(); const myInvalid = useMemo( () => [ { 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', }, ], [], ); const myView = useMemo( () => ({ calendar: { labels: true, }, }), [], ); const handleEventCreateFailed = useCallback(() => { setToastText("Can't create event on this date"); setToastOpen(true); }, []); const handleEventUpdateFailed = useCallback(() => { setToastText("Can't add event on this date"); setToastOpen(true); }, []); const handleToastClose = useCallback(() => { setToastOpen(false); }, []); useEffect(() => { getJson( 'https://trial.mobiscroll.com/work-events/', (events: MbscCalendarEvent[]) => { setEvents(events); }, 'jsonp', ); }, []); return (
); }; export default App; ``` ## 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-react.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 react ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` npm run dev ``` On a trial, add `--trial` to the config command: `mobiscroll config react --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation ## Related demos - Previous: [Drag and Drop Between Calendars](https://demo.mobiscroll.com/react/eventcalendar/drag-drop-between-calendar-instances.md) - Drag and drop events between two side-by-side React event calendar in month view — move events across separate calendars with cross-calendar drag and drop. - Next: [Double Booking Prevention](https://demo.mobiscroll.com/react/eventcalendar/prevent-double-booking-events.md) - Prevent overlapping events in a React event calendar — block double bookings per event or across all events with in-calendar conflict alerts.