From 425671e55da42bab36a8c59d5384cdcadae5b7e3 Mon Sep 17 00:00:00 2001
From: Lixian Zhou <charlie32690@gmail.com>
Date: Thu, 19 Mar 2026 11:47:36 -0400
Subject: [PATCH] fix

---
 .../center-calendar/CenterCalendar.js         | 30 +++++++++++++++++--
 .../src/components/events/EventsCalendar.js   | 30 +++++++++++++++++--
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/client/src/components/center-calendar/CenterCalendar.js b/client/src/components/center-calendar/CenterCalendar.js
index f3e33d6..696c4d8 100644
--- a/client/src/components/center-calendar/CenterCalendar.js
+++ b/client/src/components/center-calendar/CenterCalendar.js
@@ -14,7 +14,7 @@ import { createEventsServicePlugin } from '@schedule-x/events-service';
 import { createEventModalPlugin} from '@schedule-x/event-modal';
 import { createEventRecurrencePlugin } from "@schedule-x/event-recurrence";
 import '@schedule-x/theme-default/dist/calendar.css';
-import { Archive, PencilSquare, Filter, Plus } from "react-bootstrap-icons";
+import { Archive, PencilSquare, Filter, Plus, X } from "react-bootstrap-icons";
 import DatePicker from "react-datepicker";
 import { vehicleSlice } from "../../store";
 import Select from 'react-select';
@@ -911,11 +911,37 @@ const EventsCalendar = () => {
 		}
 	}
 
+	const dismissEventModal = () => {
+		try {
+			calendar?.config?.plugins?.eventModal?.close();
+		} catch (e) {
+			document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
+		}
+	};
+
 	
 	const customComponents = {
 		eventModal: ({calendarEvent}) => {
 			return <>
-				<div className="sx__event-modal__title">{currentTab === 'medicalCalendar' ? calendarEvent?.customer : calendarEvent?.title}</div>
+				<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '8px' }}>
+					<div className="sx__event-modal__title">{currentTab === 'medicalCalendar' ? calendarEvent?.customer : calendarEvent?.title}</div>
+					<button
+						type="button"
+						onClick={dismissEventModal}
+						aria-label="Close"
+						title="Close"
+						style={{
+							border: 'none',
+							background: 'transparent',
+							padding: 0,
+							cursor: 'pointer',
+							lineHeight: 1,
+							color: '#666'
+						}}
+					>
+						<X size={18} />
+					</button>
+				</div>
 				{calendarEvent?.doctor && <div className="sx__event-modal__time">{`${calendarEvent?.doctor}`}</div>}
 				<div className="sx__event-modal__time">{`${calendarEvent?.start}`}</div>
 				<div className="sx__event-modal__time" style={{ display: 'flex', gap: '12px', marginTop: '8px' }}>
diff --git a/client/src/components/events/EventsCalendar.js b/client/src/components/events/EventsCalendar.js
index 40952d8..a9838b0 100644
--- a/client/src/components/events/EventsCalendar.js
+++ b/client/src/components/events/EventsCalendar.js
@@ -13,7 +13,7 @@ import {
 import { createEventsServicePlugin } from '@schedule-x/events-service';
 import { createEventModalPlugin} from '@schedule-x/event-modal';
 import '@schedule-x/theme-default/dist/calendar.css';
-import { Archive, Filter, PencilSquare } from "react-bootstrap-icons";
+import { Archive, Filter, PencilSquare, X } from "react-bootstrap-icons";
 import DatePicker from "react-datepicker";
 
 
@@ -317,10 +317,36 @@ const EventsCalendar = () => {
 		setSelectedColorFilters([]);
   }
 
+	const dismissEventModal = () => {
+		try {
+			calendar?.config?.plugins?.eventModal?.close();
+		} catch (e) {
+			document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
+		}
+	};
+
 	const customComponents = {
 		eventModal: ({calendarEvent}) => {
 			return <>
-				<div className="sx__event-modal__title">{calendarEvent?.customer}</div>
+				<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '8px' }}>
+					<div className="sx__event-modal__title">{calendarEvent?.customer}</div>
+					<button
+						type="button"
+						onClick={dismissEventModal}
+						aria-label="Close"
+						title="Close"
+						style={{
+							border: 'none',
+							background: 'transparent',
+							padding: 0,
+							cursor: 'pointer',
+							lineHeight: 1,
+							color: '#666'
+						}}
+					>
+						<X size={18} />
+					</button>
+				</div>
 				{calendarEvent?.doctor && <div className="sx__event-modal__time">{`${calendarEvent?.doctor}`}</div>}
 				<div className="sx__event-modal__time">{`${calendarEvent?.start}`}</div>
 				{AuthService.canEditMedicalEvents() && <div className="sx__event-modal__time" style={{ display: 'flex', gap: '12px', marginTop: '8px' }}>