add calendarview event creation

admin/src/app/features/calendar/components/calendar-view/calendar-view.html

@@ -6,3 +6,8 @@
   </div>
   <full-calendar #calendar [options]="calendarOptions"></full-calendar>
 </div>
+
+<rs-daisy-modal [isOpen]="isOpen()" (closeClick)="closeDialog()"  >
+ <app-create-event-form (ready)="closeDialog()"></app-create-event-form>
+</rs-daisy-modal>
+

admin/src/app/features/calendar/components/calendar-view/calendar-view.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, effect, ElementRef, inject, OnInit, signal, ViewChild } from '@angular/core';
 import { FullCalendarComponent, FullCalendarModule } from '@fullcalendar/angular';
 import { CalendarOptions } from '@fullcalendar/core';
 
@@ -6,19 +6,30 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 import interactionPlugin from '@fullcalendar/interaction';
-import { appConfig } from '../../../../app.config';
+import { Modal } from '@rschneider/ng-daisyui';
+import { CreateEventForm } from '../create-event-form/create-event-form';
+import { CalendarService } from '../../services/calendar.service';
+import { addDays, subDays } from 'date-fns';
+import { EventsInRangeDTO } from '../../models/events-in-range-dto.model';
 
 @Component({
   selector: 'app-calendar-view',
-  imports: [FullCalendarModule],
+  imports: [FullCalendarModule, Modal, CreateEventForm],
   templateUrl: './calendar-view.html',
   styleUrl: './calendar-view.css',
 })
-export class CalendarView {
+export class CalendarView implements OnInit, AfterViewInit {
 
   @ViewChild('startHour') startHour!: ElementRef;
   @ViewChild('calendar') calendarComponent: FullCalendarComponent | undefined;
 
+  calendarService = inject(CalendarService);
+
+  workflow = signal<string>("")
+  isOpen = signal<boolean>(false);
+
+  events = signal<EventsInRangeDTO[]>([])
+
   calendarOptions: CalendarOptions;
 
   constructor() {
@@ -27,6 +38,7 @@ export class CalendarView {
     const end = new Date();
     end.setHours(11,0,0)
 
+
     this.calendarOptions = {
       plugins: [dayGridPlugin, timeGridPlugin, listPlugin,interactionPlugin],
       initialView: 'dayGridMonth',
@@ -41,7 +53,6 @@ export class CalendarView {
       events: [
 
 
-        { title: 'Meeting1 until'+end.toString(), start, end },
       ],
 
       eventClick: function(info) {
@@ -51,21 +62,54 @@ export class CalendarView {
         info.el.style.borderColor = 'red';
       },
 
-      dateClick: function(info) {
-        console.info('Date click on: ' , info);
-        const calendarApi = info.view.calendar;
-        const start = new Date(info.date.getTime())
-        start.setHours(2,0,0)
-        const end = new Date(info.date.getTime())
-        end.setHours(3,0,0)
-        calendarApi.addEvent({
-          title: 'New Event',
-          start,
-          end,
-        });
+      dateClick: (info) => {
+        console.info("setting day workflow");
+        this.workflow.set("day");
+        this.isOpen.set(true);
+        // console.info('Date click on: ' , info);
+        // const calendarApi = info.view.calendar;
+        // const start = new Date(info.date.getTime())
+        // start.setHours(2,0,0)
+        // const end = new Date(info.date.getTime())
+        // end.setHours(3,0,0)
+        // calendarApi.addEvent({
+        //   title: 'New Event',
+        //   start,
+        //   end,
+        // });
       }
 
     };
+
+    effect(() => {
+      // this.calendarOptions.events = this.events
+
+    });
+  }
+
+
+
+  ngAfterViewInit(): void {
+
+    // this.calendarComponent?.getApi().
+
+  }
+
+  ngOnInit(): void {
+    const start =   subDays(new Date(),14)
+    const end =   addDays(new Date(),14);
+    this.calendarService.getEventsInRange({
+      startTime: start,
+      endTime: end
+    }).subscribe(
+      {
+        'next': (events) => {
+          console.info('events',events)
+        }
+
+      }
+    )
+
   }
 
   protected addEvent($event: PointerEvent) {
@@ -82,4 +126,8 @@ export class CalendarView {
       start
     })
   }
+
+  closeDialog() {
+    this.isOpen.set(false)
+  }
 }