Scheduler doesnt show Events after Update to Angular 9
The Scheduler Component doesn't Show my Events after I was updating my Angular to Version 9. There's no Error/Warning in the Console and I cant find the Problem on any existing Thread. I was waiting for the Latest Release (of the Scheduler Component), but this Update didn't solve my Problem.
Please Help Me.
installed Packages:
"@angular/animations": "9.0.5",
"@angular/cdk": "9.2.0",
"@angular/common": "9.0.5",
"@angular/compiler": "9.0.5",
"@angular/core": "9.0.5",
"@angular/flex-layout": "9.0.0-beta.29",
"@angular/forms": "9.0.5",
"@angular/material": "9.2.0",
"@angular/material-moment-adapter": "9.2.0",
"@angular/platform-browser": "9.0.5",
"@angular/platform-browser-dynamic": "9.0.5",
"@angular/router": "9.0.5",
"@syncfusion/ej2-angular-base": "18.1.42",
"@syncfusion/ej2-angular-schedule": "18.1.42",
"@syncfusion/ej2-angular-navigations": "18.1.42",
"@syncfusion/ej2-ng-base": "16.2.55",
"@syncfusion/ej2-angular-calendars": "18.1.42",
The View in the Browser:
Component.html:
<ejs-schedule #scheduleObj height='100%' locale='de-CH' [firstDayOfWeek]="1"
[(selectedDate)]="currentDate" (selectedDateChange)="onSelectedDateChange($event)"
[(currentView)]="currentView" (currentViewChange)="onCurrentViewChange($event)"
[eventSettings]='eventSettings' [rowAutoHeight]="rowAutoHeight" [showWeekNumber]="true"
[timeScale]="timeScale" [group]="group" [showHeaderBar]="true" [showQuickInfo]="false"
(popupOpen)="onPopupOpen($event)" (popupClose)="onPopupClose($event)"
(actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)"
(eventRendered)="onEventRendered($event)" (renderCell)="onRenderCell($event)" fxFlex>
<e-header-rows>
<e-header-row option='Week'>
<ng-template #template let-data>
<span [innerHTML]="getWeekDetails(data)"></span>
</ng-template>
</e-header-row>
<e-header-row option='Date'>
<ng-template #dateHeaderTemplate let-data>
<span [innerHTML]="getDateHeaderText(data)"></span>
</ng-template>
</e-header-row>
</e-header-rows>
<e-views>
<e-view option="TimelineWorkWeek">
<ng-template #eventTemplate let-data>
<div class="event-container" *ngIf="data.type === 'project'" fusePerfectScrollbar>
<div *ngIf="data.project" class="subject event-text-wrap" [style.background]="data.SecondaryColor"
[style.border-color]="data.PrimaryColor">{{ data.project.nr }} - {{ data.project.customer }}</div>
<div *ngIf="!data.project" class="subject event-text-wrap" [style.background]="data.SecondaryColor"
[style.border-color]="data.PrimaryColor">{{ data.remarks }}</div>
<div class="states">
<div>
<mat-icon *ngIf="data.published" matTooltip="Sichtbar für Mitarbeiter">visibility</mat-icon>
</div>
<div class="task-tags">
<div class="tag" *ngFor="let task of data.tasks" matTooltip="{{task.text}}">
<mat-icon *ngIf="task.completed">check_box</mat-icon>
<mat-icon *ngIf="!task.completed">check_box_outline_blank</mat-icon>
</div>
</div>
</div>
</div>
<div class="event-container" *ngIf="data.type === 'absence'" fusePerfectScrollbar>
<div class="subject event-text-wrap">{{ data.name }}{{ data.duration > 0 ? ' (' + (data.duration | timedisplay) + ')' : '' }}</div>
<div [ngSwitch]="data.isApproved">
<mat-icon *ngSwitchCase="false" matTooltip="In Genehmigung">hourglass_empty</mat-icon>
<mat-icon *ngSwitchCase="true" matTooltip="Genehmigt">thumb_up</mat-icon>
</div>
</div>
</ng-template>
</e-view>
<!-- <e-view option="TimelineMonth">
</e-view> -->
</e-views>
<e-resources>
<e-resource name='Employees' field='resourceIds' title='Mitarbeiter' [dataSource]="resourceDataSource"
[allowMultiple]="true" textField='name' idField='id' colorField='color'>
</e-resource>
</e-resources>
</ejs-schedule>
<ejs-contextmenu #menuObj target='.e-schedule'
[items]='contextMenu.menuItems'
(beforeOpen)="contextMenu.onBeforeOpen($event)"
(select)="contextMenu.onItemSelect($event)">
</ejs-contextmenu>
Component.ts:
@ViewChild('scheduleObj', { static: false }) scheduleObj: ScheduleComponent;
@ViewChild('menuObj', { static: false }) menuObj: ContextMenuComponent;
@ViewChild('drawer', { static: false }) drawer: any;
public holidayDataSource: Holiday[];
currentProgram: number;
currentDate: Date = new Date();
currentView: View = "TimelineWorkWeek";
allowMove = false;
public eventSettings: EventSettingsModel = { dataSource: [] };
public resourceDataSource: Resource[] = [];
public rowAutoHeight = true;
public timeScale: TimeScaleModel = {
enable: false
};
public group: GroupModel = {
allowGroupEdit: true, // Shared Events
enableCompactView: true,
resources: ['Employees']
};
public contextMenu: ScheduleContextMenu;
private unsubscribeAll$: Subject<any>;
private viewMapping = {
'week': 'TimelineWorkWeek',
'month': 'TimelineMonth'
};
private eventColorMapping = {
'provisional': '#a15252',
'agreed': 'accent'
};
constructor(
private route: ActivatedRoute,
private router: Router,
dialog: MatDialog,
private dialogService: DialogService,
private planningService: PlanningService,
private programService: ProgramService,
private assignmentService: AssignmentService,
@Inject(WINDOW) private window: Window
) {
this.unsubscribeAll$ = new Subject();
this.contextMenu = new ScheduleContextMenu(dialog, dialogService, assignmentService);
}
ngOnInit() {
this.route.data.pipe(takeUntil(this.unsubscribeAll$))
.subscribe(res => {
this.currentProgram = res.data.program;
this.currentDate = res.data.date;
this.currentView = this.viewMapping[res.data.view] as any;
});
this.programService.resourcesChanges.pipe(takeUntil(this.unsubscribeAll$))
.subscribe((res: Resource[]) => this.handleResources(res));
this.programService.holidayChanges.pipe(takeUntil(this.unsubscribeAll$))
.subscribe((res: Holiday[]) => this.holidayDataSource = res);
this.programService.assignmentsChanges.pipe(takeUntil(this.unsubscribeAll$))
.subscribe(res => this.handleAssignments(res));
this.assignmentService.assignmentChanges.pipe(takeUntil(this.unsubscribeAll$))
.subscribe((res) => this.onAssignmentModified(res[0], res[1]));
}
SIGN IN To post a reply.
8 Replies
SIGN IN To post a reply.
