We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize appoinment/event on scheduler

Hi Everyone,

I'm try to implement one out of the box thing in scheduler appointment/event.

Requirement: 

  1. Show custom icons on  appointment/event.

My scenarios are:

  1. If I create multiday appointment, then I need to show icons on appointment-box based on dates between start-date and end-date of appointment.
         Ex. start date : 2nd Feb. 2023 and End Date : 7th Feb. 2023. I need to add custom icon on 2nd Feb 2023      and 6th Feb 2023. custom icon should be show on appointment for same date column on scheduler.

Kindly confirm that is this possible or not?
      
image_6_f0d7ddf6.png

3 Replies 1 reply marked as answer

SR Swathi Ravi Syncfusion Team March 21, 2023 06:21 AM UTC

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.


Sample: https://stackblitz.com/edit/ej2-angular-schedule-add-custom-icon-in-event?file=src%2Fapp.component.ts

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">

                &#9873;</div>

            </div>

          </ng-template>

          <ng-template #emptyDiv>

            <div style="width: 70px;"></div>

          </ng-template>

        </e-view>

      </e-views>


[app.component.ts]

isFlagDate(datesanyitemDate): boolean {

    return dates.some(date => date.getTime() === item.getTime())

  }

 

  getDates(endTimeDatestartTimeDate): Date[] {

    const datesDate[] = [];

    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 resourceDataRecord<stringany>[] = [

  {

    Id: 1,

    Subject: 'Workflow Analysis',

    StartTime: new Date(202312),

    EndTime: new Date(202318),

    IsAllDay: false,

    ProjectId: 1,

    TaskId: 2,

    FlagDates: [new Date(202312), new Date(202314), new Date(202316)]

  }

];


Output:


Regards,

Swathi Ravi


Marked as answer

OC Omkar Chavan replied to Swathi Ravi March 28, 2023 01:39 PM UTC

Hi Swathi Ravi,

This is perfect. Thanks.

I've one more question. Can we open popup on flag click? Is there any configuration needed?



SR Swathi Ravi Syncfusion Team March 29, 2023 03:25 PM UTC

Omkar,


You can open the Schedule QuickInfo popup by using the angular pipes in the eventTemplate, as shown in the below snippet.


Sample: https://stackblitz.com/edit/ej2-angular-schedule-event-with-flag-icon-using-p-2qkx5j?file=src%2Fapp.component.html


[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">

                &#9873;</div>

            </div>

          </ng-template>


[Date.pipe.ts]

import { PipePipeTransform } from '@angular/core';

 

@Pipe({

  name: 'date'

})

export class DatePipe implements PipeTransform {

  transform(dataRecord<stringany>): Date[] {

    const datesDate[] = [];

    let currentDate = new Date(data.StartTime.getTime());

    while (currentDate <= data.EndTime) {

      dates.push(new Date(currentDate.getTime()));

      currentDate.setDate(currentDate.getDate() + 1);

    }

    return dates;

  }

}


Loader.
Up arrow icon