没有 SyncFusion angular 调度程序的样式

Question

预计：https://i.stack.imgur.com/UBElC.png

实际：https://i.stack.imgur.com/UbIcA.png

为什么会出现这种情况？我能想到的最多的是有一种样式覆盖了 SyncFusion 样式，或者我的 Angular 版本不兼容？

编码：

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>

安排模块

@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 ^^

Answer 1

您好，您还需要在 styles.scss 文件中添加样式。

@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';

并添加 ScheduleAllModule 而不是 ScheduleModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { ScheduleAllModule } from '@syncfusion/ej2-angular-schedule';
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ScheduleAllModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

Angular(9) 版本与 Syncfusion 调度程序兼容，您可能错过了在 style.css 文件中添加调度程序 CSS 引用，这可能会导致报告的问题。请参考以下范例link.

样本：https://www.syncfusion.com/downloads/support/directtrac/319181/ze/Angular-9-scheduler-sample-1092727233

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

更多内容请参考下方UGlink。 UG：https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/#adding-css-reference

此致，

普拉文库马尔。

没有 SyncFusion angular 调度程序的样式

No styling of SyncFusion angular scheduler

syncfusion

angular