feat: custom components for week grid (#3)

schedule-x · Dec 25, 2023 · 0edba78 · 0edba78
1 parent cf1cb95
commit 0edba78
Show file tree

Hide file tree

Showing 23 changed files with 1,662 additions and 69 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,6 +1,8 @@
 module.exports = {
   extends: ['@schedule-x/eslint-config', 'plugin:vue/vue3-recommended'],
-  rules: {},
+  rules: {
+    'vue/singleline-html-element-content-newline': 'off',
+  },
   ignorePatterns: ['development/shims-vue.d.ts', 'dist/**'],
   parserOptions: {
     parser: '@typescript-eslint/parser',

diff --git a/cypress/e2e/001-smoke.cy.ts b/cypress/e2e/001-smoke.cy.ts
@@ -6,7 +6,7 @@ describe('Smoke Test', () => {
   const weekView = createWeekViewPageObject()
 
   beforeEach(() => {
-    cy.visit('/cypress/pages/001-smoke.html')
+    cy.visit('/cypress/pages/001-smoke/001-smoke.html')
   })
 
   it('should navigate between views', () => {

diff --git a/cypress/e2e/002-custom-events.cy.ts b/cypress/e2e/002-custom-events.cy.ts
@@ -0,0 +1,14 @@
+describe('Custom events test', () => {
+  beforeEach(() => {
+    cy.visit('/cypress/pages/002-custom-events/002-custom-events.html')
+  })
+
+  it('should render custom events', () => {
+    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')
+  })
+})
diff --git a/cypress/pages/001-smoke-App.vue → cypress/pages/001-smoke/001-smoke-App.vue b/cypress/pages/001-smoke-App.vue → cypress/pages/001-smoke/001-smoke-App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { ScheduleXCalendar } from '../../'
+import { ScheduleXCalendar } from '../../..'
 import {
   createCalendar,
   viewDay,
@@ -12,6 +12,7 @@ import {
 import '@schedule-x/theme-default/dist/index.css'
 
 const calendarApp = createCalendar({
+  selectedDate: '2023-12-18',
   views: [viewWeek, viewMonthGrid, viewDay, viewMonthAgenda],
   events: [
     {
@@ -52,15 +53,11 @@ const removeEvent = () => {
   <div class="app">
     <ScheduleXCalendar :calendar-app="calendarApp" />
 
-    <button @click="addEvent">
-      add event
-    </button>
-    <button @click="updateEvent">
-      update event
-    </button>
-    <button @click="removeEvent">
-      remove event
-    </button>
+    <button @click="addEvent">add event</button>
+
+    <button @click="updateEvent">update event</button>
+
+    <button @click="removeEvent">remove event</button>
   </div>
 </template>
 

diff --git a/cypress/pages/001-smoke-main.ts → cypress/pages/001-smoke/001-smoke-main.ts b/cypress/pages/001-smoke-main.ts → cypress/pages/001-smoke/001-smoke-main.ts
@@ -4,7 +4,7 @@ import '@fontsource/open-sans/500-italic.css'
 import '@fontsource/open-sans/700.css'
 import '@fontsource/open-sans/700-italic.css'
 import { createApp } from 'vue'
-import './style.css'
+import '../style.css'
 import App from './001-smoke-App.vue'
 
 createApp(App).mount('#root')
diff --git a/cypress/pages/001-smoke.html → cypress/pages/001-smoke/001-smoke.html b/cypress/pages/001-smoke.html → cypress/pages/001-smoke/001-smoke.html
@@ -16,6 +16,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./001-smoke-main.ts"></script>
+    <script type="module" src="001-smoke-main.ts"></script>
   </body>
 </html>
diff --git a/cypress/pages/002-custom-events/002-custom-events-App.vue b/cypress/pages/002-custom-events/002-custom-events-App.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { ScheduleXCalendar } from '../../..'
+import { createCalendar, viewDay, 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],
+  selectedDate: '2023-12-18',
+  events: [
+    {
+      id: 1,
+      title: 'Event 1',
+      start: '2023-12-18',
+      end: '2023-12-18',
+    },
+    {
+      id: 2,
+      title: 'Event 2',
+      start: '2023-12-17',
+      end: '2023-12-21',
+    },
+    {
+      id: 3,
+      title: 'Event 3',
+      start: '2023-12-22',
+      end: '2023-12-28',
+    },
+    {
+      id: 4,
+      title: 'Event 4',
+      start: '2023-12-22',
+      end: '2023-12-28',
+    },
+    {
+      id: 5,
+      title: 'Event 5',
+      start: '2023-12-18 04:15',
+      end: '2023-12-18 05:15',
+    },
+  ],
+})
+
+const customComponents = {
+  dateGridEvent: CustomDateGridEvent,
+  timeGridEvent: CustomTimeGridEvent,
+}
+</script>
+
+<template>
+  <div class="app">
+    <ScheduleXCalendar
+      :calendar-app="calendarApp"
+      :custom-components="customComponents"
+    />
+  </div>
+</template>
+
+<style>
+.app {
+  width: 100%;
+}
+</style>
diff --git a/cypress/pages/002-custom-events/002-custom-events.html b/cypress/pages/002-custom-events/002-custom-events.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Browser test | Vue Calendar | Custom events</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="002-custom-events.ts"></script>
+  </body>
+</html>
diff --git a/cypress/pages/002-custom-events/002-custom-events.ts b/cypress/pages/002-custom-events/002-custom-events.ts
@@ -0,0 +1,10 @@
+import '@fontsource/open-sans'
+import '@fontsource/open-sans/300.css'
+import '@fontsource/open-sans/500-italic.css'
+import '@fontsource/open-sans/700.css'
+import '@fontsource/open-sans/700-italic.css'
+import { createApp } from 'vue'
+import '../style.css'
+import App from './002-custom-events-App.vue'
+
+createApp(App).mount('#root')
diff --git a/cypress/pages/002-custom-events/components/CustomDateGridEvent.vue b/cypress/pages/002-custom-events/components/CustomDateGridEvent.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="custom-date-grid-event"
+    :style="{
+      width: '100%',
+      height: '100%',
+      border: '2px solid black',
+      borderRadius: '4px',
+    }"
+  >
+    <div class="left-arrow">&larr;</div>
+
+    {{ calendarEvent.title }}
+
+    <div class="right-arrow">&rarr;</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+
+defineProps({
+  calendarEvent: {
+    type: Object as PropType<{ title: string; id: number | string }>,
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss">
+.custom-date-grid-event {
+  position: relative;
+  overflow: hidden;
+  padding: 0 4px;
+  font-size: 14px;
+  font-weight: bold;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: #fff;
+  color: #000;
+  border-radius: 4px;
+  border: 2px solid black;
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #eee;
+  }
+
+  .sx__date-grid-event--overflow-left & {
+    padding-left: 24px;
+  }
+}
+
+.left-arrow {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: none;
+
+  .sx__date-grid-event--overflow-left & {
+    display: block;
+  }
+}
+
+.right-arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: none;
+
+  .sx__date-grid-event--overflow-right & {
+    display: block;
+  }
+}
+</style>
diff --git a/cypress/pages/002-custom-events/components/CustomTimeGridEvent.vue b/cypress/pages/002-custom-events/components/CustomTimeGridEvent.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="custom-time-grid-event">
+    <input type="checkbox" />
+    <div>Id: {{ calendarEvent.id }}</div>
+    <div>Title: {{ calendarEvent.title }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+
+defineProps({
+  calendarEvent: {
+    type: Object as PropType<{ title: string; id: number | string }>,
+    required: true,
+  },
+})
+</script>
+
+<style>
+.custom-time-grid-event {
+  border: 2px solid black;
+  border-radius: 4px;
+  background-color: #fff;
+  font-family: inherit;
+  line-height: 1.5;
+  padding: 0.125rem;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/development/App.vue b/development/App.vue
@@ -9,46 +9,50 @@ import {
 } from '@schedule-x/calendar'
 import '@schedule-x/theme-default/dist/index.css'
 import { ref } from 'vue'
+import { createEventModalPlugin } from '@schedule-x/event-modal'
+import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'
+import { seededEvents } from './data/seeded-events.ts'
+import { CustomComponents } from '../src/types/custom-components.ts'
+import CustomTimeGridEvent from './components/CustomTimeGridEvent.vue'
+import CustomDateGridEvent from './components/CustomDateGridEvent.vue'
 
 const counter = ref(0)
 
 const incrementCounter = () => {
   counter.value++
 }
 
-const sxCal = createCalendar({
+const calendarApp = createCalendar({
   views: [viewWeek, viewMonthGrid, viewDay, viewMonthAgenda],
-  events: [
-    {
-      id: 1,
-      title: 'Event 1',
-      start: '2023-12-18',
-      end: '2023-12-18',
-    },
-  ],
+  events: seededEvents,
+  plugins: [createEventModalPlugin(), createDragAndDropPlugin()],
 })
 
 const addEvent = () => {
-  sxCal.events.add({
+  calendarApp.events.add({
     id: 2,
     title: 'Event 2',
     start: '2023-12-19',
     end: '2023-12-19',
   })
 }
+
+const customComponents: CustomComponents = {
+  timeGridEvent: CustomTimeGridEvent,
+  dateGridEvent: CustomDateGridEvent,
+}
 </script>
 
 <template>
   <div class="app">
-    <Calendar :calendar-app="sxCal" />
+    <Calendar
+      :calendar-app="calendarApp"
+      :custom-components="customComponents"
+    />
 
-    <button @click="addEvent">
-      add event
-    </button>
+    <button @click="addEvent">add event</button>
 
-    <button @click="incrementCounter">
-      increment counter
-    </button>
+    <button @click="incrementCounter">increment counter</button>
 
     <div>{{ counter }}</div>
   </div>