# Upgrade guide for Scheduler v4.1.0

Be sure to also check out the news in [Grid](#Grid/guides/upgrades/4.1.0.md).

## Dropped support for RequireJS

In version 4.1.0 we have removed the RequireJS demo from the project, since it is an outdated technology.
We instead recommend using modern ES6 module imports which is supported in all modern browsers
(Chrome, FireFox, Safari, Edge (chromium)).

You could easily upgrade old application code to use new technology.

**Old code:**

`index.html`
```html
<script data-main="scripts/app" src="scripts/require.js"></script>
```

`scripts/app.js`

```javascript
requirejs.config({
    paths : {
        scheduler : '../../../build/scheduler.umd'
    }
});

requirejs(['scheduler'], function(bryntum) {
    new bryntum.Scheduler({
        // config here
    });
});
```

**New code:**

`index.html`
```html
<script type="module" src="scripts/app.js"></script>
```

`scripts/app.js`

```javascript
import { Scheduler } from '../../../build/scheduler.module.js';

new Scheduler({
    // config here
});
```

## Dropped support for passing TimeRanges feature store from the feature to Crud manager

Value of [TimeRanges](#Scheduler/feature/TimeRanges) feature  store config is no longer passed to Crud Manager instance.
Instead please use `timeRangeStore` config on the project. That will register the store both on Crud Manager and
the feature.

**Old code:**

```javascript
new Scheduler({
    features : {
        timeRanges : {
            store : myStore
        }
    },
    crudManager : {
        /*...*/
    }
});
```

**New code:**

```javascript
new Scheduler({
    project : {
        timeRangesStore : myStore
    },
    features : {
        timeRanges : true
    },
    crudManager : {
        /*...*/
    }
});
```

## CrudManager API changes

CrudManager `commit` was deprecated in favor of `acceptChanges`.
CrudManager `commitCrudStores` was deprecated in favor of `acceptChanges`.
CrudManager `reject` was deprecated in favor of `revertChanges`.
CrudManager `rejectCrudStores` was deprecated in favor of `revertChanges`.


**Old code:**

```javascript
scheduler.crudManager.commit();
scheduler.crudManager.commitCrudStores();
scheduler.crudManager.reject();
scheduler.crudManager.rejectCrudStores();
```

**New code:**

```javascript
scheduler.crudManager.acceptChanges();
scheduler.crudManager.revertChanges();
```

## CSS encoding

Bryntum now uses [Dart SASS](https://sass-lang.com/dart-sass) to compile CSS from SCSS for the themes. It outputs CSS
encoded with UTF-8. The encoding is specified at the top of the CSS file as a `@charset` tag:

```css
@charset "UTF-8";
```

It is important that this tag is preserved in the CSS used on page, to guarantee that font icons render as intended.

Minified CSS instead uses a byte order mark to specify encoding, which although invisible to the eye should be preserved
in the file used on page.

If you use a custom build process that includes our CSS and icons are not rendered correctly in all browsers, the issue
is most likely caused by missing encoding info. Try adding it back or serving the CSS with correct encoding specified
in the HTTP header.

## DependencyCreation events 

DependencyCreation events were all missing useful params about the state of the creation state as you drag and drop to setup a 
link between two events. The `data` param is now deprecated and will be removed in a future major version.

**Old code:**

```javascript
scheduler.on({
    beforedependencycreatedrag({ data }) {
        // Use undocumented params in data
    }
});
```

**New code:**
```javascript
scheduler.on({
    dependencycreatedrop({ source, target, dependency }) {
        // Documented access to source event, target event, and the created dependency
    }
});
```

## Frameworks examples

Frameworks examples were moved to **examples/frameworks** folder:

| Framework | Examples folder             |
|-----------|-----------------------------|
| Angular   | examples/frameworks/angular |
| Ionic     | examples/frameworks/ionic   |
| React     | examples/frameworks/react   |
| Vue v2    | examples/frameworks/vue     |
| Vue v3    | examples/frameworks/vue-3   |


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