diff --git a/admin/src/app/features/calendar/components/calendar-view/calendar-view.ts b/admin/src/app/features/calendar/components/calendar-view/calendar-view.ts
index 7e59c3d..22500ca 100644
--- a/admin/src/app/features/calendar/components/calendar-view/calendar-view.ts
+++ b/admin/src/app/features/calendar/components/calendar-view/calendar-view.ts
@@ -27,6 +27,9 @@ import { CommonModule, JsonPipe, NgComponentOutlet } from '@angular/common';
 import {
   SingleEventDashboardEventDelete
 } from './single-event-dashboard-event-delete/single-event-dashboard-event-delete';
+import {
+  SingleEventDashboardEventCancel
+} from './single-event-dashboard-event-cancel/single-event-dashboard-event-cancel';
 
 @Component({
   selector: 'app-calendar-view',
@@ -101,6 +104,22 @@ export class CalendarView implements OnInit, AfterViewInit {
         },
         componentOutputs: () => injector
 
+      },
+
+      {
+        component: SingleEventDashboardEventCancel,
+        isRendered: () => this.workflow() == 'event-cancel',
+        // isRendered: () => true,
+        closeClick: () => this.closeDialog(),
+        modalBoxStyleClass: 'max-w-none w-2xl',
+        componentInputs: () => {
+          return {
+            'event': this.selectedEvent(),
+            'onAction': this.handleAction
+          }
+        },
+        componentOutputs: () => injector
+
       }
     ]
   }
@@ -188,6 +207,10 @@ export class CalendarView implements OnInit, AfterViewInit {
         this.workflow.set('event-delete');
         break;
 
+      case 'event_cancel':
+        console.info("event cancel clicked");
+        this.workflow.set('event-cancel');
+        break;
     }
   }
 
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.html b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.html
deleted file mode 100644
index 609f7ee..0000000
--- a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>single-event-dashboar-event-details-view works!</p>
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.spec.ts b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.spec.ts
deleted file mode 100644
index d35b6e0..0000000
--- a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SingleEventDashboarEventDetailsView } from './single-event-dashboar-event-details-view';
-
-describe('SingleEventDashboarEventDetailsView', () => {
-  let component: SingleEventDashboarEventDetailsView;
-  let fixture: ComponentFixture<SingleEventDashboarEventDetailsView>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SingleEventDashboarEventDetailsView]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(SingleEventDashboarEventDetailsView);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.ts b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.ts
deleted file mode 100644
index b1ec0c9..0000000
--- a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-single-event-dashboar-event-details-view',
-  imports: [],
-  templateUrl: './single-event-dashboar-event-details-view.html',
-  styleUrl: './single-event-dashboar-event-details-view.css',
-})
-export class SingleEventDashboarEventDetailsView {
-
-}
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.html b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.html
index a9d9c58..fcc499e 100644
--- a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.html
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.html
@@ -1 +1,12 @@
-<p>single-event-dashboard-event-cancel works!</p>
+<h2 class="text-2xl">Esemény lemondása</h2>
+<app-single-event-dashboard-event-details-view [event]="event()"></app-single-event-dashboard-event-details-view>
+<div class="flex gap-2 mt-3">
+  <rs-daisy-button variant="error">
+    <span [outerHTML]="SvgIcons.heroTrash | safeHtml"></span>
+    Törlés
+  </rs-daisy-button>
+  <rs-daisy-button variant="primary" (click)="triggerAction()">
+    <span [outerHTML]="SvgIcons.heroXcircle | safeHtml"></span>
+    Mégsem
+  </rs-daisy-button>
+</div>
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.ts b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.ts
index a4e6594..e14c4fc 100644
--- a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.ts
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.ts
@@ -1,11 +1,31 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
+import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
+import {
+  SingleEventDashboardEventDetailsView
+} from '../single-event-dashboard-event-details-view/single-event-dashboard-event-details-view';
+import { Button } from '@rschneider/ng-daisyui';
+import { SvgIcons } from '../../../../../svg-icons';
+import { SafeHtmlPipe } from '../../../../../pipes/safe-html-pipe';
 
 @Component({
   selector: 'app-single-event-dashboard-event-cancel',
-  imports: [],
+  imports: [
+    SingleEventDashboardEventDetailsView,
+    Button,
+    SafeHtmlPipe,
+  ],
   templateUrl: './single-event-dashboard-event-cancel.html',
   styleUrl: './single-event-dashboard-event-cancel.css',
 })
 export class SingleEventDashboardEventCancel {
 
+  event = input<CalendarEventDto>();
+  onAction = input.required<(msg: string) => void>();
+
+  protected readonly SvgIcons = SvgIcons;
+
+  protected triggerAction() {
+
+     this.onAction()('close')
+  }
 }
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.css b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.css
similarity index 100%
rename from admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.css
rename to admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.css
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.html b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.html
new file mode 100644
index 0000000..3565edf
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.html
@@ -0,0 +1,5 @@
+@if (config) {
+  <app-detail-view
+    [config]="config"
+  ></app-detail-view>
+}
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.ts b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.ts
new file mode 100644
index 0000000..400d7bb
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-details-view/single-event-dashboard-event-details-view.ts
@@ -0,0 +1,51 @@
+import { Component, effect, input } from '@angular/core';
+import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
+import { DetailView, DetailViewConfig } from '../../../../../components/detail-view/detail-view';
+import { SafeHtmlPipe } from '../../../../../pipes/safe-html-pipe';
+
+@Component({
+  selector: 'app-single-event-dashboard-event-details-view',
+  imports: [
+    DetailView,
+    SafeHtmlPipe,
+  ],
+  templateUrl: './single-event-dashboard-event-details-view.html',
+  styleUrl: './single-event-dashboard-event-details-view.css',
+})
+export class SingleEventDashboardEventDetailsView {
+
+  event = input<CalendarEventDto>();
+  config: DetailViewConfig<CalendarEventDto> | undefined;
+
+  constructor() {
+        effect(() => {
+
+      this.config = {
+        data: this.event()!,
+
+        rows: [{
+          attribute: 'id',
+          getTitle: 'Esemény azonosító',
+        },
+          {
+            attribute: 'title',
+            getTitle: 'Esemény neve',
+          },
+          {
+            attribute: 'startTime',
+            getTitle: 'Kezdési időpont',
+            format: 'datetime',
+          },
+          {
+            attribute: 'eventType',
+            getTitle: 'Esemény típusa',
+            getValue: obj => obj.eventType.name,
+
+          },
+        ],
+      };
+    });
+
+  }
+
+}