diff --git a/admin/src/app/features/calendar/components/calendar-view/calendar-view.html b/admin/src/app/features/calendar/components/calendar-view/calendar-view.html
index 1e25d8a..01f29c5 100644
--- a/admin/src/app/features/calendar/components/calendar-view/calendar-view.html
+++ b/admin/src/app/features/calendar/components/calendar-view/calendar-view.html
@@ -21,22 +21,14 @@
     ></app-single-event-dashboard>
   </rs-daisy-modal>
 }
-<!--@if (workflow() == 'event-delete' && selectedEvent()) {
-  <rs-daisy-modal [isOpen]="true" (closeClick)="closeDialog()" []="'max-w-none w-2xl'">
-    delete event
-  </rs-daisy-modal>
-}-->
-@if (workflow() == 'event-cancel' && selectedEvent()) {
-  <rs-daisy-modal [isOpen]="true" (closeClick)="closeDialog()" [modalBoxStyleClass]="'max-w-none w-2xl'">
-    cancel
-  </rs-daisy-modal>
-}
 
 @for (dialogDefinition  of  dialogs; track dialogDefinition) {
 
   @if (dialogDefinition.isRendered()) {
     <rs-daisy-modal [isOpen]="true" (closeClick)="closeDialog()" [modalBoxStyleClass]="'max-w-none w-2xl'">
-      <ng-container *ngComponentOutlet="dialogDefinition.component; inputs: dialogDefinition.componentInputs ? dialogDefinition.componentInputs() : {}"></ng-container>
+      <ng-container
+        *ngComponentOutlet="dialogDefinition.component;  inputs: dialogDefinition.componentInputs ? dialogDefinition.componentInputs() : {}; injector: dialogDefinition.componentOutputs()"
+      ></ng-container>
     </rs-daisy-modal>
   }
 }
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 909c216..7e59c3d 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
@@ -1,4 +1,15 @@
-import { AfterViewInit, Component, effect, ElementRef, inject, OnInit, signal, Type, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  Injector,
+  OnInit,
+  signal,
+  Type,
+  ViewChild,
+} from '@angular/core';
 import { FullCalendarComponent, FullCalendarModule } from '@fullcalendar/angular';
 import { CalendarOptions, EventInput } from '@fullcalendar/core';
 
@@ -12,14 +23,14 @@ import { CalendarService } from '../../services/calendar.service';
 import { CalendarEventDto, EventsInRangeDTO } from '../../models/events-in-range-dto.model';
 import { map } from 'rxjs';
 import { SingleEventDashboard } from './single-event-dashboard/single-event-dashboard';
-import { JsonPipe, NgComponentOutlet } from '@angular/common';
+import { CommonModule, JsonPipe, NgComponentOutlet } from '@angular/common';
 import {
   SingleEventDashboardEventDelete
 } from './single-event-dashboard-event-delete/single-event-dashboard-event-delete';
 
 @Component({
   selector: 'app-calendar-view',
-  imports: [FullCalendarModule, Modal,NgComponentOutlet, CreateEventForm, SingleEventDashboard, JsonPipe],
+  imports: [FullCalendarModule,  CommonModule, Modal,NgComponentOutlet, CreateEventForm, SingleEventDashboard, JsonPipe],
   templateUrl: './calendar-view.html',
   styleUrl: './calendar-view.css',
 })
@@ -66,6 +77,15 @@ export class CalendarView implements OnInit, AfterViewInit {
 
     };
 
+
+ const  injector = Injector.create({
+      providers: [
+        {
+          provide: 'closeDialog',
+          useValue: () => this.closeDialog()
+        }
+      ]
+    });
     this.dialogs = [
       {
         component: SingleEventDashboardEventDelete,
@@ -75,9 +95,11 @@ export class CalendarView implements OnInit, AfterViewInit {
         modalBoxStyleClass: 'max-w-none w-2xl',
         componentInputs: () => {
           return {
-
+            'event': this.selectedEvent(),
+            'onAction': this.handleAction
           }
-        }
+        },
+        componentOutputs: () => injector
 
       }
     ]
@@ -169,6 +191,16 @@ export class CalendarView implements OnInit, AfterViewInit {
     }
   }
 
+
+  // This function is passed into the child
+  handleAction = (msg: string) => {
+    console.log('Parent received:', msg);
+    if ( msg == 'close'){
+      this.closeDialog();
+    }
+
+  };
+
 }
 
 export interface DialogConfig{
@@ -177,4 +209,5 @@ export interface DialogConfig{
   closeClick: () => void,
   modalBoxStyleClass: string
   isRendered: () => boolean;
+  componentOutputs: () => Injector
 }
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-dashboar-event-details-view/single-event-dashboar-event-details-view.css
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..609f7ee
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.html
@@ -0,0 +1 @@
+<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
new file mode 100644
index 0000000..d35b6e0
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.spec.ts
@@ -0,0 +1,23 @@
+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
new file mode 100644
index 0000000..b1ec0c9
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboar-event-details-view/single-event-dashboar-event-details-view.ts
@@ -0,0 +1,11 @@
+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.css b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.css
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..a9d9c58
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.html
@@ -0,0 +1 @@
+<p>single-event-dashboard-event-cancel works!</p>
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.spec.ts b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.spec.ts
new file mode 100644
index 0000000..4c35e21
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SingleEventDashboardEventCancel } from './single-event-dashboard-event-cancel';
+
+describe('SingleEventDashboardEventCancel', () => {
+  let component: SingleEventDashboardEventCancel;
+  let fixture: ComponentFixture<SingleEventDashboardEventCancel>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SingleEventDashboardEventCancel]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SingleEventDashboardEventCancel);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000..a4e6594
--- /dev/null
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-cancel/single-event-dashboard-event-cancel.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-single-event-dashboard-event-cancel',
+  imports: [],
+  templateUrl: './single-event-dashboard-event-cancel.html',
+  styleUrl: './single-event-dashboard-event-cancel.css',
+})
+export class SingleEventDashboardEventCancel {
+
+}
diff --git a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-delete/single-event-dashboard-event-delete.html b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-delete/single-event-dashboard-event-delete.html
index 3565edf..b863224 100644
--- a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-delete/single-event-dashboard-event-delete.html
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-delete/single-event-dashboard-event-delete.html
@@ -1,5 +1,18 @@
+<h2 class="text-2xl">Törlés</h2>
+<p>Esemény és az egész széria törlése</p>
 @if (config) {
   <app-detail-view
     [config]="config"
   ></app-detail-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-delete/single-event-dashboard-event-delete.ts b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-delete/single-event-dashboard-event-delete.ts
index 1ee0a50..f7296f1 100644
--- a/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-delete/single-event-dashboard-event-delete.ts
+++ b/admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-event-delete/single-event-dashboard-event-delete.ts
@@ -1,12 +1,17 @@
-import { Component, effect, input } from '@angular/core';
+import { Component, effect, input, output } from '@angular/core';
 import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
 import { DetailView, DetailViewConfig } from '../../../../../components/detail-view/detail-view';
+import { SvgIcons } from '../../../../../svg-icons';
+import { SafeHtmlPipe } from '../../../../../pipes/safe-html-pipe';
+import { Button } from '@rschneider/ng-daisyui';
 
 @Component({
   selector: 'app-single-event-dashboard-event-delete',
   imports: [
 
     DetailView,
+    SafeHtmlPipe,
+    Button,
   ],
   templateUrl: './single-event-dashboard-event-delete.html',
   styleUrl: './single-event-dashboard-event-delete.css',
@@ -14,7 +19,8 @@ import { DetailView, DetailViewConfig } from '../../../../../components/detail-v
 export class SingleEventDashboardEventDelete {
 
   event = input<CalendarEventDto>();
-
+  // Define an input that expects a function
+  onAction = input.required<(msg: string) => void>();
   config: DetailViewConfig<CalendarEventDto> | undefined;
 
   constructor() {
@@ -47,4 +53,12 @@ export class SingleEventDashboardEventDelete {
     });
   }
 
+
+  triggerAction() {
+    // Call the function passed from the parent
+    this.onAction()('close');
+  }
+
+
+  protected readonly SvgIcons = SvgIcons;
 }