add fullcalendar example

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

@@ -0,0 +1,8 @@
+<div>
+  <h1>Naptár</h1>
+  <div>
+    <input type="text" name="startHour" id="starthour" #startHour>
+    <a class="btn" (click)="addEvent($event)">add</a>
+  </div>
+  <full-calendar #calendar [options]="calendarOptions"></full-calendar>
+</div>

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

@@ -0,0 +1,85 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { FullCalendarComponent, FullCalendarModule } from '@fullcalendar/angular';
+import { CalendarOptions } from '@fullcalendar/core';
+
+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';
+
+@Component({
+  selector: 'app-calendar-view',
+  imports: [FullCalendarModule],
+  templateUrl: './calendar-view.html',
+  styleUrl: './calendar-view.css',
+})
+export class CalendarView {
+
+  @ViewChild('startHour') startHour!: ElementRef;
+  @ViewChild('calendar') calendarComponent: FullCalendarComponent | undefined;
+
+  calendarOptions: CalendarOptions;
+
+  constructor() {
+    const start = new Date();
+    start.setHours(10,0,0)
+    const end = new Date();
+    end.setHours(11,0,0)
+
+    this.calendarOptions = {
+      plugins: [dayGridPlugin, timeGridPlugin, listPlugin,interactionPlugin],
+      initialView: 'dayGridMonth',
+      weekends: true,
+      headerToolbar: {
+        left: 'prev,next,today',
+        center: 'title',
+        // right: 'dayGridMonth,dayGridWeek,dayGridDay' // user can switch between the two
+        right: 'dayGridMonth,dayGridWeek,dayGridDay,timeGridWeek,timeGridDay,listWeek',
+
+      },
+      events: [
+
+
+        { title: 'Meeting1 until'+end.toString(), start, end },
+      ],
+
+      eventClick: function(info) {
+        console.info('Event info: ' , info);
+
+        // change the border color just for fun
+        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,
+        });
+      }
+
+    };
+  }
+
+  protected addEvent($event: PointerEvent) {
+    let hourStr = this.startHour.nativeElement.value;
+    const hour = parseInt(hourStr,10);
+    const date = new Date()
+    const start = new Date(date.getTime())
+    start.setHours(hour,0,0)
+    const end = new Date(date.getTime())
+    // end.setHours(3,0,0)
+
+    this.calendarComponent?.getApi().addEvent({
+      title: 'Event at '+hour,
+      start
+    })
+  }
+}