# What's new in Scheduler v5.6.0

## New npm packages for combining products

This release introduces a new set of npm packages and framework components, that allows combining multiple Bryntum
products in the same application.

These packages contain the product specific code only, as opposed to the current packages that has all code for the
products each product builds upon (for example Scheduler contains all code from Grid & Core).

The new packages are called `thin` packages, and moving forward it will be the recommended way of using Bryntum
products in npm based applications (for all supported frameworks). The packages are initially available for licensed
users only, but will be made available for trial users in the near future.

The following packages are available:

| Package                    | Purpose                                     |
|----------------------------|---------------------------------------------|
| @bryntum/core-thin         | Bryntum Core data and UI components package |
| @bryntum/grid-thin         | Bryntum Grid component package              |
| @bryntum/scheduler-thin    | Bryntum Scheduler component package         |
| @bryntum/schedulerpro-thin | Bryntum Scheduler Pro component package     |
| @bryntum/gantt-thin        | Bryntum Gantt component package             |
| @bryntum/calendar-thin     | Bryntum Calendar component package          |
| @bryntum/taskboard-thin    | Bryntum TaskBoard component package         |
| @bryntum/engine-thin       | Bryntum Scheduling engine component package |

Applications should install packages for the products they use, and the products those are built upon (see links to
guides below for more information). For example an application using Scheduler Pro should also install Scheduler, Grid &
Core:

```bash
npm install @bryntum/core-thin @bryntum/grid-thin @bryntum/scheduler-thin @bryntum/schedulerpro-thin
```

There are also new corresponding wrappers for the supported frameworks, which should be used instead of the current
wrappers. For example for React:

| Package                          | Purpose                                        |
|----------------------------------|------------------------------------------------|
| @bryntum/core-react-thin         | Bryntum Core UI widgets React wrappers package |
| @bryntum/grid-react-thin         | Bryntum Grid React wrapper package             |
| @bryntum/scheduler-react-thin    | Bryntum Scheduler React wrapper package        |
| @bryntum/schedulerpro-react-thin | Bryntum Scheduler Pro React wrapper package    |
| @bryntum/gantt-react-thin        | Bryntum Gantt React wrapper package            |
| @bryntum/calendar-react-thin     | Bryntum Calendar React wrapper package         |
| @bryntum/taskboard-react-thin    | Bryntum TaskBoard React wrapper package        |

Applications should install wrappers **only** for the products they use, there is **no** need to install them for the
products those are built upon. For example an application using Scheduler Pro:

```bash
npm install @bryntum/schedulerpro-react-thin
```

More information:
* [Multiple products in Angular](#Scheduler/guides/integration/angular/multiple-products.md)
* [Multiple products in React](#Scheduler/guides/integration/react/multiple-products.md)
* [Multiple products in Vue](#Scheduler/guides/integration/vue/multiple-products.md)

## Dependency terminal customization

The `Dependencies` feature now allow configuring the size (`terminalSize`) and offset (`terminalOffset`) from the event
bar for terminals (connection points shown when hovering the bar). This lets you position the terminals fully inside or
fully outside the bar. For example this makes the terminals smaller and moves them inside the bar:

```javascript
new Scheduler({
    features : {
        dependencies : {
            terminalSize    : 8,
            terminalOffset  : -8
        }
    }
});
```

While this makes them larger and moves them outside the bar:

```javascript
new Scheduler({
    features : {
        dependencies : {
            terminalSize    : 16,
            terminalOffset  : 10
        }
    }
});
```

Similar settings can be seen in action here, hover an event bar to display the terminals:

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

It also allows configuring delays before showing (`terminalShowDelay`, to require an intentional hover on an event bar)
and hiding (`terminalHideDelay`, to allow hide animations, and to be more forgiving) them.

```javascript
new Scheduler({
    features : {
        dependencies : {
            terminalShowDelay : 100, // ms
            terminalHideDelay : 300
        }
    }
});
```

The `b-hiding-terminals` CSS class is added to the event bar while the terminals are being hidden, can be used as a
target for CSS animations.

```css
.b-hiding-terminals .b-sch-terminal {
    animation : MyHideTerminalsAnimation 0.3s forwards;
}
```

The `dependencies` demo was updated to allow experimenting with these new options

## Support for asymmetrical `resourceMargin`

It's possible to set different values for top/left and bottom/right by assigning an object to
`resourceMargin` with `start` (margin top in horizontal mode, margin left in vertical mode) and
`end` (margin bottom / margin right) properties:
            
```javascript
new Scheduler({
    resourceMargin : {
        start    : 15,
        end      : 1
    }
});
```

The `rowHeight` demo was updated to allow experimenting with this new object

## Drag resizing rows

We have added a new feature called `RowResize`, that lets users resize resource rows by dragging their bottom border. It 
can be configured to allow resizing individual resources, or to apply the same size to all resources. See the updated 
`rowheight` example for a demonstration, or try it out below:

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

## React components in vertical mode resource headers

A `headerRenderer` supplied in vertical modes `resourceColumns` configuration can now return JSX:

```javascript
resourceColumns : {
    columnWidth    : 140,
    headerRenderer : ({ resourceRecord, elementConfig }) => {
        return (
            <ReactResourceHeader
                resourceRecord={resourceRecord}
                elementConfig={elementConfig}
            ></ReactResourceHeader>
        )
    }
}
```

In the snippet above, `ReactResourceHeader` is an example React component, that does the resource header rendering, you 
can use your own JSX. The React resource header renderer is demonstrated in the 
`examples/frameworks/react/javascript/vertical` demo.

## Improvements to the ViewPresetCombo

The behaviour of the `ViewPresetCombo` has been changed to better align with the functionality of "zooming". Instead of
calculating the new timespan from the current `startDate`, it will now calculate from the date that is in the center of
the visible timespan. Additionally, there is a new config, `useFixedDuration`, that defaults to `true`. This will ensure
that a `ViewPreset` always starts and ends with its default `mainUnit`. A `month` view will start at the 1:st and end at
the 31:st for example. This behaviour is not new, but the config to turn it off is. Set it to `false` to use the default
`zoomToLevel` behaviour instead.

## Functions and events declarations for TypeScript have been improved

Declarations of class config/property functions and events (which are represented as **onEventName** functions) were
improved to contain all available parameters and return type.

See examples below:

**Old declarations:**

```typescript
    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: Function|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: Function
```

**New declarations:**

```typescript
    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: ((event : { source: Combo, value: string, event: Event }) => void)|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: (record: Model, combo: Combo) => string|null
```


## Client side print / PDF export

A new [Print feature](#Scheduler/feature/export/Print) was added to allow printing Scheduler content using the browser
print dialog. It extends the [PDFExport feature](#Scheduler/feature/export/PdfExport) and uses same configs which manage
HTML markup rendering (exporters, columns, paper size, etc.). The only difference is that instead of sending generated
HTML to a backend, the feature creates an iframe element with generated content and opens the browser print dialog from
it.


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