Can't display footer on quickInfo

[Cyril Pers]

Hello,

I'm new at using syncfusion component and i'm stuck to set my schedule component properly.

I succeed to display custom title and custom content but the footer doesn't work.
Can you explain what i did wrong, please ?
Also can you explain how to custom the background-color of the event cell in the schedule please.

Thanks.

[Viswajith Nagarajan]

Hi Cyril Personne,

Greetings from Syncfusion Support,

Query 1: Footer doesn't work on quick Info template

We have checked and validated your reported query for footer button not showing. To resolve this, you can override the default Scheduler CSS styles. Please refer to the CSS styles shared below, along with a sample for your reference.

[index.css]

               

       .e-quick-popup-wrapper .e-event-popup .e-popup-footer {

            display: block !important;

       }

 

Sample Link:  8cq16bvx (duplicated) - StackBlitz

Output Screenshot:

Query 2: How to custom the background-color of the event cell in the schedule

We suggest using the dataBound event of the Scheduler to customize the background color of event cells. Please refer to the sample below.
 

Sample Link: Uruvrgyd (duplicated) - StackBlitz

DataBound API: https://ej2.syncfusion.com/angular/documentation/api/schedule/#databound

Output Screenshot:

If you want to customize the entire work cells of the Scheduler, we suggest using the renderCell event to modify the background color. Please refer to the sample below.
 

Sample link:  Bs3tbykn (duplicated) - StackBlitz

RenderCell Event API: https://ej2.syncfusion.com/angular/documentation/schedule/cell-customization#using-rendercell-event

Don't hesitate to get in touch if you require further help or more information.

Regards,

Viswajith Nagarajan

[Cyril Pers]

Hello, thank you for your help.
I use onEventRendered and it works well.

I saw we can use workHours and WorkDay to display working day/hours but working day and time is different for each day in my case.

Is there a way to display background white based on multiple start and end objects ? Can you show demo for basic use if have only one entity and second way if having multiple employees ?

{startDateTime: "2025-10-06T12:00:00", endDateTime:   "2025-10-06T16:00:00" }

{startDateTime: "2025-10-07T08:00:00", endDateTime:   "2025-10-06T12:00:00" }

{startDateTime: "2025-10-06T12:00:00", endDateTime:   "2025-10-06T16:00:00" , employeeId: 1}

{startDateTime: "2025-10-06T08:00:00", endDateTime:   "2025-10-06T12:00:00", employeeId: 2 }

Thank you very much

[Swathi Ravi]

Hi Cyril Personne,

Based on the shared details, we understand that you want to set the different work hours for the different resources. You can achieve this by using the setWorkHours method along with actionComplete and dataBound event as shown in the below shared snippets.

app.component.html:

<div class="control-section">

  <div class="col-lg-12 content-wrapper">

    <ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource' height='650px' [currentView]="currentView"

  [selectedDate]="selectedDate" [group]="group" [eventSettings]="eventSettings" (actionComplete)="onActionComplete($event)" (dataBound)="onDataBound()">

      <e-resources>

        <e-resource field='RoomId' title='Room Type' [dataSource]='resourceDataSource' [allowMultiple]='allowMultiple'

          name='MeetingRoom' textField='text' idField='id' colorField='color'></e-resource>

      </e-resources>

      <e-views>

        <e-view option="Day"></e-view>

        <e-view option="Week"></e-view>

      </e-views>

    </ejs-schedule>

  </div>

</div>

app.component.ts:

export class AppComponent {

  @ViewChild('scheduleObj') public scheduleObj: ScheduleComponent;

  public selectedDate: Date = new Date(2025, 0, 2);

  public currentView: View = 'Day';

  public group: GroupModel = {

    resources: ['MeetingRoom']

  };

  public resourceDataSource: Record<string, any>[] = [

    { text: 'Jammy', id: 1, color: '#fec200', capacity: 20, type: 'Conference' },

    { text: 'Tweety', id: 2, color: '#7fa900', capacity: 7, type: 'Cabin' },

  ];

  public JammyWorkHours = [

    { startHour: "07:00", endHour: "16:00" }, // for Sunday 

    { startHour: "06:00", endHour: "17:00" }, // for Monday 

    { startHour: "05:00", endHour: "18:00" }, // for Tuesday 

    { startHour: "06:30", endHour: "19:00" }, // for Wednesday 

    { startHour: "08:30", endHour: "20:00" }, // for Thursday 

    { startHour: "10:00", endHour: "21:00" }, // for Friday 

    { startHour: "13:00", endHour: "22:00" } // for Saturday

  ];

  public TweetyWorkHours = [

    { startHour: "08:00", endHour: "17:00" }, // for Sunday 

    { startHour: "09:00", endHour: "18:00" }, // for Monday 

    { startHour: "10:00", endHour: "19:00" }, // for Tuesday 

    { startHour: "11:00", endHour: "20:00" }, // for Wednesday 

    { startHour: "10:00", endHour: "13:00" }, // for Thursday 

    { startHour: "13:00", endHour: "22:00" }, // for Friday 

    { startHour: "14:00", endHour: "23:00" } // for Saturday 

  ];

  public islayoutChanged = false;

  public allowMultiple = true;

  public data = [];

  public eventSettings: EventSettingsModel = {

    dataSource: this.data,

  };

  onDataBound() {

    if (this.islayoutChanged) {

      var renderedDates = this.scheduleObj.activeView.getRenderDates();

      this.scheduleObj.resetWorkHours();

      for (var i = 0; i < renderedDates.length; i++) {

        var dayIndex = renderedDates[i].getDay();

        if (dayIndex !== 0 && dayIndex !== 6) {

          this.scheduleObj.setWorkHours([renderedDates[i]], this.JammyWorkHours[dayIndex].startHour, this.JammyWorkHours[dayIndex].endHour, 0);

          this.scheduleObj.setWorkHours([renderedDates[i]], this.TweetyWorkHours[dayIndex].startHour, this.TweetyWorkHours[dayIndex].endHour, 1);

        }

      }

    }

  }

  onActionComplete(args) {

    if (args.requestType === "toolBarItemRendered" || args.requestType === "dateNavigate" || args.requestType === "viewNavigate") {

      this.islayoutChanged = true;

    }

  }

Sample - https://stackblitz.com/edit/angular-fgmx5wey-a9uny8ws?file=src%2Fapp.component.ts

If we’ve misunderstood your requirement, kindly share a detailed explanation through a video or image demonstration to help us understand better.

Regards,

Swathi Ravi