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

[Mohammd reza]

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' }
    }
});

[Karthigeyan Krishnamurthi]

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