# Upgrade guide for Scheduler v5.3.0

## Event style & color CSS changes

The CSS used to support `eventStyle` and `eventColor` was changed - instead of letting SASS generate CSS for each style
and color combination it now uses internal CSS variables.

The upside of this change is that it removes thousands of lines of CSS (the unminified Scheduler specific CSS dropped
from almost 500kB down to 110kB), while also making it easier for us to add more colors and styles in the future.

The downside is that CSS variables does not allow for scaled (perceived change instead of absolute change) color
adjustments as SASS does, so the resulting colors are in some cases slightly different.

If your application uses the built-in styles and colors as is you should not need to adjust your styling, but if it uses
custom styles and colors for the events you might need to adjust the specificity of some selectors (we had to adjust
one demo out of the roughly 80 available for Scheduler).

## Localization update

`LocaleManager.registerLocale` has been deprecated.
[LocaleHelper.publishLocale](#Core/localization/LocaleHelper#function-publishLocale-static) should be used instead.

**Old code:**

```javascript
LocaleManager.registerLocale('Es', {
    desc : 'Spanish', locale : {
        localeName : 'Es',
        localeDesc : 'Spanish',
        locale     : {
            /* localization */
        }
    }
});
```

**New code:**

```javascript
LocaleHelper.publishLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});
```

`LocaleManager.extendLocale` has been deprecated.
[LocaleManager.applyLocale](#Core/localization/LocaleManager#function-applyLocale) should be used instead.

**Old code:**

```javascript
LocaleManager.extendLocale('Es', {
    desc : 'Spanish', locale : {
        locale : {
            /* localization */
        }
    }
});
```

**New code:**

```javascript
LocaleManager.applyLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});
```

Check our [localization guide](#Scheduler/guides/customization/localization.md#locales) for the details.

## Deprecated the `event` property of time range mouse events

It was replaced with `domEvents` to reduce risk of confusion with Bryntum events and event records. Applies to the
`timeRangeHeaderClick`, `timeRangeHeaderDblClick` and `timeRangeContextMenu` events.

**Old code:**

```javascript
scheduler.on({
    timeRangeHeaderClick({ event }) {
        console.log(event);
    }
});
```

**New code:**

```javascript
scheduler.on({
    timeRangeHeaderClick({ domEvent }) {
        console.log(domEvent);
    }
});
```


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