Using Bryntum Scheduler with Ionic

## Bryntum NPM repository access Please refer to this [guide for Bryntum NPM repository access](#Scheduler/guides/npm-repository.md). ## Ionic with Angular The guide below references to using Ionic Framework for building application based on Angular. ## Bryntum Scheduler The Bryntum Scheduler itself is framework agnostic, but it ships with demos and wrappers to simplify its use with popular frameworks such as Ionic. The purpose of this guide is to give you a basic introduction on how to use Bryntum Scheduler with Ionic. ## View online demos Bryntum Scheduler Ionic demos can be viewed in our [online example browser](https://bryntum.com/products/scheduler/examples/#Integration). ## Build and run local demos Download distribution zip with demos according to this [guide](#Scheduler/guides/download.md#distribution). 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: ```shell $ npm install $ npm run start ``` That starts a local server accessible at [http://localhost:4200"](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: ```shell $ 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: ```shell $ 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: ```shell $ ionic start IonicApp blank ``` `blank` is a common starter template for the app. Run the App: ```shell $ 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](#Core/data/Store#config-data) config of the `Store` which accepts type `Partial[]`. Sample code for tree store creation with `ModelConfig` and `StoreConfig` classes: ```typescript import { Store, StoreConfig, ModelConfig } from '@bryntum/scheduler'; const storeConfig: Partial = { tree : true, data : [ { id : 1, children : [ { id : 2 } ] as Partial[] } ] as Partial[] }; 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`. ```typescript 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](#Scheduler/guides/npm-repository.md). ### Wrappers Overview Wrappers are Ionic components which provide full access to Bryntum API widget class configs, properties, events and features. Each Wrapper has it's 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 | Wrapper component name (API widget reference) | |------------------|-----------------------------------------------| | <bryntum-button/> | [BryntumButtonComponent](#Core/widget/Button) | | <bryntum-button-group/> | [BryntumButtonGroupComponent](#Core/widget/ButtonGroup) | | <bryntum-checkbox/> | [BryntumCheckboxComponent](#Core/widget/Checkbox) | | <bryntum-chip-view/> | [BryntumChipViewComponent](#Core/widget/ChipView) | | <bryntum-color-field/> | [BryntumColorFieldComponent](#Core/widget/ColorField) | | <bryntum-color-picker/> | [BryntumColorPickerComponent](#Core/widget/ColorPicker) | | <bryntum-combo/> | [BryntumComboComponent](#Core/widget/Combo) | | <bryntum-container/> | [BryntumContainerComponent](#Core/widget/Container) | | <bryntum-date-field/> | [BryntumDateFieldComponent](#Core/widget/DateField) | | <bryntum-date-picker/> | [BryntumDatePickerComponent](#Core/widget/DatePicker) | | <bryntum-date-time-field/> | [BryntumDateTimeFieldComponent](#Core/widget/DateTimeField) | | <bryntum-display-field/> | [BryntumDisplayFieldComponent](#Core/widget/DisplayField) | | <bryntum-duration-field/> | [BryntumDurationFieldComponent](#Core/widget/DurationField) | | <bryntum-event-color-field/> | [BryntumEventColorFieldComponent](#Scheduler/widget/EventColorField) | | <bryntum-event-color-picker/> | [BryntumEventColorPickerComponent](#Scheduler/widget/EventColorPicker) | | <bryntum-field-filter-picker/> | [BryntumFieldFilterPickerComponent](#Core/widget/FieldFilterPicker) | | <bryntum-field-filter-picker-group/> | [BryntumFieldFilterPickerGroupComponent](#Core/widget/FieldFilterPickerGroup) | | <bryntum-file-field/> | [BryntumFileFieldComponent](#Core/widget/FileField) | | <bryntum-file-picker/> | [BryntumFilePickerComponent](#Core/widget/FilePicker) | | <bryntum-filter-field/> | [BryntumFilterFieldComponent](#Core/widget/FilterField) | | <bryntum-grid/> | [BryntumGridComponent](#Grid/view/Grid) | | <bryntum-grid-base/> | [BryntumGridBaseComponent](#Grid/view/GridBase) | | <bryntum-grid-field-filter-picker/> | [BryntumGridFieldFilterPickerComponent](#Grid/widget/GridFieldFilterPicker) | | <bryntum-grid-field-filter-picker-group/> | [BryntumGridFieldFilterPickerGroupComponent](#Grid/widget/GridFieldFilterPickerGroup) | | <bryntum-group-bar/> | [BryntumGroupBarComponent](#Grid/widget/GroupBar) | | <bryntum-label/> | [BryntumLabelComponent](#Core/widget/Label) | | <bryntum-list/> | [BryntumListComponent](#Core/widget/List) | | <bryntum-menu/> | [BryntumMenuComponent](#Core/widget/Menu) | | <bryntum-number-field/> | [BryntumNumberFieldComponent](#Core/widget/NumberField) | | <bryntum-paging-toolbar/> | [BryntumPagingToolbarComponent](#Core/widget/PagingToolbar) | | <bryntum-panel/> | [BryntumPanelComponent](#Core/widget/Panel) | | <bryntum-password-field/> | [BryntumPasswordFieldComponent](#Core/widget/PasswordField) | | <bryntum-project-combo/> | [BryntumProjectComboComponent](#Scheduler/widget/ProjectCombo) | | <bryntum-radio/> | [BryntumRadioComponent](#Core/widget/Radio) | | <bryntum-radio-group/> | [BryntumRadioGroupComponent](#Core/widget/RadioGroup) | | <bryntum-resource-combo/> | [BryntumResourceComboComponent](#Scheduler/widget/ResourceCombo) | | <bryntum-resource-filter/> | [BryntumResourceFilterComponent](#Scheduler/widget/ResourceFilter) | | <bryntum-resource-header/> | [BryntumResourceHeaderComponent](#Scheduler/view/ResourceHeader) | | <bryntum-scheduler/> | [BryntumSchedulerComponent](#Scheduler/view/Scheduler) | | <bryntum-scheduler-base/> | [BryntumSchedulerBaseComponent](#Scheduler/view/SchedulerBase) | | <bryntum-scheduler-date-picker/> | [BryntumSchedulerDatePickerComponent](#Scheduler/widget/SchedulerDatePicker) | | <bryntum-slider/> | [BryntumSliderComponent](#Core/widget/Slider) | | <bryntum-slide-toggle/> | [BryntumSlideToggleComponent](#Core/widget/SlideToggle) | | <bryntum-splitter/> | [BryntumSplitterComponent](#Core/widget/Splitter) | | <bryntum-sub-grid/> | [BryntumSubGridComponent](#Grid/view/SubGrid) | | <bryntum-tab-panel/> | [BryntumTabPanelComponent](#Core/widget/TabPanel) | | <bryntum-text-area-field/> | [BryntumTextAreaFieldComponent](#Core/widget/TextAreaField) | | <bryntum-text-area-picker-field/> | [BryntumTextAreaPickerFieldComponent](#Core/widget/TextAreaPickerField) | | <bryntum-text-field/> | [BryntumTextFieldComponent](#Core/widget/TextField) | | <bryntum-time-field/> | [BryntumTimeFieldComponent](#Core/widget/TimeField) | | <bryntum-timeline-histogram/> | [BryntumTimelineHistogramComponent](#Scheduler/view/TimelineHistogram) | | <bryntum-time-picker/> | [BryntumTimePickerComponent](#Core/widget/TimePicker) | | <bryntum-toolbar/> | [BryntumToolbarComponent](#Core/widget/Toolbar) | | <bryntum-tree-combo/> | [BryntumTreeComboComponent](#Grid/widget/TreeCombo) | | <bryntum-tree-grid/> | [BryntumTreeGridComponent](#Grid/view/TreeGrid) | | <bryntum-undo-redo/> | [BryntumUndoRedoComponent](#Scheduler/widget/UndoRedo) | | <bryntum-view-preset-combo/> | [BryntumViewPresetComboComponent](#Scheduler/widget/ViewPresetCombo) | | <bryntum-widget/> | [BryntumWidgetComponent](#Core/widget/Widget) | | <bryntum-year-picker/> | [BryntumYearPickerComponent](#Core/widget/YearPicker) | ### Import BryntumSchedulerModule Add the following code to your `app.module.ts`: ```typescript import { BryntumSchedulerModule } from '@bryntum/scheduler-angular' @NgModule({ imports : [ BryntumSchedulerModule ] }) ``` Then you will be able to use the custom tag like `` 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: ```html ``` You will also need to import CSS file for Bryntum Scheduler. We recommend to do it in `src/styles.scss`: ```typescript @import "@bryntum/scheduler/scheduler.material.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`: ```typescript export class AppComponent { // Toolbar (tbar) config tbarConfig = { items : [ { type : 'button', text : 'My button' } ] } } ``` Sample code for `app.component.html`: ```html ``` ## 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`: ```typescript export class AppComponent implements AfterViewInit { onSchedulerEventClick(e : {[key:string] : any}) : void { console.log('onEventClick', e); } // etc. ``` Sample code for `app.component.html`: ```html ... ``` Sample code for `app.component.ts`: ```typescript 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](#Scheduler/guides/integration/ionic/troubleshooting.md). ## References * Config options, features, events and methods [Bryntum Scheduler API docs](#api) * Visit [Ionic Framework Homepage](https://ionicframework.com) * Visit [Angular Framework Homepage](https://angular.io) * Post your questions to [Bryntum Support Forum](https://forum.bryntum.com/) * [Contact us](https://bryntum.com/contact/)

Last modified on 2023-10-26 8:37:06