Hi Everyone,
I'm try to implement one out of the box thing in scheduler appointment/event.
Requirement:
My scenarios are:
Hi Omkar,
You can add the custom icon to any date on the event, by using the eventTemplate. And in the appointment fields, you need to add a custom field that contains the dates collections of where you want to add the custom icon, as shown in the below-shared snippet.
Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/schedule/events-template
[app.component.html]
<e-views> <e-view option="TimelineMonth"> <ng-template #eventTemplate let-data> <div style="width: 70px;" *ngFor="let item of getDates(data.EndTime, data.StartTime)"> <div style="width: 70px;" class="custom-icon" *ngIf="isFlagDate(data.FlagDates, item); else emptyDiv"> ⚑</div> </div> </ng-template> <ng-template #emptyDiv> <div style="width: 70px;"></div> </ng-template> </e-view> </e-views> |
[app.component.ts]
isFlagDate(dates: any, item: Date): boolean { return dates.some(date => date.getTime() === item.getTime()) }
getDates(endTime: Date, startTime: Date): Date[] { const dates: Date[] = []; let currentDate = new Date(startTime.getTime()); while (currentDate <= endTime) { dates.push(new Date(currentDate.getTime())); currentDate.setDate(currentDate.getDate() + 1); } return dates; } |
[data.ts]
export let resourceData: Record<string, any>[] = [ { Id: 1, Subject: 'Workflow Analysis', StartTime: new Date(2023, 1, 2), EndTime: new Date(2023, 1, 8), IsAllDay: false, ProjectId: 1, TaskId: 2, FlagDates: [new Date(2023, 1, 2), new Date(2023, 1, 4), new Date(2023, 1, 6)] } ]; |
Output:
Regards,
Swathi Ravi
Hi Swathi Ravi,
This is perfect. Thanks.
I've one more question. Can we open popup on flag click? Is there any configuration needed?
Omkar,
You can open the Schedule QuickInfo popup by using the angular pipes in the eventTemplate, as shown in the below snippet.
[app.component.html]
<ng-template #eventTemplate let-data> <div style="width: 70px;" *ngFor="let item of (data | date)"> <div id="flagDiv" style="width: 70px;" class="custom-icon" *ngIf="isFlagDate(data.FlagDates, item); else emptyDiv"> ⚑</div> </div> </ng-template> |
[Date.pipe.ts]
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'date' }) export class DatePipe implements PipeTransform { transform(data: Record<string, any>): Date[] { const dates: Date[] = []; let currentDate = new Date(data.StartTime.getTime()); while (currentDate <= data.EndTime) { dates.push(new Date(currentDate.getTime())); currentDate.setDate(currentDate.getDate() + 1); } return dates; } } |