### Install Day.js with npm

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

Run this command to install the Day.js library. No additional setup is needed for this step.

```bash
npm install dayjs  
```

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

### Install Mobiscroll CLI

Source: https://mobiscroll.com/docs/vue/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 with npm

Source: https://mobiscroll.com/docs/vue/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  

```

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

### Basic Datepicker Setup in Vue

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

This example demonstrates the basic setup for a Datepicker component in a Vue project. Ensure you have the necessary imports for the component and its CSS.

```vue
<script setup>
  import { MbscDatepicker } from '@mobiscroll/vue';
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';
</script>

<template>
  <MbscDatepicker />
</template>

```

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

### Install Luxon

Source: https://mobiscroll.com/docs/vue/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/vue/getting-started/installation

Example Dockerfile demonstrating how to copy necessary configuration files (`.npmrc` or `.yarnrc.yml`) and install Mobiscroll packages in a production 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 . .
  
# ...  

```

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

### Install vitest-canvas-mock

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

Install the vitest-canvas-mock package as a development dependency.

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

```

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

### Install Mobiscroll CLI

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

Install the Mobiscroll CLI globally using npm. This is a one-time setup for managing Mobiscroll packages.

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

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

### Install Day.js Library

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

Install the Day.js library using npm. This is the first step before integrating it with Mobiscroll.

```bash
npm install dayjs  

```

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

### Install Mobiscroll Trial Package

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

Install the Mobiscroll trial version in your project. Navigate to your project's root folder in the terminal and run this command.

```bash
mobiscroll config vue --trial  
```

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

### Import vitest-canvas-mock in setup file

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

Import the vitest-canvas-mock package in your setup file (e.g., src/setup.ts) to enable Mobiscroll component testing.

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

```

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

### Install Mobiscroll from NPM

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

Install the Mobiscroll library from NPM. Open a terminal in your project's root folder and execute this command.

```bash
mobiscroll config vue  
```

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

### Define Date Range Examples

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

Examples demonstrating how to define date and time ranges for selection. These can be represented as ISO 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 moment-timezone

Source: https://mobiscroll.com/docs/vue/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  
```

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

### Install Mobiscroll CLI

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

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

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

```

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

### Start Icon

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

Specifies an icon to be displayed at the start of the input field.

```APIDOC
## startIcon

### Description
Specifies the icon which will be displayed at the start of the input. Use the endIcon option for specifying an icon at the end.

### Default value
`undefined`
```

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

### Bryntum Calendar Component Example

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

A basic Bryntum Calendar component configuration with specified date and mode.

```html
<script setup>
import { BryntumCalendar } from '@bryntum/calendar-vue-3'
import '@bryntum/calendar/calendar.stockholm.css'

const calendarConfig = {
  date : new Date(2020, 9, 12),
  mode : 'week'
}
</script>

<template>
  <BryntumCalendar v-bind="calendarConfig" />
</template>

```

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

### Event Data Example

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

Example of how to structure the event data array for the Eventcalendar, demonstrating different event types and configurations.

```APIDOC
## Event Data Example

### Description
This example shows how to format the `data` property for the Eventcalendar, including single-day events, multi-day events, and recurring events with exceptions.

### 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'
    }
  }
]
```

### Notes
- The `data` property accepts an array of `MbscCalendarEvent` objects.
- Custom properties can be added to event objects and will be retained.
```

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

### Serve the Ionic App

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

Build and serve your Ionic application to view the changes and verify the Mobiscroll installation.

```bash
ionic serve
```

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

### Install Mobiscroll Manually (No NPM)

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

Install Mobiscroll manually by downloading a custom package. After downloading and extracting, copy the 'js', 'src', and 'css' folders into your project's 'src/lib/mobiscroll' directory, then run this command.

```bash
mobiscroll config vue --no-npm  
```

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

### Example Event Data

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

Demonstrates how to structure an array of event objects for the Eventcalendar, including single-day, multi-day, and recurring events.

```APIDOC
## Example Event Data

### Description
Provides an example of an array of `MbscCalendarEvent` objects.

### Request 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'
    }
  }
]
```

### Default Value
`undefined`
```

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

### Calendar System and Week Start

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

Specify the calendar system (Gregorian, Jalali, Hijri) and set the first day of the week.

```APIDOC
## Calendar System and Week Start

### calendarSystem
MbscCalendarSystem
Specifies the calendar system to be used. Supported calendars:
  * Gregorian - Gregorian calendar. This is the default calendar system.
  * Jalali - Persian calendar. The Farsi language needs to be included to the package.
  * Hijri - Hijri calendar. The Arabic language needs to be included to the package

**Default value**: `undefined`

### firstDay
number
Set the first day of the week: Sunday is 0, Monday is 1, etc.
**Default value**: `0`
```

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

### Import and Setup Luxon for Mobiscroll

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

Import the luxon library and the `luxonTimezone` object from Mobiscroll. Then, set Mobiscroll's reference to the imported library using `luxonTimezone.luxon = luxon;`.

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

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

### init

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

Makes the necessary initializations for the 3rd party.

```APIDOC
## POST /api/init

### Description
Makes the necessary initializations for the 3rd party. Triggers the `onInit` event when the initialization is ready, if specified.

### Method
POST

### Endpoint
/api/init

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **config** (MbscOutlookCalendarSyncConfig) - Required - The configuration object for the calendar integration.

### Request Example
```json
{
  "config": {
    "apiKey": "YOUR_API_KEY",
    "clientId": "YOUR_CLIENT_ID"
  }
}
```

### Response
#### Success Response (200)
None

#### Response Example
```json
{}
```
```

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

### Basic Eventcalendar Setup in Vue

Source: https://mobiscroll.com/docs/vue/eventcalendar/overview

Import the MbscEventcalendar component and its CSS. This example shows the default options for creating an Eventcalendar.

```vue
<script setup>
  import { MbscEventcalendar } from "@mobiscroll/vue";
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';
</script>

<template>
  <MbscEventcalendar />
</template>

```

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

### Basic Textarea Usage in Vue

Source: https://mobiscroll.com/docs/vue/forms/textarea

Use the MbscTextarea component for multi-line text input. Import the component and its CSS to get started.

```vue
<script setup>
  import { MbscTextarea } from '@mobiscroll/vue';
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';
</script>

<template>
  <MbscTextarea label="Label" />
</template>

```

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

### Vue Eventcalendar Component Setup

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

Example of setting up and using the Mobiscroll Eventcalendar component in a Vue Single File Component (SFC). It includes importing necessary modules, setting global options, and configuring the calendar view.

```vue
<script setup>
  import { ref } from 'vue';
  import { MbscEventcalendar, setOptions, localeEnGB } from '@mobiscroll/vue';
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

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

  const myView = ref({
    calendar: { type: 'month' },
    agenda: { type: 'month' },
  });
</script>

<template>
  <MbscEventcalendar :view="myView" />
</template>

```

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

### Event Drag Start Event

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

Triggered when an event drag has started.

```APIDOC
## @event-drag-start

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

### Parameters
#### args (MbscEventDragEvent)
- `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 (EventcalendarBase)
- The component instance.
```

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

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

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

After using the `--no-npm` flag, your package.json file should include an entry similar to this, referencing the local Mobiscroll package.

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

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

### Event Drag Start

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

Triggered when an event drag operation has started.

```APIDOC
## @event-drag-start

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

### Parameters
#### args (MbscEventDragEvent)
* **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 (EventcalendarBase)
* The component instance.
```

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

### Configure Event Calendar Responsiveness with Breakpoints

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

Use the 'responsive' option to define different configurations for various screen sizes. This example shows how to set a different 'view' for 'xsmall' and a custom breakpoint.

```javascript
import { MbscEventcalendar } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

const myResponsive = {
  xsmall: {
    view: {
      schedule: { type: 'day' }
    }
  },
  custom: {
    breakpoint: 600,
    view: {
      schedule: { type: 'week' }
    }
  }
}

```

```html
<template>
  <MbscEventcalendar
    :responsive="myResponsive"
  />
</template>
```

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

### Enable Auto Sync for Bryntum SchedulerPro

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

Configure the `project` option with `autoSync: true` and `syncUrl` to automatically persist local changes to the backend. Ensure necessary imports and CSS are included.

```javascript
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-vue-3';
import '@bryntum/schedulerpro/schedulerpro.stockholm.css';

const schedulerproProps = {
  // ... other configs
  project: {
    autoSync  : true,
    syncUrl   : 'save.php'
  }
};
```

```html
<template>
  <BryntumSchedulerPro v-bind="schedulerproProps" />
</template>
```

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

### Responsive Options

Source: https://mobiscroll.com/docs/vue/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.

There are five predefined breakpoints:
  * `xsmall` - min-width: 0px
  * `small` - min-width: 576px
  * `medium` - min-width: 768px
  * `large` - min-width: 992px
  * `xlarge` - min-width: 1200px

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

### Default value
`undefined`

### 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'
  }
}
```
```

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

### Install Calendar Integration Package

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

Install the Mobiscroll Calendar Integration package from npm. This is required for using third-party calendar services.

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

```

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

### Responsive Column Widths with Content

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

This example demonstrates responsive column sizing where content dictates the width. Columns with the `auto` class will resize based on their content, and adjacent columns will fill the remaining space.

```html
Column 1
Column 2
Column 3

```

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

### Configure Agenda View with Size and Type

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

Shows how to configure the agenda view with specific properties like 'type' and 'size'. This example sets the agenda to display 2 days.

```javascript
import { MbscEventcalendar } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

const myView = {
  agenda: {
    type: 'day',
    size: 2
  }
}
```

```html
<template>
  <MbscEventcalendar :view="myView" />
</template>
```

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

### Install Mobiscroll Print Module

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

Install the Mobiscroll Print Module using npm. This package provides print-specific styles and JavaScript functionality.

```bash
npm install @mobiscroll/print  
```

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

### Initialize Bryntum SchedulerPro in Vue

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

Basic initialization of Bryntum SchedulerPro component in a Vue 3 project using script setup.

```vue
<script setup>
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-vue-3'
import '@bryntum/schedulerpro/schedulerpro.stockholm.css'
</script>

<template>
  <BryntumSchedulerPro />
</template>


```

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

### Responsive Option

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

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

```APIDOC
## Responsive Option

### Description
The `responsive` option allows you to apply different configurations to the component based on the container's width. You can use predefined breakpoints or define custom ones.

### Type
`MbscResponsiveOptions<MbscEventcalendarOptions>`

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

### Example with Predefined and Custom Breakpoints
```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`
```

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

### PHP cURL Request Example

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

Example of making a POST request using cURL in PHP, often used for server-side authentication or data submission.

```php
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);
    // SSL options are set for testing purposes
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);


    // So that curl_exec returns the contents of the cURL; rather than echoing it
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    // Execute post
    $result = curl_exec($ch);
    if (curl_errno($ch)) {
        print curl_error($ch);
    }
    echo $result;
    curl_close($ch);
```

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

### Import luxon for Mobiscroll Vue

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

Import the luxon library as a namespace and the luxonTimezone plugin from Mobiscroll. Include Mobiscroll CSS.

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

```

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

### Initialize Mobiscroll Eventcalendar in Vue

Source: https://mobiscroll.com/docs/vue/guides/migrating-from-dhtmlx-to-mobiscroll

Basic setup for Mobiscroll's Eventcalendar component in a Vue 3 script setup. Includes necessary imports and CSS.

```vue
<script setup>  
import { MbscEventcalendar } from '@mobiscroll/vue'  
import '@mobiscroll/vue/dist/css/mobiscroll.min.css'  
</script>  
  
<template>  
  <MbscEventcalendar />  
</template>  


```

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

### Full Example: Recurring Events in Eventcalendar

Source: https://mobiscroll.com/docs/vue/core-concepts/recurrence

Integrate recurring events into the Mobiscroll Vue Eventcalendar component. This example shows how to define events with both object and RRULE string formats for recurrence.

```vue
<script setup>
  import { ref } from 'vue';
  import { MbscEventcalendar } from '@mobiscroll/vue';
  import type { MbscCalendarEvent } from '@mobiscroll/vue';
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

  const myEvents = ref<MbscCalendarEvent[]>([{
    start: new Date(2020, 2, 18, 9, 0),
    end: new Date(2020, 2, 18, 17, 0),
    title: 'Repeat every 2 days 5 times',
    recurring: {
        repeat: 'daily',
        count: 5,
        interval: 2
    }
  }, {
    start: new Date(2020, 2, 17, 20, 0),
    end: new Date(2020, 2, 17, 22, 0),
    title: 'Football training every Monday and Wednesday',
    recurring: 'FREQ=WEEKLY;UNTIL=2020-06-17;BYDAY=MO,WE'
  }, {
    title: 'Pay the bills - on every first Friday of the months',
    recurring: {
        repeat: 'monthly',
        pos: 1,
        weekDays: 'FR',
    }
  }]);
</script>

<template>
  <MbscEventcalendar :data="myEvents" />
</template>
```

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

### Vue 3 Composition API with Script Setup

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

For Mobiscroll in Vue, exclusively use the Vue 3 Composition API with `<script setup>`. Avoid Vue 2 Options API or `Vue.component()`.

```vue
Use Vue 3 Composition API with `<script setup>` only
```

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

### Configure Project with Mobiscroll CLI

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

Configure your current project with Mobiscroll resources and dependencies. Use the `--version` option to specify the desired Mobiscroll version.

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

```

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

```

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

### extendDefaultEvent Option

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

Use this option to set properties to the new event created with click or drag. The event creation is handled by the clickToCreate and dragToCreate options. It takes a function that should return the properties for the new event. The argument object passed to this function has the following properties: `start` (Date) - The date when the newly created event will start. `resource` (string | number) - The id of the resource where the event creation started.

```APIDOC
## extendDefaultEvent

### Description
Sets properties for new events created via click or drag.

### Method
(args: MbscNewEventData) => void | MbscCalendarEvent

### Parameters
#### Arguments (`args`)
- **start** (Date) - The date when the newly created event will start.
- **resource** (string | number) - The id of the resource where the event creation started.

### Request Example
```javascript
extendDefaultEvent: (args) => {
  return {
    color: args.resource === 'admin' ? 'green' : 'red',
    title: 'My event',
  };
}
```

### Default Value
`undefined`
```

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

### Textarea Basic Usage

Source: https://mobiscroll.com/docs/vue/forms/textarea

Demonstrates the basic implementation of the Textarea component with a label.

```APIDOC
## Textarea Basic Usage

### Description
This snippet shows how to use the `MbscTextarea` component with a label.

### 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
```html
<script setup>
  import { MbscTextarea } from '@mobiscroll/vue';
  import '@mobiscroll/vue/dist/css/mobiscroll.min.css';
</script>

<template>
  <MbscTextarea label="Label" />
</template>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### signIn

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

If the user is not signed in, starts the sign in flow.

```APIDOC
## POST /api/auth/signin

### Description
If the user is not signed in, starts the sign in flow. On success, triggers the `onSignedIn` event.

### Method
POST

### Endpoint
/api/auth/signin

### Parameters
None

### Request Example
```json
{}
```

### Response
#### Success Response (200)
None

#### Response Example
```json
{}
```
```

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

### Initialization

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

Triggered when the component is initialized.

```APIDOC
## @init

### Description
Triggered when the component is initialized.

### Method
Event Handler

### Parameters
#### Event Arguments (`args`)
- **args** (any) - The event argument object.

#### Component Instance (`inst`)
- **inst** (any) - The component instance.
```

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

### Load Remote Data with Bryntum SchedulerPro

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

Configure the `project` option with `autoLoad: true` and specify the `transport.load.url` to load events from a remote endpoint. Ensure CSS is imported.

```javascript
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-vue-3';
import '@bryntum/schedulerpro/schedulerpro.stockholm.css';

const schedulerproProps = {
  // ... other configs
  project: {
    autoLoad: true,
    transport: {
      load: {
        url: 'data/data.json'
      }
    }
  }
};
```

```html
<template>
  <BryntumSchedulerPro v-bind="schedulerproProps" />
</template>
```

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

### Customize Event Buffer Before

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

Use the `bufferBefore` template to customize the buffer area at the start of scheduler and timeline events. The template receives an event object with details like `allDay`, `end`, `id`, `isMultiDay`, `lastDay`, `original`, `start`, `title`, and `currentResource`.

```Vue
<template #bufferBefore="event">...</template>
```