@schedule-x/react 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -2,40 +2,42 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.4.0](https://github.com/schedule-x/react/compare/v1.3.2...v1.4.0) (2024-01-13)
+# [1.5.0](https://github.com/schedule-x/react/compare/v1.4.0...v1.5.0) (2024-01-15)
 
 
 ### Features
 
-* update schedule-x monorepo packages to v1.6.0 ([#29](https://github.com/schedule-x/react/issues/29)) ([02fb337](https://github.com/schedule-x/react/commit/02fb3378b9957abcd50f0f5e066bc2744620c53f))
+* add useNextCalendarApp hook ([#32](https://github.com/schedule-x/react/issues/32)) ([2d3c561](https://github.com/schedule-x/react/commit/2d3c561c479eeea38011588842484e140416644c))
 
-## [1.3.2](https://github.com/schedule-x/react/compare/v1.3.1...v1.3.2) (2024-01-11)
+# [1.4.0](https://github.com/schedule-x/react/compare/v1.3.2...v1.4.0) (2024-01-13)
+
+### Features
 
+- update schedule-x monorepo packages to v1.6.0 ([#29](https://github.com/schedule-x/react/issues/29)) ([02fb337](https://github.com/schedule-x/react/commit/02fb3378b9957abcd50f0f5e066bc2744620c53f))
+
+## [1.3.2](https://github.com/schedule-x/react/compare/v1.3.1...v1.3.2) (2024-01-11)
 
 ### Bug Fixes
 
-* **deps:** update schedule-x monorepo packages to v1.5.1 ([#27](https://github.com/schedule-x/react/issues/27)) ([437ec00](https://github.com/schedule-x/react/commit/437ec004959beb80cf482b60a5824bdc53258f69))
+- **deps:** update schedule-x monorepo packages to v1.5.1 ([#27](https://github.com/schedule-x/react/issues/27)) ([437ec00](https://github.com/schedule-x/react/commit/437ec004959beb80cf482b60a5824bdc53258f69))
 
 ## [1.3.1](https://github.com/schedule-x/react/compare/v1.3.0...v1.3.1) (2024-01-08)
 
-
 ### Bug Fixes
 
-* **deps:** update schedule-x monorepo packages to v1.4.1 ([#25](https://github.com/schedule-x/react/issues/25)) ([f123728](https://github.com/schedule-x/react/commit/f1237289df77e0cbe2e632a9f9580275cca136f7))
+- **deps:** update schedule-x monorepo packages to v1.4.1 ([#25](https://github.com/schedule-x/react/issues/25)) ([f123728](https://github.com/schedule-x/react/commit/f1237289df77e0cbe2e632a9f9580275cca136f7))
 
 # [1.3.0](https://github.com/schedule-x/react/compare/v1.2.1...v1.3.0) (2024-01-05)
 
-
 ### Features
 
-* **deps:** update schedule-x monorepo packages to v1.4.0 ([#18](https://github.com/schedule-x/react/issues/18)) ([6ac8ac4](https://github.com/schedule-x/react/commit/6ac8ac4db022e7e792a512e5db0f2f06d8373871))
+- **deps:** update schedule-x monorepo packages to v1.4.0 ([#18](https://github.com/schedule-x/react/issues/18)) ([6ac8ac4](https://github.com/schedule-x/react/commit/6ac8ac4db022e7e792a512e5db0f2f06d8373871))
 
 ## [1.2.1](https://github.com/schedule-x/react/compare/v1.2.0...v1.2.1) (2024-01-04)
 
-
 ### Bug Fixes
 
-* usage in nextjs ([#22](https://github.com/schedule-x/react/issues/22)) ([70f81df](https://github.com/schedule-x/react/commit/70f81dff94c7c3334cf69ed5935aa4b0fdf6966d))
+- usage in nextjs ([#22](https://github.com/schedule-x/react/issues/22)) ([70f81df](https://github.com/schedule-x/react/commit/70f81dff94c7c3334cf69ed5935aa4b0fdf6966d))
 
 # [1.2.0](https://github.com/schedule-x/react/compare/v1.1.1...v1.2.0) (2024-01-04)
 

package/development/next-app/app/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import styles from './page.module.css'
 // import { Calendar, useCalendarApp } from '../../../..'
-import { useCalendarApp, ScheduleXCalendar } from '../../..'
+import { useNextCalendarApp, ScheduleXCalendar } from '../../..'
 import {
   viewDay,
   viewMonthAgenda,
@@ -12,7 +12,7 @@ import '@schedule-x/theme-default/dist/index.css'
 import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'
 
 export default function Home() {
-  const calendarApp = useCalendarApp({
+  const calendarApp = useNextCalendarApp({
     views: [viewWeek, viewMonthGrid, viewDay, viewMonthAgenda],
     defaultView: viewWeek.name,
     events: [
@@ -25,6 +25,21 @@ export default function Home() {
     ],
     selectedDate: '2023-12-15',
     plugins: [createDragAndDropPlugin()],
+    calendars: {
+      school: {
+        colorName: 'school',
+        lightColors: {
+          main: '#1c7df9',
+          container: '#d2e7ff',
+          onContainer: '#002859',
+        },
+        darkColors: {
+          main: '#c0dfff',
+          onContainer: '#dee6ff',
+          container: '#426aa2',
+        },
+      },
+    },
   })
 
   return (

package/dist/index.cjs.js

@@ -29,6 +29,8 @@ function ScheduleXCalendar({ calendarApp, customComponents }) {
         setRandomId('sx' + Math.random().toString(36).substring(2, 11));
     }, []);
     react.useEffect(() => {
+        if (!calendarApp)
+            return; // in SSR, calendarApp will be undefined
         for (const [componentName, Component] of Object.entries(customComponents || {})) {
             calendarApp._setCustomComponentFn(componentName, createCustomComponentFn(setComponent, Component));
         }
@@ -46,7 +48,17 @@ function useCalendarApp(config) {
     const [calendarApp] = react.useState(calendar.createCalendar(config));
     return calendarApp;
 }
+function useNextCalendarApp(config) {
+    const [calendarApp, setCalendarApp] = react.useState();
+    react.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setCalendarApp(calendar.createCalendar(config));
+        }
+    }, []);
+    return calendarApp;
+}
 
 exports.Calendar = ScheduleXCalendar;
 exports.ScheduleXCalendar = ScheduleXCalendar;
 exports.useCalendarApp = useCalendarApp;
+exports.useNextCalendarApp = useNextCalendarApp;

package/dist/index.js

@@ -27,6 +27,8 @@ function ScheduleXCalendar({ calendarApp, customComponents }) {
         setRandomId('sx' + Math.random().toString(36).substring(2, 11));
     }, []);
     useEffect(() => {
+        if (!calendarApp)
+            return; // in SSR, calendarApp will be undefined
         for (const [componentName, Component] of Object.entries(customComponents || {})) {
             calendarApp._setCustomComponentFn(componentName, createCustomComponentFn(setComponent, Component));
         }
@@ -44,5 +46,14 @@ function useCalendarApp(config) {
     const [calendarApp] = useState(createCalendar(config));
     return calendarApp;
 }
+function useNextCalendarApp(config) {
+    const [calendarApp, setCalendarApp] = useState();
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setCalendarApp(createCalendar(config));
+        }
+    }, []);
+    return calendarApp;
+}
 
-export { ScheduleXCalendar as Calendar, ScheduleXCalendar, useCalendarApp };
+export { ScheduleXCalendar as Calendar, ScheduleXCalendar, useCalendarApp, useNextCalendarApp };

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { ScheduleXCalendar as Calendar } from './schedule-x-calendar.tsx';
 export { ScheduleXCalendar } from './schedule-x-calendar.tsx';
-export { useCalendarApp } from './use-calendar-app.tsx';
+export { useCalendarApp, useNextCalendarApp } from './use-calendar-app.tsx';

package/dist/types/schedule-x-calendar.d.ts

@@ -2,7 +2,7 @@ import { CalendarApp } from '@schedule-x/calendar';
 import React from 'react';
 type ReactComponent = React.ComponentType<any>;
 type props = {
-    calendarApp: CalendarApp;
+    calendarApp: CalendarApp | undefined;
     customComponents?: {
         timeGridEvent?: ReactComponent;
         dateGridEvent?: ReactComponent;

package/dist/types/use-calendar-app.d.ts

@@ -1,2 +1,3 @@
-import { CalendarConfig } from '@schedule-x/calendar';
-export declare function useCalendarApp(config: CalendarConfig): import("@schedule-x/calendar").CalendarApp;
+import { CalendarApp, CalendarConfig } from '@schedule-x/calendar';
+export declare function useCalendarApp(config: CalendarConfig): CalendarApp;
+export declare function useNextCalendarApp(config: CalendarConfig): CalendarApp | undefined;

package/package.json

@@ -14,7 +14,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/index.tsx

@@ -2,4 +2,4 @@
 export { ScheduleXCalendar as Calendar } from './schedule-x-calendar.tsx'
 
 export { ScheduleXCalendar } from './schedule-x-calendar.tsx'
-export { useCalendarApp } from './use-calendar-app.tsx'
+export { useCalendarApp, useNextCalendarApp } from './use-calendar-app.tsx'

package/src/schedule-x-calendar.tsx

@@ -10,7 +10,7 @@ import {
 type ReactComponent = React.ComponentType<any>
 
 type props = {
-  calendarApp: CalendarApp
+  calendarApp: CalendarApp | undefined // undefined allowed to prevent errors in SSR
   customComponents?: {
     timeGridEvent?: ReactComponent
     dateGridEvent?: ReactComponent
@@ -57,6 +57,8 @@ export function ScheduleXCalendar({ calendarApp, customComponents }: props) {
   }, [])
 
   useEffect(() => {
+    if (!calendarApp) return // in SSR, calendarApp will be undefined
+
     for (const [componentName, Component] of Object.entries(
       customComponents || {}
     )) {

package/src/use-calendar-app.tsx

@@ -1,7 +1,23 @@
-import { CalendarConfig, createCalendar } from '@schedule-x/calendar'
-import { useState } from 'react'
+import {
+  CalendarApp,
+  CalendarConfig,
+  createCalendar,
+} from '@schedule-x/calendar'
+import { useEffect, useState } from 'react'
 
 export function useCalendarApp(config: CalendarConfig) {
   const [calendarApp] = useState(createCalendar(config))
   return calendarApp
 }
+
+export function useNextCalendarApp(config: CalendarConfig) {
+  const [calendarApp, setCalendarApp] = useState<CalendarApp>()
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setCalendarApp(createCalendar(config))
+    }
+  }, [])
+
+  return calendarApp
+}