Forgot to add files of new component *facepalm*

src/app/components/event-move-popup/event-move-popup.component.css

@@ -0,0 +1,21 @@
+/* Styling for buttons */
+button {
+	padding: 8px 12px;
+	background-color: #007bff;
+	color: white !important;
+	border: none;
+	cursor: pointer;
+	margin-right: 5px;
+}
+
+button:hover {
+	background-color: #0056b3;
+}
+
+/* Styling for dropdowns */
+select {
+	padding: 6px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	background-color: white;
+}

src/app/components/event-move-popup/event-move-popup.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>Move {{data.event.name}}</h1>
+<div mat-dialog-content>
+	<p>Which calendar should this event be moved to?</p>
+	<select [(ngModel)]="selectedCalendar" (change)="handleCalendarChange()">
+		<option value="" disabled selected hidden>Select calendar</option>
+		<option value="public">Public</option>
+		<option value="members">Internal - Members</option>
+		<option value="choir">Internal - Choir</option>
+		<option value="management">Internal - Management</option>
+	</select>
+</div>
+<div mat-dialog-actions>
+	<button mat-button (click)="onNoClick()">Cancel</button>
+	<button mat-button [mat-dialog-close]="data.event" cdkFocusInitial>Move</button>
+</div>

src/app/components/event-move-popup/event-move-popup.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventMovePopupComponent } from './event-move-popup.component';
+
+describe('EventMovePopupComponent', () => {
+  let component: EventMovePopupComponent;
+  let fixture: ComponentFixture<EventMovePopupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EventMovePopupComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EventMovePopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/event-move-popup/event-move-popup.component.ts

@@ -0,0 +1,33 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {Event} from "../../models/event";
+import {log} from "@angular-devkit/build-angular/src/builders/ssr-dev-server";
+
+@Component({
+	selector: 'app-event-move-popup',
+	templateUrl: './event-move-popup.component.html',
+	styleUrls: ['./event-move-popup.component.css']
+})
+export class EventMovePopupComponent {
+	selectedCalendar = 'public';
+	calendars = ['', 'public', 'members', 'management', 'choir'];
+
+	constructor(
+		public dialogRef: MatDialogRef<EventMovePopupComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: DialogData
+	) {
+		this.selectedCalendar = this.calendars[data.event.calendarId];
+	}
+
+	onNoClick(): void {
+		this.dialogRef.close();
+	}
+
+	handleCalendarChange() {
+		this.data.event.calendarId = this.calendars.indexOf(this.selectedCalendar);
+	}
+}
+
+export interface DialogData {
+	event: Event;
+}