---
title: "React Calendar Week Picker Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/calendar/week-select"
---

# Week Picker - React Calendar demo

Pick a full week or a custom number of weeks in a React date picker — configure the first day and selection size (1, 2, or 3 weeks). For React and Next.JS.

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

## Description

Week selection can be configured by setting the [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) to `'preset-range'`.

Control the parameters of the selection:

- **Define the first day of the selection** - Set it in the [`firstSelectDay`](https://mobiscroll.com/docs/react/datepicker/api#opt-firstSelectDay) option. It can be different than the [`firstDay`](https://mobiscroll.com/docs/react/datepicker/api#localization-firstDay) of the week set in localization
- **Define the number of days** - The [`selectSize`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectSize) option can be any number, where `3` means three days, `7` means a week and `14` means two weeks

**Looking to select a range with custom start/end dates?** [See how start/end selection works →](https://demo.mobiscroll.com/react/calendar/range-select)

## What this demo shows

- This demo shows an inline date picker calendar from which one ore multiple weeks.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Week selection:** Hovering over a week previews the full selection range based on the configured first day and number of weeks.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month. 
- **First day of the selection:** The panel to the left of the calendar provides a segmented control with every weekday. Monday is selected by default, and choosing another day changes the first day of the selection range.
- **Number of weeks:** The panel below provides a segmented control for selecting one, two, or three weeks. One week is selected by default.

## Best for

- **Work schedules:** Select complete weekly or multiweek periods for shift planning, timesheets, or rota management.
- **Bookings and reservations:** Choose fixed week-long stays, rentals, or recurring booking periods.
- **Courses and programs:** Select one or more complete weeks for training sessions, camps, or cohort-based activities.
- **Reporting periods:** Pick consistent weekly ranges for reviewing activity, capacity, or operational data.

## Tutorial

### First day of the selection

- ( ) Su
- (x) Mo
- ( ) Tu
- ( ) We
- ( ) Th
- ( ) Fr
- ( ) Sa

### Number of weeks

- (x) One week
- ( ) Two weeks
- ( ) Three weeks

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={1}
    selectSize={7}
/>
```

With "Su":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={0}
    selectSize={7}
/>
```

With "Tu":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={2}
    selectSize={7}
/>
```

With "We":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={3}
    selectSize={7}
/>
```

With "Th":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={4}
    selectSize={7}
/>
```

With "Fr":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={5}
    selectSize={7}
/>
```

With "Sa":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={6}
    selectSize={7}
/>
```

With "Two weeks":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={1}
    selectSize={14}
/>
```

With "Three weeks":

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={1}
    selectSize={21}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option
- [`firstSelectDay`](https://mobiscroll.com/docs/react/datepicker/api#opt-firstSelectDay) - option
- [`selectSize`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectSize) - option

## Code

### JSX

```jsx
import { Datepicker, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <div>
      <Datepicker display="inline" select="preset-range" firstSelectDay={1} selectSize={14} />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => (
  <div>
    <Datepicker display="inline" select="preset-range" firstSelectDay={1} selectSize={14} />
  </div>
);

export default App;
```

## Implementation notes

- Use `controls: ['calendar']`, `display: 'inline'`, and `select: 'preset-range'` to select a fixed-length block of consecutive days as a unit (clicking any day within the block selects the whole block).
- Set `firstSelectDay` (`0`-`6`, Sunday-Saturday) to control which weekday the selected block starts on.
- Set `selectSize` to the block length in days - `7` for one week, `14` for two weeks, `21` for three weeks, etc.
- Update either at runtime via `setOptions({ firstSelectDay, selectSize })` on the instance.

## 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: [Multi-Date Selection](https://demo.mobiscroll.com/react/calendar/multiple-select.md) - Let users pick multiple dates in a React date picker. Set min and max selection counts and show a live counter in the header.
- Next: [Date Range Picker](https://demo.mobiscroll.com/react/calendar/range-select.md) - Select a start/end date range from an inline React calendar — set custom labels, range highlighting, and min/max range for booking or reservation.