@schedule-x/react 0.5.0 → 0.6.0

package/cypress/e2e/002-custom-events.cy.ts

@@ -1,11 +1,33 @@
+import { createCalendarHeaderPageObject } from '@schedule-x/e2e-testing'
+
+const calendarHeader = createCalendarHeaderPageObject()
+
 describe('Custom events', () => {
   beforeEach(() => {
     cy.visit('/cypress/pages/002-custom-events/002-custom-events.html')
   })
 
-  it('should render custom events', () => {
+  it('should render custom events in week view', () => {
     cy.contains('Event 1')
     cy.contains('ID: 1')
     cy.contains('Event 2|ID2')
   })
+
+  it('should render custom events in month view', () => {
+    calendarHeader.openViewByLabel('Month')
+    cy.contains('Event 1|ID1').should('exist')
+    cy.contains('Event 2|ID2').should('exist')
+  })
+})
+
+describe('Custom events test on mobile', () => {
+  beforeEach(() => {
+    cy.visit('/cypress/pages/002-custom-events/002-custom-events.html')
+    cy.viewport('iphone-6')
+  })
+
+  it('should render custom events in month agenda view', () => {
+    calendarHeader.openViewByLabel('Month')
+    cy.contains('Event 1|ID1').should('exist')
+  })
 })

package/cypress/pages/002-custom-events/002-custom-events.tsx

@@ -5,7 +5,7 @@ import '@fontsource/open-sans/700.css'
 import '@fontsource/open-sans/700-italic.css'
 import ReactDOM from 'react-dom/client'
 import React from 'react'
-import { Calendar, useCalendarApp } from '../../..'
+import { ScheduleXCalendar, useCalendarApp } from '../../..'
 import {
   viewDay,
   viewMonthAgenda,
@@ -16,6 +16,8 @@ import '../index.css'
 import '@schedule-x/theme-default/dist/index.css'
 import CustomTimeGridEvent from './components/CustomTimeGridEvent.tsx'
 import CustomDateGridEvent from './components/CustomDateGridEvent.tsx'
+import CustomMonthAgendaEvent from './components/CustomMonthAgendaEvent.tsx'
+import CustomMonthGridEvent from './components/CustomMonthGridEvent.tsx'
 
 // eslint-disable-next-line react-refresh/only-export-components
 function App() {
@@ -42,11 +44,13 @@ function App() {
   return (
     <>
       <div className="schedule-x-calendar">
-        <Calendar
+        <ScheduleXCalendar
           calendarApp={calendarApp}
           customComponents={{
             timeGridEvent: CustomTimeGridEvent,
             dateGridEvent: CustomDateGridEvent,
+            monthAgendaEvent: CustomMonthAgendaEvent,
+            monthGridEvent: CustomMonthGridEvent,
           }}
         />
       </div>

package/cypress/pages/002-custom-events/components/CustomMonthAgendaEvent.tsx

@@ -0,0 +1,26 @@
+type props = {
+  calendarEvent: {
+    id: string | number
+    title: string
+    start: string
+    end: string
+  }
+}
+
+export default function CustomMonthAgendaEvent({ calendarEvent }: props) {
+  return (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        background: 'green',
+        color: 'white',
+        padding: '2px',
+        borderRadius: 5,
+        border: '1px solid white',
+      }}
+    >
+      <span>{calendarEvent.title}</span>|<span>ID{calendarEvent.id}</span>
+    </div>
+  )
+}

package/cypress/pages/002-custom-events/components/CustomMonthGridEvent.tsx

@@ -0,0 +1,26 @@
+type props = {
+  calendarEvent: {
+    id: string | number
+    title: string
+    start: string
+    end: string
+  }
+}
+
+export default function CustomMonthGridEvent({ calendarEvent }: props) {
+  return (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        background: 'green',
+        color: 'white',
+        padding: '2px',
+        borderRadius: 5,
+        border: '1px solid white',
+      }}
+    >
+      <span>{calendarEvent.title}</span>|<span>ID{calendarEvent.id}</span>
+    </div>
+  )
+}

package/development/App.tsx

@@ -1,5 +1,5 @@
 import './App.css'
-import { Calendar, useCalendarApp } from '../src'
+import { ScheduleXCalendar, useCalendarApp } from '../src'
 import {
   viewDay,
   viewMonthAgenda,
@@ -48,11 +48,13 @@ function App() {
   return (
     <>
       <div>
-        <Calendar
+        <ScheduleXCalendar
           calendarApp={calendarApp}
           customComponents={{
             timeGridEvent: CustomTimeGridEvent,
             dateGridEvent: CustomDateGridEvent,
+            monthAgendaEvent: CustomDateGridEvent,
+            monthGridEvent: CustomDateGridEvent,
           }}
         />
       </div>

package/dist/index.cjs.js

@@ -11,7 +11,7 @@ const createCustomComponentFn = (setCustomComponent, customComponent) => (wrappe
         wrapperElement,
     });
 };
-function Calendar({ calendarApp, customComponents }) {
+function ScheduleXCalendar({ calendarApp, customComponents }) {
     const randomId = 'sx' + Math.random().toString(36).substring(2, 11);
     const [customComponentsMeta, setCustomComponentsMeta] = react.useState([]);
     const setComponent = (component) => {
@@ -41,5 +41,6 @@ function useCalendarApp(config) {
     return calendarApp;
 }
 
-exports.Calendar = Calendar;
+exports.Calendar = ScheduleXCalendar;
+exports.ScheduleXCalendar = ScheduleXCalendar;
 exports.useCalendarApp = useCalendarApp;

package/dist/index.js

@@ -9,7 +9,7 @@ const createCustomComponentFn = (setCustomComponent, customComponent) => (wrappe
         wrapperElement,
     });
 };
-function Calendar({ calendarApp, customComponents }) {
+function ScheduleXCalendar({ calendarApp, customComponents }) {
     const randomId = 'sx' + Math.random().toString(36).substring(2, 11);
     const [customComponentsMeta, setCustomComponentsMeta] = useState([]);
     const setComponent = (component) => {
@@ -39,4 +39,4 @@ function useCalendarApp(config) {
     return calendarApp;
 }
 
-export { Calendar, useCalendarApp };
+export { ScheduleXCalendar as Calendar, ScheduleXCalendar, useCalendarApp };

package/dist/types/index.d.ts

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

package/dist/types/{calendar.d.ts → schedule-x-calendar.d.ts}

@@ -6,7 +6,9 @@ type props = {
     customComponents?: {
         timeGridEvent?: ReactComponent;
         dateGridEvent?: ReactComponent;
+        monthGridEvent?: ReactComponent;
+        monthAgendaEvent?: ReactComponent;
     };
 };
-export declare function Calendar({ calendarApp, customComponents }: props): import("react/jsx-runtime").JSX.Element;
+export declare function ScheduleXCalendar({ calendarApp, customComponents }: props): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -14,7 +14,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -26,7 +26,7 @@
     "build:publish": "npm run build && npm publish"
   },
   "peerDependencies": {
-    "@schedule-x/calendar": "^0.5.0",
+    "@schedule-x/calendar": "^0.6.0",
     "react": "^16.7.0 || ^17 || ^18",
     "react-dom": "^16.7.0 || ^17 || ^18"
   },
@@ -35,12 +35,12 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@schedule-x/drag-and-drop": "^0.5.0",
-    "@schedule-x/e2e-testing": "^0.5.0",
-    "@schedule-x/eslint-config": "^0.5.0",
-    "@schedule-x/event-modal": "^0.5.0",
-    "@schedule-x/prettier-config": "^0.5.0",
-    "@schedule-x/theme-default": "^0.5.0",
+    "@schedule-x/drag-and-drop": "^0.6.0",
+    "@schedule-x/e2e-testing": "^0.6.0",
+    "@schedule-x/eslint-config": "^0.6.0",
+    "@schedule-x/event-modal": "^0.6.0",
+    "@schedule-x/prettier-config": "^0.6.0",
+    "@schedule-x/theme-default": "^0.6.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

package/src/index.tsx

@@ -1,2 +1,5 @@
-export { Calendar } from './calendar'
+// @deprecated. To be removed in v1.0.0
+export { ScheduleXCalendar as Calendar } from './schedule-x-calendar.tsx'
+
+export { ScheduleXCalendar } from './schedule-x-calendar.tsx'
 export { useCalendarApp } from './use-calendar-app.tsx'

package/src/{calendar.tsx → schedule-x-calendar.tsx}

@@ -14,6 +14,8 @@ type props = {
   customComponents?: {
     timeGridEvent?: ReactComponent
     dateGridEvent?: ReactComponent
+    monthGridEvent?: ReactComponent
+    monthAgendaEvent?: ReactComponent
   }
 }
 
@@ -29,7 +31,7 @@ const createCustomComponentFn =
     })
   }
 
-export function Calendar({ calendarApp, customComponents }: props) {
+export function ScheduleXCalendar({ calendarApp, customComponents }: props) {
   const randomId = 'sx' + Math.random().toString(36).substring(2, 11)
   const [customComponentsMeta, setCustomComponentsMeta] =
     useState<CustomComponentsMeta>([])