v7.3.0
SupportExamplesFree Trial

Using Bryntum Scheduler with Ionic

Bryntum npm repository access

Please refer to this guide for Bryntum npm repository access.

Ionic with Angular

The guide below references to using Ionic Framework for building application based on Angular.

Use Bryntum Scheduler with Ionic

While Bryntum Scheduler is designed to work with any framework, it ships with demos and wrappers to simplify integration with popular frameworks like Ionic.

This guide provides a basic introduction to using Bryntum Scheduler with Ionic.

View online demos

Visit our online example browser to view demos of Bryntum Scheduler with Ionic.

Build and run local demos

Download distribution zip with demos according to this guide.

Ionic demos are located in examples/frameworks/ionic folder inside distribution zip.

Each demo contains bundled README.md file in demo folder with build and run instructions.

To view and run an example locally in development mode, you can use the following commands:

npm install
npm run start

That starts a local server accessible at http://localhost:4200. If you modify the example code while running it locally it is automatically rebuilt and updated in the browser allowing you to see your changes immediately.

The production version of an example, or your application, is built by running:

npm install
npm run build

The built version is then located in dist sub-folder which contains the compiled code that can be deployed to your production server.

Install Ionic framework

Installation and API documentation can be found at the Ionic project's page https://ionicframework.com/.

Install the Ionic CLI globally with npm:

npm install -g ionic

The -g means it is a global install. For Windows it is recommended to open an Admin command prompt. For Mac/Linux, run the command with sudo.

Create Ionic app

Create an App:

ionic start IonicApp blank

blank is a common starter template for the app.

Run the App:

cd IonicApp
ionic serve

TypeScript and Typings

Bryntum bundles ship with typings for the classes for usage in TypeScript applications. You can find scheduler*.d.ts files in the build folder inside the distribution zip package. The definitions also contain a special config type which can be passed to the class constructor.

The config specific types are also accepted by multiple other properties and functions, for example the Store.data config of the Store which accepts type ModelConfig[].

Sample code for tree store creation with ModelConfig and StoreConfig classes:

import { Store, StoreConfig, ModelConfig } from '@bryntum/scheduler';

const storeConfig: StoreConfig = {
    tree : true,
    data : [
        {
            id       : 1,
            children : [
                {
                    id : 2
                }
            ] as ModelConfig[]
        }
    ] as ModelConfig[]
};

new Store(storeConfig);

Wrappers

The Ionic wrappers encapsulate Bryntum Scheduler and other Bryntum widgets in Ionic components that expose configuration options, properties, features and events. The wrapped all Bryntum UI components so they can be used the usual Ionic way.

To use native API package classes with wrappers import them from @bryntum/scheduler.

import { Scheduler } from '@bryntum/scheduler';

Installing the wrappers package

The wrappers are distributed as a separate package @bryntum/scheduler-angular that is installed according to the used package manager. Please refer to this guide for Bryntum npm repository access.

Wrappers Overview

Wrappers are Ionic components which provide full access to Bryntum API widget class configs, properties, events and features. Each Wrapper has its own HTML tag which can be used in ionic templates. This is the list of available wrappers for Bryntum Scheduler Ionic package:

Wrapper tag name API widget reference
<bryntum-a-i-filter-field/> AIFilterField
<bryntum-boolean-combo/> BooleanCombo
<bryntum-button/> Button
<bryntum-button-group/> ButtonGroup
<bryntum-chat-panel/> ChatPanel
<bryntum-checkbox/> Checkbox
<bryntum-checkbox-group/> CheckboxGroup
<bryntum-checklist-filter-combo/> ChecklistFilterCombo
<bryntum-chip-view/> ChipView
<bryntum-code-editor/> CodeEditor
<bryntum-color-field/> ColorField
<bryntum-combo/> Combo
<bryntum-container/> Container
<bryntum-date-field/> DateField
<bryntum-date-picker/> DatePicker
<bryntum-date-range-field/> DateRangeField
<bryntum-date-time-field/> DateTimeField
<bryntum-demo-code-editor/> DemoCodeEditor
<bryntum-display-field/> DisplayField
<bryntum-duration-field/> DurationField
<bryntum-editor/> Editor
<bryntum-event-color-field/> EventColorField
<bryntum-field-filter-picker/> FieldFilterPicker
<bryntum-field-filter-picker-group/> FieldFilterPickerGroup
<bryntum-field-set/> FieldSet
<bryntum-file-field/> FileField
<bryntum-file-picker/> FilePicker
<bryntum-filter-field/> FilterField
<bryntum-grid/> Grid
<bryntum-grid-base/> GridBase
<bryntum-grid-chart-designer/> GridChartDesigner
<bryntum-grid-field-filter-picker/> GridFieldFilterPicker
<bryntum-grid-field-filter-picker-group/> GridFieldFilterPickerGroup
<bryntum-group-bar/> GroupBar
<bryntum-hint/> Hint
<bryntum-label/> Label
<bryntum-list/> List
<bryntum-menu/> Menu
<bryntum-month-picker/> MonthPicker
<bryntum-number-field/> NumberField
<bryntum-paging-toolbar/> PagingToolbar
<bryntum-panel/> Panel
<bryntum-password-field/> PasswordField
<bryntum-progress-bar/> ProgressBar
<bryntum-project-combo/> ProjectCombo
<bryntum-scheduler-project-model/> ProjectModel
<bryntum-radio/> Radio
<bryntum-radio-group/> RadioGroup
<bryntum-resource-combo/> ResourceCombo
<bryntum-resource-filter/> ResourceFilter
<bryntum-scheduler/> Scheduler
<bryntum-scheduler-base/> SchedulerBase
<bryntum-scheduler-date-picker/> SchedulerDatePicker
<bryntum-slider/> Slider
<bryntum-slide-toggle/> SlideToggle
<bryntum-splitter/> Splitter
<bryntum-tab-panel/> TabPanel
<bryntum-text-area-field/> TextAreaField
<bryntum-text-area-picker-field/> TextAreaPickerField
<bryntum-text-field/> TextField
<bryntum-time-field/> TimeField
<bryntum-timeline-histogram/> TimelineHistogram
<bryntum-time-picker/> TimePicker
<bryntum-time-zoom-slider/> TimeZoomSlider
<bryntum-toolbar/> Toolbar
<bryntum-tree-combo/> TreeCombo
<bryntum-tree-grid/> TreeGrid
<bryntum-undo-redo/> UndoRedo
<bryntum-view-preset-combo/> ViewPresetCombo
<bryntum-widget/> Widget
<bryntum-year-picker/> YearPicker

Import BryntumSchedulerModule

Add the following code to your app.module.ts:

import { BryntumSchedulerModule } from '@bryntum/scheduler-angular'

@NgModule({
    imports : [
        BryntumSchedulerModule
    ]
})

Then you will be able to use the custom tag like <bryntum-scheduler> and others listed above the same way as you use your application components. Our examples are built this way so you can refer to them to see how to use the tag and how to pass parameters.

Using the wrapper in your application

Now you can use the component defined in the wrapper in your application:

<bryntum-scheduler
    #scheduler
    tooltip="My cool Bryntum Scheduler component" ,
    (onCatchAll)="onSchedulerEvents($event)"
// other configs, properties, events or features
></bryntum-scheduler>

You will also need to import CSS files for Bryntum Scheduler. We recommend to do it in src/styles.scss:

// FontAwesome is used for icons
@import "~@bryntum/scheduler/fontawesome/css/fontawesome.css";
@import "~@bryntum/scheduler/fontawesome/css/solid.css";
// Structural CSS
@import "@bryntum/scheduler/scheduler.css";
// Bryntum theme of your choice
@import "@bryntum/scheduler/svalbard-light.css";

// other application-global styling

Embedding widgets inside wrapper

Wrappers are designed to allow using Bryntum widgets as Angular components, but they themselves cannot contain other Bryntum wrappers inside their tag. To embed Bryntum widgets inside a wrapper you should instead use the available configuration options for the wrapper's widget. Please note that not all widgets may contain inner widgets, please refer to the API docs to check for valid configuration options.

This example shows how to use a Toolbar widget inside the wrapper for Bryntum Scheduler:

Sample code for app.component.ts:

export class AppComponent {

    // Toolbar (tbar) config
    tbarConfig = {
        items : {
            myButton : {
                type : 'button',
                text : 'My button'
            }
        }
    }

}

Sample code for app.component.html:

<bryntum-scheduler
    #scheduler
    tbar="tbarConfig",
></bryntum-scheduler>

Configs, properties and events

All Bryntum Ionic Wrappers support the full set of the public configs, properties and events of a component.

Listening to Bryntum Scheduler events

The Bryntum Scheduler events are passed up to the Angular wrapper which makes it possible to listen to them the standard Angular way.

The following code demonstrates listening to the eventClick event:

Sample code for app.component.ts:

export class AppComponent implements AfterViewInit {

    onSchedulerEventClick(e : {[key:string] : any}) : void {
        console.log('onEventClick', e);
    }
    // etc.

Sample code for app.component.html:

<bryntum-scheduler
    #scheduler
    (onEventClick) = "onSchedulerEventClick($event)"

Please note that we prefix the capitalized event name with the on keyword and that we pass $event as the argument to the listener.

Another valid method is to pass a listeners config object to the Angular wrapper. For example:

Sample code for app.config.ts:

export const schedulerProps = {
    listeners : {
        eventClick(e) {
            console.log('eventClick', e);
        }
    },
    // etc

and app.component.html:

<bryntum-scheduler
    #scheduler
    [listeners] = "schedulerProps.listeners!"

Please note that we use unprefixed event names in this case.

Using dataChange event to synchronize data

Bryntum Scheduler keeps all data in its stores which are automatically synchronized with the UI and the user actions. Nevertheless, it is sometimes necessary for the rest of the application to be informed about data changes. For that it is easiest to use dataChange event.

app.component.html:

<bryntum-scheduler
    #scheduler
    (onDataChange) = "syncData($event)"

app.component.ts:

export class AppComponent {

    syncData({ store, action, records } : { store : Store; action : String; records : Model[]}) : void {
        console.log(`${store.id} changed. The action was: ${action}. Changed records: `, records);
        // Your sync data logic comes here
    }

    // ...
}

Features

Features are suffixed with Feature and act as both configs and properties for BryntumSchedulerComponent. They are mapped to the corresponding API features of the Bryntum Scheduler instance.

This is a list of all BryntumSchedulerComponent features:

Wrapper feature name API feature reference
aiFeature AI
aiFilterFeature AIFilter
cellCopyPasteFeature CellCopyPaste
cellEditFeature CellEdit
cellMenuFeature CellMenu
cellTooltipFeature CellTooltip
chartsFeature Charts
columnAutoWidthFeature ColumnAutoWidth
columnDragToolbarFeature ColumnDragToolbar
columnLinesFeature ColumnLines
columnPickerFeature ColumnPicker
columnRenameFeature ColumnRename
columnReorderFeature ColumnReorder
columnResizeFeature ColumnResize
dependenciesFeature Dependencies
dependencyEditFeature DependencyEdit
dependencyMenuFeature DependencyMenu
eventCopyPasteFeature EventCopyPaste
eventDragFeature EventDrag
eventDragCreateFeature EventDragCreate
eventDragSelectFeature EventDragSelect
eventEditFeature EventEdit
eventFilterFeature EventFilter
eventMenuFeature EventMenu
eventNonWorkingTimeFeature EventNonWorkingTime
eventResizeFeature EventResize
eventTooltipFeature EventTooltip
excelExporterFeature ExcelExporter
fileDropFeature FileDrop
fillHandleFeature FillHandle
filterFeature Filter
filterBarFeature FilterBar
groupFeature Group
groupSummaryFeature GroupSummary
headerMenuFeature HeaderMenu
headerZoomFeature HeaderZoom
labelsFeature Labels
lockRowsFeature LockRows
mergeCellsFeature MergeCells
nonWorkingTimeFeature NonWorkingTime
panFeature Pan
pdfExportFeature PdfExport
pinColumnsFeature PinColumns
printFeature Print
quickFindFeature QuickFind
regionResizeFeature RegionResize
resourceColumnReorderFeature ResourceColumnReorder
resourceMenuFeature ResourceMenu
resourceTimeRangesFeature ResourceTimeRanges
rowCopyPasteFeature RowCopyPaste
rowEditFeature RowEdit
rowExpanderFeature RowExpander
rowReorderFeature RowReorder
rowResizeFeature RowResize
scheduleContextFeature ScheduleContext
scheduleMenuFeature ScheduleMenu
scheduleTooltipFeature ScheduleTooltip
scrollButtonsFeature ScrollButtons
searchFeature Search
simpleEventEditFeature SimpleEventEdit
sortFeature Sort
splitFeature Split
stickyCellsFeature StickyCells
stickyEventsFeature StickyEvents
stripeFeature Stripe
summaryFeature Summary
timeAxisHeaderMenuFeature TimeAxisHeaderMenu
timeRangesFeature TimeRanges
timeSelectionFeature TimeSelection
treeFeature Tree
treeGroupFeature TreeGroup
treeSummaryFeature TreeSummary

Configuring features

Most features are enabled by default, in which case you can disable them like this:

const ganttProps = {
    // other config
    cellMenuFeature           : false,
    scheduleMenuFeature       : false
};

Others require you to enable them:

const ganttProps = {
    // other config
    stripeFeature       : true,
    dependenciesFeature : true
};

To learn more about configuration, visit the feature page from the API Feature reference table above.

Bryntum Scheduler API instance

It is important to know that the Ionic BryntumSchedulerComponent is not the native Bryntum Scheduler instance, it is a wrapper or an interface between the Ionic application and the Bryntum Scheduler itself.

All available configs, properties and features are propagated from the wrapper down to the underlying Bryntum Scheduler instance, but there might be the situations when you want to access the Bryntum Scheduler directly. That is fully valid approach and you are free to do it.

Accessing the Bryntum Scheduler instance

If you need to access Bryntum Scheduler functionality not exposed by the wrapper, you can access the Bryntum Scheduler instance directly. Within the wrapper it is available under the instance property.

This simple example shows how you could use it:

app.component.html

<ion-header>
...
</ion-header>

<ion-content>
    <scheduler
        #scheduler
        tooltip = "My cool Bryntum Scheduler component"
    ></scheduler>
</ion-content>

Sample code for app.component.ts:

import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular';
import { Scheduler } from '@bryntum/scheduler';

export class AppComponent implements AfterViewInit {

    @ViewChild(BryntumSchedulerComponent, { static : false }) schedulerComponent: BryntumSchedulerComponent;

    private scheduler : Scheduler;

    @ViewChild(BryntumSchedulerComponent, { static : false }) schedulerComponent: BryntumSchedulerComponent;

    ngAfterViewInit(): void {
        // store Bryntum Scheduler isntance
        this.scheduler = this.schedulerComponent.instance;
    }
}

When accessing instance directly, use wrapper's API widget reference docs from the list above to get available configs and properties.

Troubleshooting

Please refer to this Troubleshooting guide.

References

Contents