feat: enable custom content for month events

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

@@ -1,14 +1,41 @@
-describe('Custom events test', () => {
+import { createCalendarHeaderPageObject } from '@schedule-x/e2e-testing'
+
+const calendarHeader = createCalendarHeaderPageObject()
+
+describe('Custom events test on desktop', () => {
   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').should('exist')
     cy.contains('Event 2').should('exist')
     cy.contains('Event 3').should('exist')
     cy.contains('Event 4').should('exist')
     cy.contains('Title: Event 5').should('exist')
     cy.contains('Id: 5').should('exist')
   })
+
+  it('should render custom events in month view', () => {
+    calendarHeader.openViewByLabel('Month')
+    cy.contains('Event 1').should('exist')
+    cy.contains('Event 2').should('exist')
+    cy.contains('Event 3').should('exist')
+    cy.contains('Event 4').should('exist')
+    cy.contains('Event 5').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').should('exist')
+    cy.contains('Event 2').should('exist')
+    cy.contains('Event 5').should('exist')
+  })
 })

cypress/pages/002-custom-events/002-custom-events-App.vue

@@ -2,13 +2,19 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { ScheduleXCalendar } from '../../..'
-import { createCalendar, viewDay, viewWeek } from '@schedule-x/calendar'
+import {
+  createCalendar,
+  viewDay,
+  viewMonthAgenda,
+  viewMonthGrid,
+  viewWeek,
+} from '@schedule-x/calendar'
 import '@schedule-x/theme-default/dist/index.css'
 import CustomDateGridEvent from '../../../development/components/CustomDateGridEvent.vue'
 import CustomTimeGridEvent from '../../../development/components/CustomTimeGridEvent.vue'
 
 const calendarApp = createCalendar({
-  views: [viewWeek, viewDay],
+  views: [viewWeek, viewDay, viewMonthAgenda, viewMonthGrid],
   selectedDate: '2023-12-18',
   events: [
     {
@@ -68,6 +74,33 @@ const customComponents = {
           <div>{{ calendarEvent.title }}</div>
         </div>
       </template>
+
+      <template #monthAgendaEvent="{ calendarEvent }">
+        <div
+          :style="{
+            backgroundColor: 'cornflowerblue',
+            color: '#fff',
+            height: '80px',
+            width: '100%',
+          }"
+        >
+          <div>{{ calendarEvent.title }}</div>
+        </div>
+      </template>
+
+      <template #monthGridEvent="{ calendarEvent, hasStartDate }">
+        <div
+          :style="{
+            backgroundColor: 'green',
+            color: '#fff',
+            height: '100%',
+            width: '100%',
+            borderLeft: hasStartDate ? '5px solid lightgreen' : 'none',
+          }"
+        >
+          <span :style="{ paddingLeft: '4px' }">{{ calendarEvent.title }}</span>
+        </div>
+      </template>
     </ScheduleXCalendar>
   </div>
 </template>

cypress/pages/002-custom-events/components/CustomTimeGridEvent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="custom-time-grid-event">
-    <input type="checkbox">
+    <input type="checkbox" />
     <div>Id: {{ calendarEvent.id }}</div>
     <div>Title: {{ calendarEvent.title }}</div>
   </div>

development/App.vue

@@ -45,10 +45,7 @@ const customComponents: CustomComponents = {
 
 <template>
   <div class="app">
-    <Calendar
-      :calendar-app="calendarApp"
-      :custom-components="customComponents"
-    >
+    <Calendar :calendar-app="calendarApp" :custom-components="customComponents">
       <template #timeGridEvent="{ calendarEvent }">
         <div
           :style="{ backgroundColor: 'green', color: '#fff', height: '100%' }"
@@ -66,16 +63,41 @@ const customComponents: CustomComponents = {
       <!--          <div>{{ calendarEvent.title }}</div>-->
       <!--        </div>-->
       <!--      </template>-->
+
+      <template #monthAgendaEvent="{ calendarEvent }">
+        <div
+          :style="{
+            backgroundColor: 'cornflowerblue',
+            color: '#fff',
+            height: '80px',
+            width: '100%',
+          }"
+        >
+          <div>{{ calendarEvent.title }}</div>
+          <div>Counter: {{ counter }}</div>
+        </div>
+      </template>
+
+      <template #monthGridEvent="{ calendarEvent, hasStartDate }">
+        <div
+          :style="{
+            backgroundColor: 'green',
+            color: '#fff',
+            height: '100%',
+            width: '100%',
+            borderLeft: hasStartDate ? '5px solid lightgreen' : 'none',
+          }"
+        >
+          <span :style="{ paddingLeft: '4px' }">{{ calendarEvent.title }}</span>
+          &#8226;
+          <span>{{ counter }}</span>
+        </div>
+      </template>
     </Calendar>
 
     <button @click="addEvent">add event</button>
 
-    <button
-      class="button"
-      @click="incrementCounter"
-    >
-      increment counter
-    </button>
+    <button class="button" @click="incrementCounter">increment counter</button>
 
     <div>{{ counter }}</div>
   </div>

development/components/CustomTimeGridEvent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="custom-time-grid-event">
-    <input type="checkbox">
+    <input type="checkbox" />
     <div>Id: {{ calendarEvent.id }}</div>
     <div>Title: {{ calendarEvent.title }}</div>
   </div>

package.json

@@ -21,7 +21,7 @@
     "build:publish": "npm run build && npm publish"
   },
   "peerDependencies": {
-    "@schedule-x/calendar": "^0.5.0",
+    "@schedule-x/calendar": "^0.6.0",
     "vue": "^3"
   },
   "devDependencies": {

src/types/custom-components.ts

@@ -3,6 +3,8 @@ import { Component } from 'vue'
 export type CustomComponents = {
   timeGridEvent?: Component
   dateGridEvent?: Component
+  monthGridEvent?: Component
+  monthAgendaEvent?: Component
 }
 export type CustomComponentMeta = {
   Component: Component