diff --git a/src/app/components/event-move-popup/event-move-popup.component.css b/src/app/components/event-move-popup/event-move-popup.component.css
new file mode 100644
index 0000000..d5b5cb1
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/components/event-move-popup/event-move-popup.component.html b/src/app/components/event-move-popup/event-move-popup.component.html
new file mode 100644
index 0000000..047203f
--- /dev/null
+++ b/src/app/components/event-move-popup/event-move-popup.component.html
@@ -0,0 +1,15 @@
+
Move {{data.event.name}}
+
+
Which calendar should this event be moved to?
+
+
+
+
+
+
diff --git a/src/app/components/event-move-popup/event-move-popup.component.spec.ts b/src/app/components/event-move-popup/event-move-popup.component.spec.ts
new file mode 100644
index 0000000..402c4a0
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ EventMovePopupComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(EventMovePopupComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/event-move-popup/event-move-popup.component.ts b/src/app/components/event-move-popup/event-move-popup.component.ts
new file mode 100644
index 0000000..1816989
--- /dev/null
+++ b/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,
+ @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;
+}