yangli/worldshine-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix
All checks were successful
Build And Deploy Main / build-and-deploy (push) Successful in 41s
Details

Browse Source
This commit is contained in:
Lixian Zhou
2026-03-19 11:47:36 -04:00
parent e2d2f0b392
commit 425671e55d
2 changed files with 56 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/center-calendar/CenterCalendar.js
View File

@@ -14,7 +14,7 @@ import { createEventsServicePlugin } from '@schedule-x/events-service';
import { createEventModalPlugin} from '@schedule-x/event-modal'; import { createEventModalPlugin} from '@schedule-x/event-modal';
import { createEventRecurrencePlugin } from "@schedule-x/event-recurrence"; import { createEventRecurrencePlugin } from "@schedule-x/event-recurrence";
import '@schedule-x/theme-default/dist/calendar.css'; 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 DatePicker from "react-datepicker";
import { vehicleSlice } from "../../store"; import { vehicleSlice } from "../../store";
import Select from 'react-select'; 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 = { const customComponents = {
eventModal: ({calendarEvent}) => { eventModal: ({calendarEvent}) => {
return <> 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>} {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">{`${calendarEvent?.start}`}</div>
<div className="sx__event-modal__time" style={{ display: 'flex', gap: '12px', marginTop: '8px' }}> <div className="sx__event-modal__time" style={{ display: 'flex', gap: '12px', marginTop: '8px' }}>

30
client/src/components/events/EventsCalendar.js
View File

@@ -13,7 +13,7 @@ import {
import { createEventsServicePlugin } from '@schedule-x/events-service'; import { createEventsServicePlugin } from '@schedule-x/events-service';
import { createEventModalPlugin} from '@schedule-x/event-modal'; import { createEventModalPlugin} from '@schedule-x/event-modal';
import '@schedule-x/theme-default/dist/calendar.css'; 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"; import DatePicker from "react-datepicker";
@@ -317,10 +317,36 @@ const EventsCalendar = () => {
setSelectedColorFilters([]); setSelectedColorFilters([]);
} }
const dismissEventModal = () => {
try {
calendar?.config?.plugins?.eventModal?.close();
} catch (e) {
document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
}
};
const customComponents = { const customComponents = {
eventModal: ({calendarEvent}) => { eventModal: ({calendarEvent}) => {
return <> 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>} {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">{`${calendarEvent?.start}`}</div>
{AuthService.canEditMedicalEvents() && <div className="sx__event-modal__time" style={{ display: 'flex', gap: '12px', marginTop: '8px' }}> {AuthService.canEditMedicalEvents() && <div className="sx__event-modal__time" style={{ display: 'flex', gap: '12px', marginTop: '8px' }}>