Expected: https://i.sstatic.net/UBElC.png
Actual: https://i.sstatic.net/UbIcA.png
Why is the reason this happen ? the most I can think of there's something there is a styling that overrides SyncFusion styling or my Angular version is not compatible ?
Coding:
schedule.HTML
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
Edit Schedule
</div>
<div class="card-body">
<ejs-schedule> </ejs-schedule>
</div>
</div>
</div>
</div>
schedule Module
@NgModule({
declarations: [SentuhTherapistScheduleComponent],
imports: [
RouterModule.forChild(routes),
CommonModule,
ModalModule.forRoot(),
ReactiveFormsModule,
ScheduleModule,
RecurrenceEditorModule
],
providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService]
})
package.json
{
"name": "@coreui/coreui-free-angular-admin-template",
"version": "2.9.5",
"description": "CoreUI Free Angular 2+ Admin Template",
"author": {
"name": "Łukasz Holeczek",
"url": "http://holeczek.pl",
"github": "https://github.com/mrholek",
"twitter": "https://twitter.com/lukaszholeczek"
},
"contributors": [
{
"name": "Andrzej Kopański",
"url": "https://github.com/xidedix"
}
],
"homepage": "https://coreui.io/angular",
"copyright": "Copyright 2020 creativeLabs Łukasz Holeczek",
"license": "MIT",
"scripts": {
"ng": "ng",
"postinstall": "ngcc --properties es2015 browser module main --first-only",
"start": "ng serve",
"ssl-start": "ng serve --ssl --ssl-key /Users/shafuan/Desktop/sentuh/local_cert/localhost.key --ssl-cert /Users/shafuan/Desktop/sentuh/local_cert/localhost.crt",
"build": "ng build --prod --aot --buildOptimizer --commonChunk --vendorChunk --optimization --progress",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"docker": "docker image build -t shafuan/sentuh_merchant_web:latest . && docker push shafuan/sentuh_merchant_web:latest",
"docker-rae": "docker image build -t raeventures/sentuh_merchant_web_dev:latest . && docker push raeventures/sentuh_merchant_web_dev:latest"
},
"private": true,
"dependencies": {
"@angular-devkit/build-webpack": "^0.1002.0",
"@angular-devkit/core": "^10.2.0",
"@angular-devkit/schematics": "^10.2.0",
"@angular/animations": "^9.1.12",
"@angular/cdk": "^9.2.4",
"@angular/common": "^9.1.12",
"@angular/compiler": "^9.1.12",
"@angular/core": "^9.1.12",
"@angular/fire": "^6.0.4",
"@angular/forms": "^9.1.12",
"@angular/localize": "^9.1.12",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "^9.1.12",
"@angular/platform-browser-dynamic": "^9.1.12",
"@angular/router": "^9.1.12",
"@angular/service-worker": "^9.1.12",
"@coreui/angular": "~2.9.4",
"@coreui/coreui": "^2.1.16",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/icons": "^0.3.0",
"@fullcalendar/angular": "^5.3.0",
"@fullcalendar/daygrid": "^5.3.0",
"@fullcalendar/interaction": "^5.3.0",
"@ng-bootstrap/ng-bootstrap": "^6.2.0",
"@syncfusion/ej2-angular-schedule": "^18.4.47",
"angular-crumbs": "^3.0.1",
"angular-datatables": "^9.0.2",
"bootstrap": "^4.5.0",
"chart.js": "^2.9.3",
"core-js": "^3.6.5",
"datatables.net": "^1.10.21",
"datatables.net-bs4": "^1.10.21",
"datatables.net-buttons": "^1.6.5",
"datatables.net-buttons-dt": "^1.6.5",
"datatables.net-dt": "^1.10.21",
"firebase": "^7.24.0",
"flag-icon-css": "^3.5.0",
"font-awesome": "^4.7.0",
"jquery": "^3.5.1",
"jszip": "^3.5.0",
"moment": "^2.27.0",
"mutationobserver-shim": "^0.3.7",
"ng-dynamic-breadcrumb": "^5.0.1",
"ng2-charts": "^2.3.2",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^5.6.1",
"ngx-device-detector": "^2.0.5",
"ngx-perfect-scrollbar": "^9.0.0",
"ngx-toggle-switch": "^2.0.5",
"rxjs": "^6.6.0",
"rxjs-compat": "^6.6.2",
"simple-line-icons": "^2.5.2",
"ts-helpers": "^1.1.2",
"tslib": "^1.13.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.901.12",
"@angular/cli": "^9.1.12",
"@angular/compiler-cli": "^9.1.12",
"@angular/language-service": "^9.1.12",
"@types/datatables.net": "^1.10.19",
"@types/datatables.net-buttons": "^1.4.3",
"@types/jasmine": "^3.5.12",
"@types/jasminewd2": "^2.0.8",
"@types/jquery": "^3.5.1",
"@types/node": "^13.13.14",
"codelyzer": "^5.2.2",
"jasmine-core": "^3.6.0",
"jasmine-spec-reporter": "^5.0.2",
"karma": "^5.1.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^3.3.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "^7.0.0",
"ts-node": "^8.10.2",
"tslint": "^6.1.3",
"typescript": "~3.7.5"
},
"engines": {
"node": ">= 10.13",
"npm": ">= 6"
}
}
Angular version 9.1.12
thank you for your help and kindness ^^
Angular(9) version is compatible with Syncfusion scheduler and you might missed to add scheduler CSS reference in style.css file which might cause the reported problem. Please refer to the following sample link.
Styles.css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';
For more information, please refer below UG link. UG: https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/#adding-css-reference
Regards,
Praveenkumar.