---
title: "Angular Timeline Multi-Classroom Timetable Example | Mobiscroll"
component: "Timeline"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/timeline/multi-classroom-timetable"
---

# Multi-Classroom Timetable - Angular Timeline demo

Build a weekly classroom timetable with the Angular Timeline — rooms and days listed vertically with hourly slots from 8 AM to 8 PM, Monday to Friday.

- [Live demo](https://demo.mobiscroll.com/angular/timeline/multi-classroom-timetable)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/multi-classroom-timetable)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/multi-classroom-timetable.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/multi-classroom-timetable.md), [React](https://demo.mobiscroll.com/react/timeline/multi-classroom-timetable.md), [Vue](https://demo.mobiscroll.com/vue/timeline/multi-classroom-timetable.md)

## Description

While the timeline can easily render multiple days horizontally with hourly resolutions, in some situations it makes sense to multiply the vertical scrolling height and set a [`resolutionVertical`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) to day even if working with multiple resources.

To render a timetable for multiple classrooms for a whole week the horizontal timeline can be reduced from 8AM to 8PM and days along with the classrooms can be listed vertically Monday to Friday.

Use the `resolutionVertical` and `startTime`/`endTime` properties in combination with the `startDay`/`endDay` properties of the timeline to set such a view up.

## What this demo shows

- A desktop weekly classroom timetable layout with Monday to Friday workdays, repeated room resources on the vertical axis, and working hours on the horizontal axis.
- **Header navigation** The month and year label in the top-left opens date navigation, while the previous and next arrows and the Today button move between weeks or return to the current day.
- **Time grid** The fixed strip below the header shows working hours from 8 AM to 8 PM in hourly columns.
- **Vertical week view** The strip on the left shows the selected work week from Monday to Friday.
- **Resources** Room resources are repeated in each day, with Green Hall, White Hall, Red Hall, Blue Hall, and Yellow Hall shown for every weekday.
- **Current time** The current time is shown with a vertical blue line and a time label.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events are rendered as colored cards with a colored left stripe, the course name in bold, the professor name in bold light gray text, and the student year level.
- **Event positioning** Events are placed by resource, date, start time, and end time.
- **Event overlapping** Overlapping events are stacked within the resource row so they remain visible, with the row height increasing as needed.
- **Event creation** New events can be created by double-clicking in the timeline or by clicking and dragging across a time range.
- **Event interaction** Events highlight on hover and show drag and resize handles for moving or changing the event duration.
- **Event selection** Clicking an event selects and highlights it.
- **Vertical scrolling** The resource area scrolls vertically so the timeline can display many repeated room rows.

## Best for

- **School timetables** Weekly class schedules where courses need to be organized by day, time, and classroom.
- **University course scheduling** Multi-room academic schedules with parallel classes, professors, and student year levels.
- **Conference room planning** Room-based schedules where each location needs its own row for every workday.
- **Classroom management** Timetables that need to show room usage across a Monday to Friday week.
- **Facility scheduling** Resource planning scenarios where events are grouped by both date and location.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`timelineDayTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-timelineDayTemplate) - template
- [`timelineEventContentTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-timelineEventContentTemplate) - template
- [`extendDefaultEvent`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-extendDefaultEvent) - option

## Code

### Component

```ts
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({
  theme: 'ios',
  themeVariant: 'light'
});

@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;
    });
  }
}
```

### Template

```html
<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>
```

### CSS

```css
.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;
}
```

## Implementation notes

- Use `type: 'week'` with `startDay: 1` and `endDay: 5` to limit the view to Monday through Friday.
- Set `startTime: '08:00'` and `endTime: '20:00'` to restrict the horizontal time axis to the relevant school hours.
- Set `resolutionHorizontal: 'hour'` so each column on the time axis represents one hour.
- Set `resolutionVertical: 'day'` to make the vertical axis repeat all resources under each day of the week, creating a timetable layout where rows represent classroom-per-day combinations rather than resources alone.
- Define resources as a flat list of classrooms. Each classroom row appears once under every day in the vertical axis.
- Use `renderTimelineDay` (Angular: `timelineDayTemplate`, Vue: `#timelineDay` slot) to render a custom day label with the full day name and the formatted date.
- Use `renderTimelineEventContent` (Angular: `timelineEventContentTemplate`, Vue: `#timelineEventContent` slot) to render a custom event body showing the class title, professor name, and student year level from custom event properties.
- Use `extendDefaultEvent` to pre-populate newly created events with a default title, professor, year level, and color.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Dynamic Resource Availability](https://demo.mobiscroll.com/angular/timeline/dynamically-color-and-invalidate.md) - Color-code resource rows and restrict drop zones by task type on a Angular Timeline — compatible resources turn green, incompatible ones gray during drag.
- Next: [Monthly Timetable View](https://demo.mobiscroll.com/angular/timeline/monthly-timetable-vertical-days-horizontal-times.md) - Display a monthly timetable in the Angular Timeline — days listed vertically, hours across, with drag-to-create in a single-resource layout.