fix(schedule-x#119): fixed local dev by moving ssr init

Author: BitsAndDroids

projects/development/src/app/app.component.ts

@@ -1,57 +1,63 @@
-import {Component, Inject, PLATFORM_ID} from '@angular/core';
+import { Component, Inject, PLATFORM_ID } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import {CalendarComponent} from "../../../schedule-x/angular/src/lib/calendar.component";
-import {createCalendar, viewWeek, viewMonthGrid, viewMonthAgenda} from "@schedule-x/calendar";
+import { CalendarComponent } from '../../../schedule-x/angular/src/lib/calendar.component';
+import {
+  createCalendar,
+  viewWeek,
+  viewMonthGrid,
+  viewMonthAgenda,
+  CalendarApp,
+} from '@schedule-x/calendar';
 import { isPlatformBrowser } from '@angular/common';
-import '@schedule-x/theme-default/dist/calendar.css'
-import {createEventModalPlugin} from "@schedule-x/event-modal";
-import {createDragAndDropPlugin} from "@schedule-x/drag-and-drop";
+import '@schedule-x/theme-default/dist/calendar.css';
+import { createEventModalPlugin } from '@schedule-x/event-modal';
+import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop';
 
 @Component({
-    selector: 'app-root',
-    imports: [RouterOutlet, CalendarComponent],
-    templateUrl: './app.component.html',
-    styleUrl: './app.component.css'
+  selector: 'app-root',
+  imports: [RouterOutlet, CalendarComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'development';
-  calendarApp = createCalendar({
-    events: [
-      {
-        id: '1',
-        title: 'Event 1',
-        start: '2024-06-11 08:00',
-        end: '2024-06-11 09:00',
-      },
-      {
-        id: '2',
-        title: 'Event 2',
-        start: '2024-06-11 10:00',
-        end: '2024-06-11 11:00',
-      },
-      {
-        id: '3',
-        title: 'Event 3',
-        start: '2024-06-11',
-        end: '2024-06-11',
-      },
-      {
-        id: '4',
-        title: 'Event 4',
-        start: '2024-06-11',
-        end: '2024-06-13',
-      }
-    ],
-    views: [viewWeek, viewMonthGrid, viewMonthAgenda],
-    plugins: [
-      createEventModalPlugin(),
-      createDragAndDropPlugin()
-    ]
-  })
+  calendarApp: CalendarApp;
+  constructor(@Inject(PLATFORM_ID) private platformId: string) {}
 
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: string,
-  ){}
+  ngOnInit() {
+    if (isPlatformBrowser(this.platformId)) {
+      this.calendarApp = createCalendar({
+        events: [
+          {
+            id: '1',
+            title: 'Event 1',
+            start: '2024-06-11 08:00',
+            end: '2024-06-11 09:00',
+          },
+          {
+            id: '2',
+            title: 'Event 2',
+            start: '2024-06-11 10:00',
+            end: '2024-06-11 11:00',
+          },
+          {
+            id: '3',
+            title: 'Event 3',
+            start: '2024-06-11',
+            end: '2024-06-11',
+          },
+          {
+            id: '4',
+            title: 'Event 4',
+            start: '2024-06-11',
+            end: '2024-06-13',
+          },
+        ],
+        views: [viewWeek, viewMonthGrid, viewMonthAgenda],
+        plugins: [createEventModalPlugin(), createDragAndDropPlugin()],
+      });
+    }
+  }
 
   get isBrowserOnly(): boolean {
     return isPlatformBrowser(this.platformId);
@@ -76,6 +82,6 @@ export class AppComponent {
         start: '2024-06-11 10:00',
         end: '2024-06-11 11:00',
       },
-    ])
+    ]);
   }
 }