# What's new in Scheduler v5.1.0

## Dependencies in vertical mode

The Dependencies feature can now be used in vertical mode (see the new
[vertical-dependencies](https://bryntum.com/products/scheduler/examples/vertical-dependencies/) demo):

<div class="external-example" data-file="Scheduler/feature/DependenciesVertical.js"></div>

## Dependency lines with rounded corners

By configuring a [radius](#Scheduler/feature/Dependencies#config-radius) you can round the corners on the dependency
lines for a less boxy look:

<div class="external-example" data-file="Scheduler/feature/DependenciesRadius.js"></div>

## Customize dependency arrow heads (markers)

The SVG path definition used for dependency line arrows (SVG markers) can now be easily replaced using the new
[markerDef](#Scheduler/feature/Dependencies#config-markerDef) config:

<div class="external-example" data-file="Scheduler/feature/DependenciesMarker.js"></div>

## 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-scheduler
```

or if you prefer using **typescript**:

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

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

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

## Simplified url configuration on CrudManager

Configuring CrudManager 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 scheduler = new Scheduler({
    crudManager : {
        transport : {
            load : {
                url : 'load.aspx'
            }
        }
    }
})
```

Can now be written more conveniently like this:

```javascript
const scheduler = new Scheduler({
    crudManager : {
        loadUrl : 'load.aspx'
    }
})
```
## New module bundle for Angular

Bryntum Scheduler 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 `scheduler.module.js` bundle in favor of removed `scheduler.lite.umd.js` one.

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

## New module bundle with WebComponents

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

Check the [upgrading guide](#Scheduler/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](#Scheduler/guides/customization/keymap.md) describing how to customize currently integrated keyboard
shortcuts.


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