Schedule and calendar how to add css and config in ionic 4

Thread ID:	Created:	Updated:	Platform:	Replies:
143368	Mar 17,2019 07:20 AM UTC	Mar 20,2019 09:06 AM UTC	Ionic	1

Subscribe to this post

Tags: ejSchedule

Mohammd reza

Asked On March 17, 2019 07:20 AM UTC

How to add configuration and packages mapping to ionic 4?

System.config({
    paths: {
        'npm:': './node_modules/',
        'syncfusion:': 'npm:@syncfusion/'
    },
    map: {
        app: 'app',

        //Syncfusion packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});

Reply | Reply with quote

Karthigeyan Krishnamurthi [Syncfusion]

Replied On March 20, 2019 09:06 AM UTC

Hi Mohammd,

Thank you for contacting Syncfusion support.

We have created a sample for your reference, in the below sample, we have render simple schedule component.

Please refer the below code example.

[package.Json]

"dependencies": {

"@angular/common": "~7.0.0",

. . . . .

"@ionic/angular": "4.0.0-rc.0",

"@syncfusion/ej2": "^16.4.42",

"@syncfusion/ej2-angular-schedule": "^16.4.42",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.26"

}

[src/app/tab1.module.ts]

import { IonicModule } from '@ionic/angular';

. . . . .

import { ScheduleAllModule } from '@syncfusion/ej2-angular-schedule;

import { Tab1Page } from './tab1.page';

@NgModule({

imports: [

IonicModule,

CommonModule,

ScheduleAllModule,

FormsModule,

RouterModule.forChild([{ path: '', component: Tab1Page }])

declarations: [Tab1Page]

})

export class Tab1PageModule {}

[global.scss]

@import '~@ionic/angular/css/padding.css';

. . . .

@import "../node_modules/@syncfusion/ej2/material.css";

[src/app/tab1.page.html]

<ejs-schedule width='100%' height='650px' [selectedDate]='selectedDate' [eventSettings]='eventSettings'>

</ejs-schedule>

[src/app/tab1.page.ts]

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-tab1',

templateUrl: 'tab1.page.html',

styleUrls: ['tab1.page.scss']

})

export class Tab1Page implements OnInit {

public data: Object[];

public selectedDate;

public eventSettings;

ngOnInit() {

this.selectedDate = new Date(2018, 3, 1);

this.data = [{

Id: 1,

Subject: 'Explosion of Betelgeuse Star',

StartTime: new Date(2018, 3, 2, 9, 30),

EndTime: new Date(2018, 3, 2, 11, 0),

AirlineId: 1

}];

this.eventSettings = {dataSource : this.data };

}

Sample : http://www.syncfusion.com/downloads/support/forum/143368/ze/ScheduleSample1479285645

You can run the above sample by using the below commands.

npm install (install the dependent packages)
ionic serve -l(run the application)

Reference forum: https://www.syncfusion.com/forums/141584/how-to-add-the-components-in-angular7-projects

Regards,

Karthi

Reply | Reply with quote

Schedule and calendar how to add css and config in ionic 4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US