### Install Mobiscroll CLI

Source: https://mobiscroll.com/docs/react/getting-started/with-ionic

Install the Mobiscroll CLI globally on your development machine. This is a one-time setup.

```bash
$ npm install -g @mobiscroll/cli
```

--------------------------------

### Install Luxon

Source: https://mobiscroll.com/docs/react/eventcalendar/timezones

Install the luxon library using npm. For TypeScript projects, also install the types.

```bash
npm install luxon  
```

```bash
npm install --save-dev @types/luxon  
```

--------------------------------

### Install luxon with npm

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Install the luxon library using npm. For TypeScript projects, also install the types separately.

```bash
npm install luxon  

```

```bash
npm install --save-dev @types/luxon  

```

--------------------------------

### Dockerfile for Mobiscroll Installation

Source: https://mobiscroll.com/docs/react/getting-started/installation

Example Dockerfile demonstrating how to copy necessary configuration files (.npmrc or .yarnrc.yml) and install Mobiscroll packages in a production Node.js environment.

```dockerfile
FROM node:18.12.0 as build  
  
ENV NODE_ENV production  
  
WORKDIR /app  
  
COPY package.json package-lock.json .npmrc ./
  
RUN npm install  
  
COPY . .  
  
# ...  

```

--------------------------------

### Configure Bryntum Scheduler Pro View

Source: https://mobiscroll.com/docs/react/guides/migrating-from-bryntum-to-mobiscroll

Configure the date range and view preset for the Bryntum Scheduler Pro. This example sets a specific start and end date, and uses the 'hourAndDay' view preset.

```jsx
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-react';  
import '@bryntum/schedulerpro/schedulerpro.stockholm.css';  
  
const schedulerproProps = {  
  startDate  : new Date(2017, 0, 1, 6),  
  endDate    : new Date(2017, 0, 1, 20),  
  viewPreset : 'hourAndDay'  
};  
  
const App = () => {  
  return (  
    <BryntumSchedulerPro  
      {...schedulerproProps}  
    />  
  );  
};  
  
export default App;   

```

--------------------------------

### Install Day.js

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Install the Day.js library using npm. This is the first step to enable timezone functionality.

```bash
npm install dayjs  
```

--------------------------------

### Resources Array Example

Source: https://mobiscroll.com/docs/react/eventcalendar/timeline

Example of how to define an array of resources for the scheduler or timeline view.

```APIDOC
## Resources Array Example

### Description

An example demonstrating the structure of the `resources` array, which is used to configure multiple resources in scheduler and timeline views.

### Request Example

```javascript
resources: [
  {
    id: 1,
    name: 'Flatiron Room',
    color: '#f7c4b4'
  },
  {
    id: 2,
    name: 'The Capital City',
    color: '#c6f1c9'
  },
  {
    id: 3,
    name: 'Heroes Square',
    color: '#e8d0ef'
  }
]
```
```

--------------------------------

### Install moment-timezone

Source: https://mobiscroll.com/docs/react/eventcalendar/timezones

Install the moment-timezone library using npm. This is the first step to enable timezone support.

```bash
npm install moment-timezone  
```

--------------------------------

### Bryntum Calendar Basic Setup

Source: https://mobiscroll.com/docs/react/guides/migrating-from-bryntum-to-mobiscroll

A basic React component setup for the Bryntum Calendar, demonstrating its default week mode.

```javascript
import { BryntumCalendar } from '@bryntum/calendar-react';
@import "@bryntum/calendar/calendar.stockholm.css";

const calendarProps = {
  date : new Date(2020, 9, 12),
  mode : 'week',
};

const App = () => {
  return (
    <BryntumCalendar
      {...calendarProps}
    />
  );
};

export default App;
```

--------------------------------

### Example package.json entry for local NPM package

Source: https://mobiscroll.com/docs/react/guides/upgrade-from-trial

This entry in your package.json file indicates that Mobiscroll is installed as a local dependency from a specific file path.

```json
"@mobiscroll/react": "file:./src/lib/mobiscroll-package/mobiscroll-react-5.27.1.tgz",
```

--------------------------------

### Install Mobiscroll from NPM

Source: https://mobiscroll.com/docs/react/getting-started/installation

Install the Mobiscroll library for your React project from NPM using the config command.

```bash
mobiscroll config react  
```

--------------------------------

### Install vitest-canvas-mock

Source: https://mobiscroll.com/docs/react/guides/unit-testing

Install the vitest-canvas-mock package to ensure Mobiscroll Components can be tested without errors. This is a prerequisite for testing.

```bash
npm install vitest-canvas-mock --save  

```

--------------------------------

### Setup luxon with Mobiscroll

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Configure Mobiscroll to use the imported luxon library by assigning the luxon object to `luxonTimezone.luxon`.

```javascript
import * as luxon from 'luxon';  
import { luxonTimezone } from '@mobiscroll/react';  
import '@mobiscroll/react/dist/css/mobiscroll.min.css';  
luxonTimezone.luxon = luxon;  

```

--------------------------------

### Install Mobiscroll Trial Package

Source: https://mobiscroll.com/docs/react/getting-started/installation

Install the Mobiscroll Trial version for your React project by running the config command with the --trial flag.

```bash
mobiscroll config react --trial  
```

--------------------------------

### Run Next.js Development Server

Source: https://mobiscroll.com/docs/react/getting-started/with-nextjs

Start the development server to view your Next.js application with the integrated Mobiscroll component.

```bash
npm run dev  
```

--------------------------------

### Create Ionic React App

Source: https://mobiscroll.com/docs/react/getting-started/with-ionic

Use the Ionic CLI to start a new Ionic React project with the tabs starter template.

```bash
ionic start myStarterApp tabs --type=react
```

```bash
cd myStarterApp
```

--------------------------------

### Install Mobiscroll CLI

Source: https://mobiscroll.com/docs/react/core-concepts/cli

Install the Mobiscroll CLI globally using npm. Requires Node.js 11 or newer.

```bash
$ npm install -g @mobiscroll/cli  
```

--------------------------------

### Install Mobiscroll Print Module

Source: https://mobiscroll.com/docs/react/eventcalendar/print

Install the Mobiscroll Print Module as an additional package from npm.

```bash
npm install @mobiscroll/print  

```

--------------------------------

### Install moment-timezone with npm

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Install the moment-timezone library using npm. This is the first step to enable timezone support in the Datepicker.

```bash
npm install moment-timezone  

```

--------------------------------

### MbscSlot Type and Example

Source: https://mobiscroll.com/docs/react/eventcalendar/api

Defines the structure for slots in the timeline view and provides an example of how to configure them.

```APIDOC
## MbscSlot Type

### Description
Slots introduce a horizontal level of data grouping to the timeline view, complementing resources.

### Properties
- **eventDragBetweenSlots** (boolean) - Specifies whether events can be dragged between slots.
- **id** (string | number) - The unique ID of the slot, referenced in events, invalids, and colors.
- **name** (string) - The name of the slot, displayed in the slot column header.

### Default Behavior
- If set to `null` or `undefined`, all events are displayed regardless of their `slot` property.
- If set to an empty array, only events not tied to any slot are displayed.

### Example
```javascript
slots: [
  {
    id: 1,
    name: 'Morning shift'
  },
  {
    id: 2,
    name: 'Afternoon shift'
  }
]
```
```

--------------------------------

### Date Range Examples

Source: https://mobiscroll.com/docs/react/datepicker/value-selection

Examples of how to define date ranges for selection. These can be represented as strings or Date objects.

```javascript
const dateRangeExample1 = ['2023-10-19', '2023-10-24'];  
const dateRangeExample2 = [new Date(2023, 9, 19), new Date(2023, 9, 24)];  
  
const timeRangeExample1 = ['10:00', '13:30'];  
const timeRangeExample2 = [new Date(2023, 9, 19, 10, 0), new Date(2023, 9, 19, 13, 30)];  


```

--------------------------------

### Install Mobiscroll Manually (No NPM)

Source: https://mobiscroll.com/docs/react/getting-started/installation

Install Mobiscroll manually by running the config command with the --no-npm flag after copying the library files into your project.

```bash
mobiscroll config react --no-npm  
```

--------------------------------

### Event Data Example

Source: https://mobiscroll.com/docs/react/eventcalendar/api

Example demonstrating how to format event data for the Eventcalendar, including single events and recurring events with exceptions.

```APIDOC
## Event Data Example

### Description
This example shows how to define an array of event objects for the Eventcalendar, illustrating different configurations.

### Request Body Example
```json
{
  "data": [
    {
      "start": "new Date(2021, 5, 23)",
      "end": "new Date(2021, 5, 30)",
      "title": "Conference",
      "allDay": true,
      "color": "red"
    },
    {
      "title": "Work project",
      "recurring": {
        "repeat": "daily",
        "until": "2021-04-01"
      },
      "recurringException": ["2021-03-15", "2021-03-25"],
      "recurringExceptionRule": {
        "repeat": "weekly",
        "weekDays": "SA,SU"
      }
    }
  ]
}
```

### Notes
- The `data` property accepts an array of `MbscCalendarEvent` objects.
- Dates can be represented as JavaScript Date objects, ISO 8601 strings, or moment objects.
- For JavaScript Date objects, month numbers are zero-based (0 - January, 1 - February, ..., 11 - December).
- Recurring events can be defined using the `recurring` property, and exceptions can be specified using `recurringException` and `recurringExceptionRule`.
```

--------------------------------

### Alert Component Usage

Source: https://mobiscroll.com/docs/react/notifications/alert

Example demonstrating how to use the Alert component to display a message on button click.

```APIDOC
## Alert Component Usage

### Description
This example shows how to display an Alert message when a button is clicked. It utilizes the `useState` hook to manage the alert's visibility.

### Method
N/A (Component Usage Example)

### Endpoint
N/A (Component Usage Example)

### Parameters
N/A (Component Usage Example)

### Request Example
```javascript
import { useState } from 'react';
import { Alert, Button } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  const [isAlertOpen, setAlertOpen] = useState(false);
  const closeAlert = () => setAlertOpen(false);
  const alert = () => setAlertOpen(true);
  return <>
    <Alert
      isOpen={isAlertOpen}
      onClose={closeAlert}
      title="Cellular Data is Turned Off for 'Safari'"
      message="You can turn on cellular data for this app in Settings."
    />
    <Button onClick={alert}>Alert!</Button>
  </>
}
```

### Response
N/A (Component Usage Example)
```

--------------------------------

### Event Data Example

Source: https://mobiscroll.com/docs/react/eventcalendar/calendar

Example demonstrating how to structure event data for the Eventcalendar, including single-day events, multi-day events, and recurring events with exceptions.

```APIDOC
## Event Data Example

### Description

This example illustrates how to format the `data` array for the Eventcalendar, showcasing different event types and configurations.

### Request Example

```javascript
data: [
  {
    start: new Date(2021, 5, 23),
    end: new Date(2021, 5, 30),
    title: 'Conference',
    allDay: true,
    color: 'red'
  },
  {
    title: 'Work project',
    recurring: {
      repeat: 'daily',
      until: '2021-04-01'
    },
    recurringException: ['2021-03-15', '2021-03-25'],
    recurringExceptionRule: {
      repeat: 'weekly',
      weekDays: 'SA,SU'
    }
  }
]
```

### Default Value

`undefined`
```

--------------------------------

### Full Example: Get Invalid Occurrences

Source: https://mobiscroll.com/docs/react/core-concepts/instance

A complete React component demonstrating how to use `useRef` to get an Eventcalendar instance, define recurring invalid dates, and call the `getInvalids` method to log the occurrences.

```javascript
import { useRef, useState } from 'react';
import { Button, Eventcalendar  } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  const myCalRef = useRef(null);
  const [invalidsArray] = useState([{
    start: '2023-10-18',
    allDay: true,
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,FR,SA',
      interval: 1
    }
  }]);

  const getOccurences = () => {
    const occurences = myCalRef.current.getInvalids('2023-11-01', '2023-12-01');
    return occurences;
  }

  const logOccurences = () => {
    console.log(getOccurences());
  }

  return <>
    <Button onClick={logOccurences}>Log</Button>
    <Eventcalendar ref={myCalRef} invalid={invalidsArray} />
  </>
}
```

--------------------------------

### Prompt Component Usage

Source: https://mobiscroll.com/docs/react/notifications/prompt

Example of how to use the Prompt component in a React application to get user input, such as a password.

```APIDOC
## Prompt Component Usage

### Description
This example demonstrates how to display a prompt dialog on a button click to get user input. It utilizes the `useState` hook to manage the dialog's open state and logs the result when the prompt is closed.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```javascript
import { useState } from 'react';
import { Prompt, Button } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  const [isOpen, setOpen] = useState(false);
  const closePrompt = (result) => {
    console.log('Result: ', result);
    setOpen(false);
  }
  const openPrompt = () => setOpen(true);
  return <>
    <Prompt
      isOpen={isOpen}
      onClose={closePrompt}
      title="Sign in to iTunes Store"
      message="Enter the Apple ID password for 'hello@mobiscroll.com'."
      placeholder="Enter password"
      inputType="password"
    />
    <Button onClick={openPrompt}>Get password!</Button>
  </>
}
```

### Response
N/A (Component Usage)
```

--------------------------------

### Adding CLAUDE.md for Claude Code Setup

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Place the `CLAUDE.md` file in your project root to configure Claude Code with framework detection signals, routing rules, and anti-pattern examples for Mobiscroll React development.

```bash
your-project/
├── CLAUDE.md
├── src/
├── package.json
└── ...
```

--------------------------------

### Import luxon for Mobiscroll

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Import the luxon library and the `luxonTimezone` object from Mobiscroll. Include the Mobiscroll CSS.

```javascript
import * as luxon from 'luxon';  
import { luxonTimezone } from '@mobiscroll/react';  
import '@mobiscroll/react/dist/css/mobiscroll.min.css';  

```

--------------------------------

### Configure Mobiscroll Timeline View

Source: https://mobiscroll.com/docs/react/guides/migrating-from-bryntum-to-mobiscroll

Configure the Mobiscroll Timeline view, specifying the type, size, start time, and end time for the timeline. This example sets it to display one day with a 06:00 to 20:00 time range.

```jsx
import { useMemo } from 'react';  
import { Eventcalendar } from '@mobiscroll/react';  
import '@mobiscroll/react/dist/css/mobiscroll.min.css';  
  
function App() {  
  
  const myView = useMemo(  
    () => ({  
      timeline: {  
        type: 'day',  
        size: 1,  
        startTime: '06:00',  
        endTime: '20:00',  
      }  
    }),  
    [],  
  );  
  
  return (  
    <Eventcalendar view={myView} defaultSelectedDate="2017-01-01" /> // if you want to set the initial view to a specific date  
  );  
}  
  
export default App;  

```

--------------------------------

### Event Drag Start Callback

Source: https://mobiscroll.com/docs/react/eventcalendar/timeline

Callback triggered when an event drag has started.

```APIDOC
## onEventDragStart

### Description
Triggered when an event drag has started.

### Method
(args: MbscEventDragEvent, inst: EventcalendarBase) => void

### Parameters
#### args
- **action** ('create' | 'resize' | 'move') - The user action which triggered the event.
- **domEvent** (Event) - The DOM event of the drag.
- **event** (MbscCalendarEvent) - The dragged calendar event.
- **resource** (string | number) - The id of the resource where the event is dragged, if resources are set.
- **resourceObj** (MbscResource) - The resource where the event is dragged, if resources are set.
- **slot** (string | number) - The id of the slot where the event is dragged, if slots are set.
- **slotObj** (MbscSlot) - The slot where the event is dragged, if slots are set.
- **source** ('calendar' | 'scheduler' | 'timeline') - The view where the event is dragged.
#### inst
- The component instance.

### Response Example
```json
{
  "action": "move",
  "event": {
    "title": "Meeting",
    "start": "2024-01-01T10:00:00",
    "end": "2024-01-01T11:00:00"
  },
  "source": "calendar"
}
```
```

--------------------------------

### Initialize Bryntum Scheduler Pro

Source: https://mobiscroll.com/docs/react/guides/migrating-from-bryntum-to-mobiscroll

Basic initialization of the Bryntum Scheduler Pro component in a React application. Requires importing the component and its CSS.

```jsx
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-react';  
import '@bryntum/schedulerpro/schedulerpro.stockholm.css';  
     
const App = () => {  
  return (  
      <BryntumSchedulerPro />  
  );  
};  
  
export default App;  

```

--------------------------------

### Initialize Datepicker with Default Options

Source: https://mobiscroll.com/docs/react/datepicker/overview

This example demonstrates how to set up a basic Datepicker component with default settings. Ensure you have the necessary imports for Mobiscroll React and its CSS.

```javascript
import { Datepicker } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  return <>
    <Datepicker />
  </>
}

```

--------------------------------

### Example Return Value for Time Range

Source: https://mobiscroll.com/docs/react/datepicker/value-selection

Illustrates the expected array format for a selected time range when using ISO8601 strings.

```text
['14:50', '20:45']  


```

--------------------------------

### Configure Agenda Responsiveness with Breakpoints

Source: https://mobiscroll.com/docs/react/eventcalendar/agenda

Use the `responsive` option to define different configurations for various container widths. This example shows how to set specific views for 'xsmall', 'medium', and a custom breakpoint.

```javascript
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  const myResponsive = {
    xsmall: {
      view: {
        agenda: { type: 'week' }
      }
    },
    medium: {
      view: {
        calendar: { type: 'week' },
        agenda: { type: 'day' }
      }
    },
    custom: { // Custom breakpoint, you can use multiple if needed, but each must have a unique name.
      breakpoint: 1000,
      view: {
        calendar: { type: 'month' },
        agenda: { type: 'month' }
      }
    }
  };

  return <Eventcalendar responsive={myResponsive} />
}
```

--------------------------------

### Event Data Example

Source: https://mobiscroll.com/docs/react/eventcalendar/scheduler

Example of how to structure event data for the Eventcalendar, including single and recurring events.

```APIDOC
## Event Data Example

### Description
This example demonstrates how to define an array of events for the Eventcalendar, showcasing both simple events and events with recurrence rules.

### Request Body Example
```json
[
  {
    "start": "new Date(2021, 5, 23)",
    "end": "new Date(2021, 5, 30)",
    "title": "Conference",
    "allDay": true,
    "color": "red"
  },
  {
    "title": "Work project",
    "recurring": {
      "repeat": "daily",
      "until": "2021-04-01"
    },
    "recurringException": ["2021-03-15", "2021-03-25"],
    "recurringExceptionRule": {
      "repeat": "weekly",
      "weekDays": "SA,SU"
    }
  }
]
```

### Notes
- The `start` and `end` properties can accept JavaScript Date objects, ISO 8601 strings, or moment objects.
- For JavaScript Date objects, month numbers are zero-based (0 for January, 11 for December).
- Custom properties can be added to event objects and will be preserved.
```

--------------------------------

### Create a Basic Popup with Static Content

Source: https://mobiscroll.com/docs/react/popup/overview

This example demonstrates how to create a simple popup with static content. The popup closes when the overlay is clicked or tapped. Ensure you have the necessary Mobiscroll imports.

```javascript
import { useState } from 'react';
import { Popup } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  const [isPopupOpen, setPopupOpen] = useState(true);
  const closeThePopup = () => {
    setPopupOpen(false);
  }

  return <Popup isOpen={isPopupOpen} onClose={closeThePopup}>
    <div>
      <h3>Hi</h3>
      <p>Are you feeling good today?</p>
    </div>
  </Popup>
}

```

--------------------------------

### Responsive Options

Source: https://mobiscroll.com/docs/react/eventcalendar/agenda

Configure different options for various container widths using predefined or custom breakpoints.

```APIDOC
## responsive

### Description
Specifies different options for different container widths, in a form of an object, where the keys are the name of the breakpoints, and the values are objects containing the options for the given breakpoint.

The available width is queried from the container element of the component and not the browsers viewport like in css media queries.

### Predefined Breakpoints
- `xsmall` - min-width: 0px
- `small` - min-width: 576px
- `medium` - min-width: 768px
- `large` - min-width: 992px
- `xlarge` - min-width: 1200px

### Custom Breakpoints
Custom breakpoints can be defined by passing an object containing the `breakpoint` property specifying the min-width in pixels.

### Request Example
```javascript
{
  responsive: {
    small: {
      display: 'bottom'
    },
    custom: { // Custom breakpoint, you can use multiple, but each must have a unique name
      breakpoint: 600,
      display: 'center'
    },
    large: {
      display: 'anchored'
    }
  }
}
```

### Default value
`undefined`
```

--------------------------------

### Dropdown Basic Usage

Source: https://mobiscroll.com/docs/react/forms/dropdown

Demonstrates the basic usage of the Dropdown component with options.

```APIDOC
## Dropdown Basic Usage

### Description

This example shows how to use the Dropdown component with a simple label and options.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```javascript
import { Dropdown } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  return <Dropdown label="Label">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </Dropdown>;
}
```

### Response

#### Success Response (200)

N/A (Component Rendering)

#### Response Example

N/A
```

--------------------------------

### Set Active Selection (Start or End)

Source: https://mobiscroll.com/docs/react/datepicker/api

Use `setActiveDate` to specify whether the 'start' or 'end' date/time is currently selected.

```typescript
("end" | "start") => void
```

--------------------------------

### Import testing libraries in setupTests.js

Source: https://mobiscroll.com/docs/react/guides/unit-testing

Import the necessary testing libraries, including vitest-canvas-mock, into your setupTests.js file. This enables the testing environment for Mobiscroll Components.

```javascript
import "@testing-library/vitest-dom";  
import "vitest-canvas-mock"; // required for Mobiscroll Components  

```

--------------------------------

### Install Calendar Integration Package

Source: https://mobiscroll.com/docs/react/eventcalendar/calendar-integrations

Install the calendar integration package from npm. This is required when using the full Mobiscroll package from NPM.

```bash
npm install @mobiscroll/calendar-integration  

```

--------------------------------

### Event Data Example

Source: https://mobiscroll.com/docs/react/eventcalendar/timeline

Example demonstrating how to structure event data for the Eventcalendar, including single events, recurring events, and exceptions.

```APIDOC
## Event Data Example

### Description
This example shows how to populate the Eventcalendar with event data, including standard event properties and recurring event configurations.

### Request Example
```javascript
data: [
  {
    start: new Date(2021, 5, 23),
    end: new Date(2021, 5, 30),
    title: 'Conference',
    allDay: true,
    color: 'red'
  },
  {
    title: 'Work project',
    recurring: {
      repeat: 'daily',
      until: '2021-04-01'
    },
    recurringException: ['2021-03-15', '2021-03-25'],
    recurringExceptionRule: {
      repeat: 'weekly',
      weekDays: 'SA,SU'
    }
  }
]
```

### Default Value
`undefined`
```

--------------------------------

### Create Next.js App

Source: https://mobiscroll.com/docs/react/getting-started/with-nextjs

Use this command to create a new Next.js project if you don't have one already.

```bash
npx create-next-app@latest my-next-app  
cd my-next-app  
```

--------------------------------

### Responsive Options Configuration

Source: https://mobiscroll.com/docs/react/eventcalendar/timeline

Configures component options based on container width using predefined and custom breakpoints.

```APIDOC
## Responsive Options Configuration

### Description

Specifies different options for different container widths. The available width is queried from the component's container element. Five predefined breakpoints (`xsmall`, `small`, `medium`, `large`, `xlarge`) are available, and custom breakpoints can be defined.

### Breakpoints

- **xsmall**: min-width: 0px
- **small**: min-width: 576px
- **medium**: min-width: 768px
- **large**: min-width: 992px
- **xlarge**: min-width: 1200px

### Custom Breakpoints

Custom breakpoints can be defined by passing an object with a `breakpoint` property specifying the minimum width in pixels.

### Request Example

```javascript
responsive: {
  small: {
    display: 'bottom'
  },
  custom: { // Custom breakpoint, can use multiple, each must have a unique name
    breakpoint: 600,
    display: 'center'
  },
  large: {
    display: 'anchored'
  }
}
```
```

--------------------------------

### Configure Project with Mobiscroll CLI

Source: https://mobiscroll.com/docs/react/core-concepts/cli

Configure your current project with Mobiscroll resources and dependencies. Specify the desired version using the `--version` option.

```bash
$ mobiscroll config [types] [options]  
```

```bash
$ mobiscroll config [types] [options] --version=4  
```

--------------------------------

### Install Sass for Create React App

Source: https://mobiscroll.com/docs/react/guides/working-with-the-source

Install the sass library as a development dependency if you are using Create React App and need to import SASS files.

```bash
$ npm install sass --save-dev
```

--------------------------------

### Example MbscSelectData with Custom Property

Source: https://mobiscroll.com/docs/react/select/api

This example demonstrates how to use MbscSelectData with a custom 'flagUrl' property to display country flags alongside option text. This showcases the flexibility of adding custom data to select options.

```javascript
{
  value: 'US',
  text: 'United States of America',
  flagUrl: '//urlto/usa-flag', // custom property
}, {
  value: 'DE',
  text: 'Germany',
  flagUrl: '//urlto/german-flag',
}
```

--------------------------------

### Responsive Column Widths with Breakpoints

Source: https://mobiscroll.com/docs/react/grid-layout

Demonstrates how to apply column widths that adapt to different screen sizes using responsive classes like `.mbsc-col-{breakpoint}-{size}`. Columns will adjust their width at specified breakpoints.

```html
mbsc-col-sm-4
mbsc-col-sm-8

```

```html
mbsc-col-md-3
mbsc-col-md-7

```

```html
mbsc-col-md-2

```

```html
mbsc-col-lg-3
mbsc-col-lg-4
mbsc-col-lg-5

```

```html
mbsc-col-xl-6
mbsc-col-xl-6

```

--------------------------------

### Initialize and Start HTTP Listener

Source: https://mobiscroll.com/docs/react/eventcalendar/calendar-integrations

This C# Main method initializes an HttpListener, sets the listening prefix to 'http://localhost:8080/', starts listening for incoming connections, and then awaits incoming requests. It ensures the listener is properly closed after handling connections.

```csharp
    public static void Main()  
    {  
        // Create a Http server and start listening for incoming connections  
        listener = new HttpListener();  
        listener.Prefixes.Add("http://localhost:8080/");  
        listener.Start();  
  
        // Handle requests  
        Task listenTask = HandleIncomingConnections();  
        listenTask.GetAwaiter().GetResult();  
  
        // Close the listener  
        listener.Close();  
    }  
```

--------------------------------

### Equal-Width Columns Example

Source: https://mobiscroll.com/docs/react/grid-layout

Illustrates how columns automatically distribute equal width within a row when only the `.mbsc-col` class is used. This applies across all device sizes.

```html
mbsc-col (1 of 3)
mbsc-col (1 of 3)
mbsc-col (1 of 3)

```

--------------------------------

### dayNamesShort

Source: https://mobiscroll.com/docs/react/core-concepts/localization

List of abbreviated day names, starting from Sunday.

```APIDOC
## dayNamesShort

### Description
The list of abbreviated day names, starting from Sunday.

### Type
Array<string>

### Default Value
`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`
```