### Install Go SDK

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/go-sdk.md

Add the Mobiscroll Connect Go SDK module to your project using go get.

```bash
go get github.com/acidb/mobiscroll-connect-sdks/sdks/go@latest
```

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

### Install Luxon with npm

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/_shared/timezones/luxon_install.mdx

Use this command to install the Luxon library. For TypeScript projects, also install the type definitions.

```bash
npm install luxon
```

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

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

### Install mobiscroll-connect-sdk with uv

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/python-sdk.md

Install the Mobiscroll Connect Python SDK using uv.

```bash
uv add mobiscroll-connect-sdk
```

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

### Dockerfile Example for CI/CD

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/_shared/getting-started/cicd_usage.mdx

This Dockerfile demonstrates how to copy necessary configuration files like .npmrc and package.json into the build environment to ensure Mobiscroll packages can be installed from the private registry.

```docker
FROM node:18.12.0 as build

ENV NODE_ENV production

WORKDIR /app

COPY package.json package-lock.json .npmrc ./

RUN npm install

COPY . .

# ...
```

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

### Start Mobiscroll Trial

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/javascript/getting-started/installation.md

Initiate a Mobiscroll trial for JavaScript projects using the CLI. This command installs the ESM bundle by default.

```bash
mobiscroll trial javascript
```

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

### Install mobiscroll-connect-sdk with Poetry

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/python-sdk.md

Install the Mobiscroll Connect Python SDK using Poetry.

```bash
poetry add mobiscroll-connect-sdk
```

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

### Install jq on Windows

Source: https://github.com/acidb/mobiscroll-docs/blob/main/algolia-search.md

Use winget to install the jq utility on Windows 10 or later.

```bash
winget install jqlang.jq
```

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

### Install PHP SDK with Composer

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/php-sdk.md

Install the mobiscroll/connect-php package using Composer.

```bash
composer require mobiscroll/connect-php
```

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

### Install Mobiscroll.Connect via .NET CLI

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/dotnet-sdk.md

Install the Mobiscroll.Connect NuGet package using the .NET CLI.

```bash
dotnet add package Mobiscroll.Connect
```

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

### Install Day.js with npm

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/_shared/timezones/dayjs_install.mdx

Use this command to install the Day.js library via npm.

```bash
npm install dayjs
```

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

### Install Node.js SDK with npm

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/node-sdk.md

Install the Mobiscroll Connect Node.js SDK using npm.

```bash
npm install @mobiscroll/connect-sdk
```

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

### Install Mobiscroll Plugin

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/guides/ai-integration.md

Install the Mobiscroll plugin using this command.

```bash
/plugin install mobiscroll@mobiscroll
```

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

### Install Ruby SDK with gem command

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/ruby-sdk.md

Install the mobiscroll-connect gem directly using the gem install command.

```bash
gem install mobiscroll-connect
```

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

### Install Node.js SDK with pnpm

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/node-sdk.md

Install the Mobiscroll Connect Node.js SDK using pnpm.

```bash
pnpm add @mobiscroll/connect-sdk
```

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

### Install Node.js SDK with yarn

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/node-sdk.md

Install the Mobiscroll Connect Node.js SDK using yarn.

```bash
yarn add @mobiscroll/connect-sdk
```

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

### Install mobiscroll-connect-sdk with pip

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/python-sdk.md

Install the Mobiscroll Connect Python SDK using pip.

```bash
pip install mobiscroll-connect-sdk
```

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

### Install Mobiscroll Trial Package

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/_shared/getting-started/starting_trial.mdx

Use the Mobiscroll CLI to install the trial package in your project's root folder. The CLI handles authentication, package installation, and license configuration automatically.

```bash
mobiscroll config {props.framework} --trial
```

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

### GitHub Copilot Setup: Extended Instruction Files + MCP

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/guides/ai-integration.md

Download and place three extended instruction files in .github/instructions/ for live MCP schema lookups. This requires the MCP server to be configured.

```bash
your-project/
├── .github/
|   └── instructions/
|       ├── mobiscroll-ui.instructions.md
|       ├── mobiscroll-ui-angular.instructions.md
|       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json
```

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

### Local NPM Package Dependency Example

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/_shared/guides/upgrade_trial.mdx

After installation, your package.json will include an entry for the locally installed Mobiscroll package, referencing the .tgz file.

```json
"@mobiscroll/{props.framework}": "file:./src/lib/mobiscroll-package/mobiscroll-{props.framework}-5.27.1.tgz"
```

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

### Start Local Development Server

Source: https://github.com/acidb/mobiscroll-docs/blob/main/README.md

Starts a local development server for live previewing changes. Changes are reflected without server restart.

```bash
yarn start
```

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

### Bryntum Scheduler Initialization

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/javascript/guides/migrating-from-bryntum-to-mobiscroll.md

Example of initializing a Bryntum Scheduler instance.

```js
const scheduler = new Scheduler({
    appendTo   : 'container',
    // ...
});
```

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

### FullCalendar Event Structure

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/react/guides/migratiing-from-fullcalendar-to-mobiscroll.md

Example of an event object in FullCalendar, including `id`, `resourceId`, `start`, `end`, and `title`.

```jsx
const myEvents = [
  {
    id: '1',
    resourceId: 'r1',
    start: '2017-01-01T10:00:00',
    end: '2017-01-01T12:00:00',
    title: 'Click me',
  },
];
```

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

### FullCalendar Event Definition

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/guides/migrating-from-fullcalendar-to-mobiscroll.md

Example of an event definition in FullCalendar, including start, end, title, and resource ID.

```javascript
myEvents = [
  {
    id: '1',
    resourceId: 'r1',
    start: '2017-01-01T10:00:00',
    end: '2017-01-01T12:00:00',
    title: 'Click me'
  }
];
```

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

### FullCalendar Initialization in Vue

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/vue/guides/migrating-from-fullcalendar-to-mobiscroll.md

Example of initializing FullCalendar with basic plugins and view settings in a Vue 3 setup.

```html
<script setup>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendarOptions = {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth'
}
</script>

<template>
  <FullCalendar :options="calendarOptions" />
</template>
```

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

### GitHub Copilot Setup: .instructions.md Rules File Placement

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/jquery/guides/ai-integration.md

Place the downloaded .instructions.md rules file in the .github/instructions/ directory for GitHub Copilot. This file provides text-based API rules.

```bash
your-project/
├── .github/
|   └── instructions/
|       └── mobiscroll-jquery.instructions.md
├── src/
└── package.json
```

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

### Mobiscroll Event Structure

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/react/guides/migrating-from-dhtmlx-to-mobiscroll.md

Example of a Mobiscroll event object. It uses 'id', 'resource', 'start', 'end', and 'title' properties for event data.

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

function App() {

  const myEvents = useMemo(
    () => [
      {
        id: 1, 
        resource: 'r1',
        start: '2017-01-01T10:00',
        end: '2017-01-01T12:00',
        title: 'Click me'
      }
    ],
    [],
  );

  return (
    <Eventcalendar
      data={myEvents}
    />
  );
}

export default App;
```

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

### Cursor Rule File Setup (.mdc)

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/react/guides/ai-integration.md

Place the .mdc file in the .cursor/rules/ directory for Cursor to use text-based API rules. No additional setup is required.

```bash
your-project/
├── .cursor/
│   └── rules/
│       └── mobiscroll-react.mdc
├── src/
└── package.json
```

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

### Mobiscroll Event Structure

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/guides/migrating-from-dhtmlx-to-mobiscroll.md

Example of a Mobiscroll event object, requiring 'start', 'end', 'title', and optionally 'id' and 'resource' for assignment. Import MbscCalendarEvent.

```typescript
import { MbscCalendarEvent } from '@mobiscroll/angular';

myEvents: MbscCalendarEvent[] = [
  {
      id: 1,
      resource: 'r1',
      start: '2012-09-17T12:00',
      end: '2012-09-18T21:00',
      title: 'Conference'
  }
];
```

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

### showRangeLabels

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/_auto-generated/datepicker/options.md

Controls the visibility of labels indicating the start and end of a selected range. These labels are useful for guiding users during range selection and can be customized for text and placeholders.

```APIDOC
## showRangeLabels

### Description

Show or hide the range labels. When selecting a range, a start and end label is displayed on the picker. These labels indicate which part of the range are we selecting (start or end). The labels can also be used to switch the active selection from start to end or vice versa. The start label text and end label text as well as the start value placeholder and the end value placeholder can be customized.

### Type

boolean

### Default Value

true
```

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

### GitHub Copilot Setup: Extended Instruction Files Placement

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/jquery/guides/ai-integration.md

Place the three downloaded extended instruction files in the .github/instructions/ directory. These files enable live MCP server lookups for enhanced accuracy.

```bash
your-project/
├── .github/
|   └── instructions/
|       ├── mobiscroll-ui.instructions.md
|       ├── mobiscroll-ui-jquery.instructions.md
|       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json
```

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

### Local Filtering Data Setup

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/select/filtering.md

Define the `countries` array with `text` and `value` properties for local filtering. This example shows a sample data structure for the Select component.

```typescript
import { Component } from '@angular/core';
import { MbscSelectData } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  countries: MbscSelectData[] = [
    { text: 'US - United States', value: 3 },
    { text: 'DE - Germany', value: 19 },
    { text: 'HU - Hungary', value: 93 },
    // ... long list of 195 countries
    { text: 'ZW - Zimbabwe', values: 73 },
  ];
}
```

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

### GitHub Copilot Setup: .instructions.md Rules File

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/guides/ai-integration.md

Place the mobiscroll-angular.instructions.md file in the .github/instructions/ directory for text-based API rules. No additional setup is required.

```bash
your-project/
├── .github/
|   └── instructions/
|       └── mobiscroll-angular.instructions.md
├── src/
└── package.json
```

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

### Print Eventcalendar Instance

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/vue/eventcalendar/print.md

This example demonstrates how to get a reference to the Eventcalendar instance and call its print method to generate a printable view. It includes a button to trigger the print action.

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

  const myModules = [print];
  const calInstance = ref(null);

  function myPrint() {
    calInstance.value.instance.print();
  }
</script>

<template>
  <button @click="myPrint">Print it!</button>
  <MbscEventcalendar ref="calInstance" :modules="myModules" />
</template>
```

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

### onInit

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/_auto-generated/googlecalendar/events.md

Callback executed when the library is initialized and ready to use.

```APIDOC
## onInit

### Description
Callback executed when the library is initialized and ready to use.

### Signature
`() => void`
```

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

### Query Events Request

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/getting-started/postman-collection.md

This GET request queries events within a specified date range. It requires 'start' and 'end' query parameters and supports optional parameters for pagination and filtering.

```http
GET {{baseUrl}}/api/events?start=...&end=...
Authorization: Bearer {{accessToken}}
```

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

### Remote Data Loading with Bryntum Project Setup

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/javascript/guides/migrating-from-bryntum-to-mobiscroll.md

Configure Bryntum's project setup for automatic data loading and synchronization from backend endpoints.

```javascript
// With project setup
const scheduler = new Scheduler({
    // ... other configs
    project : {
            autoLoad        : true,
            autoSync        : true,
            loadUrl         : 'read.php',
            syncUrl         : 'save.php',
    }
});
```

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

### Mobiscroll Event Data Structure

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/javascript/guides/migrating-from-dhtmlx-to-mobiscroll.md

Example of a Mobiscroll event data object, using 'start' and 'end' for the event period, 'title' for the event's name, and 'resource' to link to a defined resource.

```js
data: [
    {
        id: 1,
        resource: 'r1',
        start: '2012-09-17T12:00',
        end: '2012-09-18T21:00',
        title: 'Conference'
    }
]
```

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

### GitHub Copilot: Option B - Extended Instruction Files Setup

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/vue/guides/ai-integration.md

Place the three downloaded extended instruction files in the .github/instructions/ directory for enhanced AI capabilities.

```bash
your-project/
├── .github/
|   └── instructions/
|       ├── mobiscroll-ui.instructions.md
|       ├── mobiscroll-ui-vue.instructions.md
|       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json
```

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

### Event Data Example

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/_auto-generated/eventcalendar/options_agenda.md

Define events for the Eventcalendar using an array of objects. Each object can specify start and end dates, title, all-day status, and color. Recurring events can be configured with rules and exceptions.

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

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

### Luxon Setup

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/react/eventcalendar/timezones.md

Configure the Eventcalendar to use Luxon for timezone conversions. Ensure Luxon is installed and imported, then pass the `luxonTimezone` object to the `timezonePlugin` option. Set `dataTimezone` to 'utc' and `displayTimezone` to your desired timezone.

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

luxonTimezone.luxon = luxon;

function App() {
  return <Eventcalendar
    // highlight-next-line
    timezonePlugin={luxonTimezone}
    dataTimezone="utc"
    displayTimezone="Europe/Berlin"
  />
}
```

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

### GitHub Copilot: Option A - .instructions.md Rules File Setup

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/vue/guides/ai-integration.md

Place the downloaded mobiscroll-vue.instructions.md file in the .github/instructions/ directory for text-based API rules.

```bash
your-project/
├── .github/
|   └── instructions/
|       └── mobiscroll-vue.instructions.md
├── src/
└── package.json
```

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

### Moment-Timezone Setup

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/react/eventcalendar/timezones.md

Configure the Eventcalendar to use moment-timezone for timezone conversions. Ensure moment-timezone is installed and imported, then pass the `momentTimezone` object to the `timezonePlugin` option. Set `dataTimezone` to 'utc' and `displayTimezone` to your desired timezone.

```jsx
import moment from 'moment-timezone';
import { Eventcalendar, momentTimezone } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

momentTimezone.moment = moment;

function App() {
  return <Eventcalendar
    // highlight-next-line
    timezonePlugin={momentTimezone}
    dataTimezone="utc"
    displayTimezone="Europe/Berlin"
  />
}
```

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

### Cursor Setup: Extended Rule Files + MCP

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/angular/guides/ai-integration.md

Download and place three extended rule files in .cursor/rules/ for live MCP schema lookups. This requires the MCP server to be configured.

```bash
your-project/
├── .cursor/
│   └── rules/
│       ├── mobiscroll-ui.mdc
│       ├── mobiscroll-ui-angular.mdc
│       └── mobiscroll-ui-theming.mdc
├── src/
└── package.json
```

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

### Select a Work Week (Monday to Friday)

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/react/datepicker/value-selection.md

This example demonstrates how to configure the Datepicker to select a 5-day work week starting on Monday. Use `select="preset-range"`, `firstSelectDay={1}`, and `selectSize={5}`.

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

function App() {
  const [myWeek, setMyWeek] = useState([]);
  const changeMyWeek = (ev) => setMyWeek(ev.value);
  return <>
    <Datepicker
      select="preset-range"
      firstSelectDay={1}
      selectSize={5}
      value={myWeek}
      onChange={changeMyWeek}
    />
  </>
}
```

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

### Initiate OAuth Authorization Request

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/api/oauth.md

Use this GET request to start the OAuth 2.0 authorization flow. It requires your project ID, a unique user ID, and optionally a redirect URI, response type, state, and scope.

```bash
GET /authorize?client_id=proj-123&user_id=user-456&redirect_uri=https://app.example.com/callback&response_type=code&state=xyz789&scope=read-write
```

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

### Initialize Ruby SDK Client with Custom Options

Source: https://github.com/acidb/mobiscroll-docs/blob/main/connect/integration/ruby-sdk.md

Initialize the client with a custom base URL and HTTP timeout.

```ruby
client = Mobiscroll::Connect::Client.new(
  client_id:     ENV['MOBISCROLL_CLIENT_ID'],
  client_secret: ENV['MOBISCROLL_CLIENT_SECRET'],
  redirect_uri:  'https://yourapp.com/oauth/callback',
  base_url:      'https://connect.mobiscroll.com/api',
  timeout:       60
)
```

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

### Vue Button Usage Examples

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/vue/forms/button.md

Demonstrates various ways to use the MbscButton component, including standard, flat, and outline variants, as well as buttons with start and end icons, icon-only buttons, and different color schemes.

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

<template>
  <MbscButton>Standard button</MbscButton>
  <MbscButton variant="flat">Flat button</MbscButton>
  <MbscButton variant="outline">Outline button</MbscButton>

  <MbscButton startIcon="home">With start icon</MbscButton>
  <MbscButton endIcon="home">With end icon</MbscButton>
  <MbscButton icon="pencil" ariaLabel="Icon only" />

  <MbscButton color="primary">Primary button</MbscButton>
  <MbscButton color="secondary">Secondary button</MbscButton>
  <MbscButton color="success">Success button</MbscButton>
  <MbscButton color="danger">Danger button</MbscButton>
  <MbscButton color="warning">Warning button</MbscButton>
  <MbscButton color="info">Info button</MbscButton>
  <MbscButton color="light">Light button</MbscButton>
  <MbscButton color="dark">Dark button</MbscButton>
</template>
```

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

### Add Mobiscroll MCP Server via Command Palette (VS Code)

Source: https://github.com/acidb/mobiscroll-docs/blob/main/versioned_docs/version-6.1.0/vue/guides/ai-integration.md

Use the VS Code Command Palette to add the Mobiscroll MCP server automatically. Run 'MCP: Add Server' for a guided setup.

```bash
MCP: Add Server
```