# What's new in Scheduler Pro v5.1.0

## Introducing Create React App templates

[Create React App script](https://create-react-app.dev/) templates are now available in the public npm repository.

If you are using **javascript only**, just type:

```shell
$ npx create-react-app my-app --template @bryntum/cra-template-javascript-schedulerpro
```

or if you prefer using **typescript**:

```shell
$ npx create-react-app my-app --template @bryntum/cra-template-typescript-schedulerpro
```

**Note**: Please feel free to change `my-app` to your preferred application name

Check the [React integration guide](#SchedulerPro/guides/quick-start/react.md) for more information.

## Nested events support

Scheduler Pro has since version 4.0.0 shipped with a popular demo called `nested-events`, showing how you in application
code could implement support for parent events containing child events (nested events) with basic drag and drop
support.

In this release this concept has been built into Scheduler Pro and is now available as the new
[NestedEvents](#SchedulerPro/feature/NestedEvents) feature, making it more powerful and also much easier to use. By
enabling it and using a tree EventStore parent events will render their children nested inside themselves:

<div class="external-example" data-file="SchedulerPro/feature/NestedEvents.js"></div>

Nested events can be dragged and resized, with configuration options for constraining to parent, allowing drop on other
parents etc. The feature also allows setting `resourceMargin`, `barMargin` and `eventLayout` for nested events. Check
it out in new `nested-events-configuration` and `nested-events-drag-from-grid` demos, or in the updated `nested-events`
demo.

## Simplified url configuration on the project

Configuring the crud manager functionality of the project was made a little easier by introducing shortcuts for setting
load and sync urls using the new `loadUrl` and `syncUrl` configs. When your application does not need to supply any
additional configs to the transport layer you can use them in favor of having to nest the urls. Old code like this:

```javascript
const schedulerPro = new SchedulerPro({
    project : {
        transport : {
            load : {
                url : 'load.aspx'
            }
        }
    }
})
```

Can now be written more conveniently like this:

```javascript
const schedulerPro = new SchedulerPro({
    project : {
        loadUrl : 'load.aspx'
    }
})
```

Flattening the structure out makes it easier for framework developers, who can now assign directly to the prop on the
project component rather than having to supply a config object. Pseudo framework code to illustrate the old approach:

```jsx
const projectConfig = {
    transport : {
        load : {
            url : 'load.php'
        }
    }
}

<BryntumProjectModel {...projectConfig} />
```

Simplified approach:

```jsx
<BryntumProjectModel loadUrl={"load.php"} />
```

## New module bundle for Angular

Bryntum Scheduler Pro is now delivered with new ES Module bundle without WebComponents. This was
done to avoid conflicts with Angular which also uses WebComponents for applications.

Angular wrappers use `schedulerpro.module.js` bundle in favor of removed `schedulerpro.lite.umd.js` one.

Check the [upgrading guide](#SchedulerPro/guides/upgrades/5.1.0.md#new-module-bundle-for-angular) for the details.

## New module bundle with WebComponents

Bryntum Scheduler Pro is now delivered with new `schedulerpro.wc.module.js` ES Module bundle with WebComponents.

Check the [upgrading guide](#SchedulerPro/guides/upgrades/5.1.0.md#new-module-bundle-with-webcomponents) for the 
details.

## New keyboard shortcuts functionality

[KeyMap](#Core/widget/mixin/KeyMap) is a mixin that allows for standardized and customizable keyboard shortcuts
functionality. KeyMap is mixed in to Widget by default and therefore available to all Widget child classes. There is a
new [guide](#Grid/guides/customization/keymap.md) describing how to customize currently integrated keyboard shortcuts.


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