Я использую расписание primeng, календарь выглядит нормально, но события не отображаются, как показано на рисунке ниже.
Проект довольно прост. просто используйте primeng с графиком. ничего сложного. Я приложил свой код. если кто-то сталкивался с этой проблемой раньше и имеет решение для нее. Ваша помощь будет очень ценится. Большое вам спасибо
angular.json
"styles": [
"src/styles.css"
],
"scripts": [
"node_modules/moment/min/moment.min.js",
"node_modules/fullcalendar/dist/fullcalendar.min.js",
"node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
],
style.css
@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-light/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~fullcalendar/dist/fullcalendar.css";
@import "~fullcalendar-scheduler/dist/scheduler.min.css";
package.json
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"fullcalendar": "^4.0.0-alpha",
"fullcalendar-scheduler": "^1.9.4",
"moment": "^2.22.2",
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.2",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "~6.1.4",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {ButtonModule} from 'primeng/button';
import {ScheduleModule} from 'primeng/schedule';
import { AppComponent } from './app.component';
// import 'fullcalendar';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ButtonModule,
ScheduleModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template: `<p-schedule [events]="events" [header]="headerConfig" ></p-schedule>`,
styles: ['']
})
export class AppComponent implements OnInit {
headerConfig: any;
title = 'primecalendar';
events: any[];
ngOnInit() {
this.headerConfig = {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
};
this.events = [
{
"title": "All Day Event",
"start": '2018-08-01'
},
{
"title": "Long Event",
"start": "2018-08-07",
"end": "2018-08-10"
},
{
"title": "Repeating Event",
"start": "2018-08-09T16:00:00"
},
{
"title": "Repeating Event",
"start": "2018-08-16T16:00:00"
},
{
"title": "Conference",
"start": "2018-08-11",
"end": "2018-08-13"
}
];
}
}