---
title: "React Scheduler Work Week Example | Mobiscroll"
component: "Scheduler"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/scheduler/work-week-hours"
---

# Work Week - React Scheduler demo

Configure the React Scheduler with blocked break times — set up a business-hours scheduler in one view. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/scheduler/work-week-hours)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/scheduler/work-week-hours)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/scheduler/work-week-hours)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/work-week-hours.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/work-week-hours.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/work-week-hours.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/work-week-hours.md)

## Description

Customize the scheduler by not only [disabling certain hours](https://demo.mobiscroll.com/react/scheduler/time-off-blocked-ranges) but hide them through setting the `startTime` and `endTime` properties of the [`view.schedule`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) option. Quikcly set up a work calendar that goes from Monday through Friday with the `startDay` and `endDay` properties and renders the schedule from 8AM to 6PM.

You can easily add breaks - like a "Lunch break" - or disable times with the [`invalid` option](https://mobiscroll.com/docs/react/eventcalendar/api#opt-invalid).

## What this demo shows

- A desktop-style work-week scheduler with a fixed Monday-to-Friday header, a fixed all-day row, and a vertically scrollable time grid for the selected week.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Work-week layout** The scheduler shows Monday through Friday and hides weekends.
- **All-day row** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid shows working hours from 9 AM to 6 PM and scrolls vertically through the visible time range.
- **Lunch break** The 12 PM to 1 PM segment is disabled across the whole work week.
- **Invalid time range** Disabled lunch-break segments appear with a gray background and a Lunch break title in each day column.
- **Invalid event creation** Events cannot be created on lunch-break segments.
- **Invalid event resizing** Events cannot be resized or moved so they overlap the lunch-break segments.
- **Create error feedback** Trying to create an event during lunch break shows a bottom-centered toast with the message: `Can't create this task on lunch break.`
- **Update error feedback** Trying to resize or reschedule an event so it overlaps lunch break shows a toast with the message: `Can't schedule this task on lunch break.`
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current day.
- **Hover feedback** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Team calendars and meeting management** Plan meetings, workshops, training sessions, and collaborative work across a Monday-to-Friday schedule.
- **Consulting and professional services** Schedule client meetings, discovery calls, presentations, and project work with clear weekly availability.
- **Healthcare appointments** Manage consultations, treatments, follow-up visits, and practitioner schedules in a familiar calendar layout.
- **Service-based businesses** Schedule hourly appointments for salons, fitness trainers, therapists, coaches, and similar service providers.

## 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
- [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option
- [`invalid`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-invalid) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - 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 myInvalids = useMemo(
    () => [
      {
        start: '12:00',
        end: '13:00',
        title: 'Lunch break',
        type: 'lunch',
        recurring: {
          repeat: 'weekly',
          weekDays: 'MO,TU,WE,TH,FR',
        },
      },
    ],
    [],
  );

  const myView = useMemo(
    () => ({
      scheduler: {
        type: 'week',
        startDay: 1,
        endDay: 5,
        startTime: '09:00',
        endTime: '18:00',
      },
    }),
    [],
  );

  const handleEventCreateFailed = useCallback((args) => {
    if (args.invalid.type === 'lunch') {
      setToastText("Can't create this task on lunch break.");
      setToastOpen(true);
    }
  }, []);

  const handleEventUpdateFailed = useCallback((args) => {
    if (args.invalid.type === 'lunch') {
      setToastText("Can't schedule this task on lunch break.");
      setToastOpen(true);
    }
  }, []);

  const handleCloseToast = useCallback(() => {
    setToastOpen(false);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com//workday-events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div>
      <Eventcalendar
        dragToCreate={true}
        dragToMove={true}
        invalid={myInvalids}
        data={myEvents}
        view={myView}
        onEventCreateFailed={handleEventCreateFailed}
        onEventUpdateFailed={handleEventUpdateFailed}
      />
      <Toast message={toastText} isOpen={isToastOpen} onClose={handleCloseToast} />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import {
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventCreateFailedEvent,
  MbscEventUpdateFailedEvent,
  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<MbscCalendarEvent[]>([]);
  const [isToastOpen, setToastOpen] = useState<boolean>(false);
  const [toastText, setToastText] = useState<string>();
  const myInvalids = useMemo(
    () => [
      {
        start: '12:00',
        end: '13:00',
        title: 'Lunch break',
        type: 'lunch',
        recurring: {
          repeat: 'weekly',
          weekDays: 'MO,TU,WE,TH,FR',
        },
      },
    ],
    [],
  );

  const myView = useMemo<MbscEventcalendarView>(
    () => ({
      scheduler: {
        type: 'week',
        startDay: 1,
        endDay: 5,
        startTime: '09:00',
        endTime: '18:00',
      },
    }),
    [],
  );

  const handleEventCreateFailed = useCallback((event: MbscEventCreateFailedEvent) => {
    if (event.invalid.type === 'lunch') {
      setToastText("Can't create this task on lunch break.");
      setToastOpen(true);
    }
  }, []);

  const handleEventUpdateFailed = useCallback((event: MbscEventUpdateFailedEvent) => {
    if (event.invalid.type === 'lunch') {
      setToastText("Can't schedule this task on lunch break.");
      setToastOpen(true);
    }
  }, []);

  const handleCloseToast = useCallback(() => {
    setToastOpen(false);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com//workday-events/?vers=5',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div>
      <Eventcalendar
        dragToCreate={true}
        dragToMove={true}
        invalid={myInvalids}
        data={myEvents}
        view={myView}
        onEventCreateFailed={handleEventCreateFailed}
        onEventUpdateFailed={handleEventUpdateFailed}
      />
      <Toast message={toastText} isOpen={isToastOpen} onClose={handleCloseToast} />
    </div>
  );
};
export default App;
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', startDay: 1, endDay: 5, startTime: '09:00', endTime: '18:00' } }` to restrict the scheduler to Mon-Fri working hours only.
- Define the lunch break as an `invalid` entry with `start: '12:00'`, `end: '13:00'`, a `title`, a custom `type: 'lunch'` property for identification, and `recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' }` so it blocks the slot on every weekday.
- Enable `dragToCreate` and `dragToMove` for full event management directly on the calendar.
- In `onEventCreateFailed` and `onEventUpdateFailed`, check `args.invalid.type === 'lunch'` and show a `Toast` with a descriptive error message when the user tries to place an event on the lunch break.

## 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

- Next: [Appointment Scheduling](https://demo.mobiscroll.com/react/scheduler/doctors-appointment.md) - Build a React appointment scheduler — assign doctors or dentists, drag from an unscheduled queue, and prevent double-booking.