[//]: # (Links in this document only works when viewed in the documentation browser, surf to ./docs)

# Bryntum Scheduler

## What is Bryntum Scheduler?

Welcome to Bryntum Scheduler - the most **reliable** and **feature-complete** JavaScript Scheduler component.

For more general information on our Scheduler product, please read on. This documentation provides you with everything
you need to get started.

If you are excited to have a go now, we suggest you to start with one of our **quick start** guides below:

<div class="framework-logos">
<a href="#Scheduler/guides/quick-start/react.md"><img src="Core/logo/react.svg" alt="React"><span>React</span></a>
<a href="#Scheduler/guides/quick-start/angular.md"><img src="Core/logo/angular.svg" alt="Angular"><span>Angular</span></a>
<a href="#Scheduler/guides/quick-start/vue-3.md"><img src="Core/logo/vue.svg" alt="Vue"><span>Vue</span></a>
<a href="#Scheduler/guides/quick-start/javascript.md"><img src="Core/logo/vanilla.svg" alt="Vanilla JS"><span>Vanilla JS</span></a>
<a href="#Scheduler/guides/quick-start/salesforce.md"><img src="Core/logo/salesforce.svg" alt="Salesforce"><span>Salesforce</span></a>
</div>

Bryntum Scheduler offers the best in class experience, including:
* A vast range of features
* Great performances
* Easy customisation
* and more.

## Live demo

Try out some of the Bryntum Scheduler features with the Live demo below.

<div class="external-example" data-file="Scheduler/guides/readme/intro.js"></div>

To get a complete view of Bryntum Scheduler Component capabilities, please read topic-specific guides from the menu and
visit our [API documentation](#Scheduler/view/Scheduler) and [examples browser](../examples).

## Integration

Bryntum Scheduler runs in all modern browsers (Chrome, Firefox, Safari, and modern Edge), whatever is your target technology.

You can use Bryntum Scheduler out of the box or integrate it with the frameworks of your choice and many third-party solutions. Visit the integration section of our documentation for further details:
* <a href="#Scheduler/guides/integration/react/guide.md">React <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/react.svg" alt="React"></a>
* <a href="#Scheduler/guides/integration/angular/guide.md">Angular <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/angular.svg" alt="Angular"></a>
* <a href="#Scheduler/guides/integration/vue/guide.md">Vue <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/vue.svg" alt="Vue"></a>
* <a href="#Scheduler/guides/integration/ionic/guide.md">Ionic <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/ionic.svg" alt="Ionic"></a>
* <a href="#Scheduler/guides/integration/salesforce/readme.md">Salesforce <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/salesforce.svg" alt="Salesforce"></a>

<div class="note">
If you have already downloaded Bryntum Scheduler, please note that it ships with framework examples found in the 
<code>examples/frameworks</code> folder. If you have not, you can <a href="https://bryntum.com/download">download your 
free trial version from here</a>
</div>

## How does it work?

The Bryntum Scheduler consists of two parts. 
The first part is the data, consisting of events, resources, assignments, and calendars. 
The second part is the visualization, the **User Interface** for the **data**.

The visualisation and user interface part of the Scheduler is based on the
[Bryntum Grid](https://bryntum.com/products/grid) and is written in plain JavaScript. So you can use most Scheduler and
Grid features too. For more information about Grid capabilities, please visit
the [Grid Component documentation](https://bryntum.com/products/grid/docs/).

In a traditional setup, you will want to use **frozen grid** columns to the left and let the **Scheduler Timeline** 
(which is a specialised grid) occupy the rest of the available space with a horizontal scrollbar to scroll the timeline.
You can also associate as many extra grids as needed to improve even more the user experience.

<img src="Scheduler/scheduler-layout.png" class="b-screenshot" alt="Scheduler layout">

[//]: # (do not change the title of the last section unless you adapt GA Tag tutorial_complete)
## What to do next?

The best way to learn how to use our Scheduler component is to first select a quick start guide and after that follow
our tutorial. To get started, please choose your target technology below:

<div class="framework-logos">
<a href="#Scheduler/guides/quick-start/react.md"><img src="Core/logo/react.svg" alt="React"><span>React</span></a>
<a href="#Scheduler/guides/quick-start/angular.md"><img src="Core/logo/angular.svg" alt="Angular"><span>Angular</span></a>
<a href="#Scheduler/guides/quick-start/vue-3.md"><img src="Core/logo/vue.svg" alt="Vue"><span>Vue</span></a>
<a href="#Scheduler/guides/quick-start/javascript.md"><img src="Core/logo/vanilla.svg" alt="Vanilla JS"><span>Vanilla JS</span></a>
</div>

## Professional Services

Feeling you need help? Don’t hesitate to request support from our 
[Professional Services here](https://bryntum.com/services/).

## Copyright and license

Copyright © 2009 - {{YEAR}}, Bryntum

All rights reserved.

[License](https://bryntum.com/products/scheduler/license/)


<p class="last-modified">Last modified on 2023-10-26 8:19:19</p>