Custom Date Header

import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
  formatDate,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscModule,
  MbscResource,
  setOptions ,
} from '@mobiscroll/angular';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  view: MbscEventcalendarView = {
    scheduler: {
      type: 'week',
      allDay: false,
      startDay: 1,
      endDay: 5,
      startTime: '05:00',
      endTime: '22:00',
    },
  };

  milestones = [
    {
      date: '2026-10-29T00:00',
      name: 'Project review',
      color: '#f5da7b',
    },
    {
      date: '2026-10-30T00:00',
      name: 'Product shipping',
      color: '#acf3a3',
    },
    {
      date: '2026-11-01T00:00',
      name: 'Cycle finish',
      color: '#ff84a0',
    },
  ];

  myEvents: MbscCalendarEvent[] = [
    {
      start: '2026-10-28T10:00',
      end: '2026-10-28T15:00',
      title: 'Impact Training',
      resource: [2, 3],
      color: '#35bb5a',
    },
    {
      start: '2026-10-29T10:00',
      end: '2026-10-29T15:00',
      title: 'Impact Training',
      resource: [2, 3],
      color: '#35bb5a',
    },
    {
      start: '2026-10-31T08:30',
      end: '2026-10-31T10:00',
      title: 'Quick mtg. with Martin',
      resource: 3,
      color: '#913aa7',
    },
    {
      start: '2026-10-31T12:00',
      end: '2026-10-31T13:00',
      title: 'General orientation',
      resource: [1, 2, 3],
      color: '#a71111',
    },
    {
      start: '2026-11-01T10:00',
      end: '2026-11-01T11:00',
      title: 'Product team mtg.',
      resource: [2, 3],
      color: '#6e7f29',
    },
    {
      start: '2026-11-02T14:00',
      end: '2026-11-02T16:00',
      title: 'Stakeholder mtg.',
      resource: 1,
      color: '#dcd234',
    },
    {
      start: '2026-11-03T10:00',
      end: '2026-11-03T14:00',
      title: 'Innovation mtg.',
      resource: [1, 2],
      color: '#de3d83',
    },
  ];

  myResources: MbscResource[] = [
    {
      id: 1,
      name: 'Ryan',
      color: '#f7c4b4',
      img: 'https://img.mobiscroll.com/demos/m1.png',
    },
    {
      id: 2,
      name: 'Kate',
      color: '#c6f1c9',
      img: 'https://img.mobiscroll.com/demos/f1.png',
    },
    {
      id: 3,
      name: 'John',
      color: '#e8d0ef',
      img: 'https://img.mobiscroll.com/demos/m2.png',
    },
  ];

  formatDate = formatDate;

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/resource-events/', 'callback').subscribe((resp) => {
      this.myEvents = resp;
    });
  }

  getTask(date: any): any {
    return this.milestones.find((obj) => +new Date(obj.date) === +date) || {};
  }
}

<mbsc-eventcalendar
  [view]="view"
  [data]="myEvents"
  groupBy="date"
  [resources]="myResources"
  [resourceTemplate]="resourceTemp"
  [schedulerDayTemplate]="dayTemp"
>
  <ng-template #resourceTemp let-resource>
    <div class="header-resource-template-content">
      <img class="header-resource-avatar" [attr.alt]="resource.name" [src]="resource.img" />
      <div class="header-resource-name">{{resource.name}}</div>
    </div>
  </ng-template>

  <ng-template #dayTemp let-day>
    <div class="header-template-container">
      <div class="header-template-date">
        <div class="header-template-day-name">{{formatDate('DDDD', day.date)}}</div>
        <div class="header-template-day">{{formatDate('MMMM DD', day.date)}}</div>
      </div>
      <div class="header-template-task" [ngStyle]="{background:getTask(day.date).color}">{{getTask(day.date).name}}</div>
    </div>
  </ng-template>
</mbsc-eventcalendar>

.md-date-header-template .mbsc-schedule-header-day-cont {
  display: block;
}

.header-template-container {
  padding: 10px;
}

.header-template-date {
  text-align: left;
  line-height: 20px;
}

.header-template-day-name {
  font-weight: bold;
}

.header-template-day {
  font-size: 12px;
}

.header-template-task {
  position: absolute;
  top: 14px;
  right: 10px;
  font-size: 12px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: 12px;
  color: #555;
}

.header-resource-template-content {
  position: relative;
}

.header-resource-avatar {
  max-height: 40px;
  max-width: 40px;
}

.header-resource-name {
  font-size: 14px;
}