Multi-Classroom Timetable

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) {}

  formatDate = formatDate;

  myEvents: MbscCalendarEvent[] = [];

  myResources: MbscResource[] = [
    {
      id: 1,
      name: 'Green Hall',
    },
    {
      id: 2,
      name: 'White Hall',
    },
    {
      id: 3,
      name: 'Red Hall',
    },
    {
      id: 4,
      name: 'Blue Hall',
    },
    {
      id: 5,
      name: 'Yellow Hall',
    },
  ];

  view: MbscEventcalendarView = {
    timeline: {
      type: 'month',
      startDay: 1,
      endDay: 5,
      resolutionHorizontal: 'hour',
      resolutionVertical: 'day',
    },
  };

  myDefaultEvent() {
    return {
      title: 'New class',
      prof: 'Stacia Jaden',
      class: 'Junior',
      color: '#ff0000',
    };
  }

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

<mbsc-eventcalendar
  [view]="view"
  [data]="myEvents"
  [resources]="myResources"
  [timelineDayTemplate]="customDayTemplate"
  [timelineEventContentTemplate]="customEventTemplate"
  [extendDefaultEvent]="myDefaultEvent"
>
  <ng-template #customDayTemplate let-day>
    <div class="md-timetable-day">
      <div class="md-timetable-day-name">{{formatDate('DDDD', day.date)}}</div>
      <div>{{formatDate('MM/DD/YYY', day.date)}}</div>
    </div>
  </ng-template>
  <ng-template #customEventTemplate let-event>
    <div class="md-timetable-event-title">{{event.title}}</div>
    <div class="md-timetable-event-prop">Prof. {{event.original.prof}}</div>
    <div class="md-timetable-event-class">{{event.original.class}} year</div>
  </ng-template>
</mbsc-eventcalendar>

.md-timetable .mbsc-timeline-row-date-col {
  width: 90px;
}

.md-timetable .mbsc-timeline-row-gutter {
  height: 8px;
}

.md-timetable .mbsc-timeline-column,
.md-timetable .mbsc-timeline-header-column {
  width: 130px;
}

.md-timetable .mbsc-schedule-event-range {
  display: none;
}

.md-timetable-day {
  font-size: 14px;
  padding: 7px;
}

.md-timetable-day-name {
  font-weight: 600;
  padding-bottom: 5px;
}

.md-timetable-event-title {
  font-size: 12px;
  line-height: 18px;
}

.md-timetable-event-prop {
  padding-bottom: 5px;
  opacity: 0.6;
}

.md-timetable-event-class {
  opacity: 0.6;
  font-style: italic;
}