Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
fa234a7fae | ||
 ameye
|
6f38611606 | ||
|
victorAnumudu
|
37774c0aa3 | ||
 victor.ebuka
|
373956da39 | ||
|
victorAnumudu
|
cd7e6fdf75 | ||
|
victorAnumudu
|
d1d6c6a9fc | ||
|
CHIEFSOFT\ameye
|
e8123bc898 | ||
|
victor.ebuka
|
4bcbdc5a12 | ||
|
victor.ebuka
|
5c68c5a51b | ||
|
ameye
|
397eb7c88b | ||
 tokslaw
|
0f0a674fea |
@@ -16,6 +16,7 @@ services:
|
||||
- ./:/usr/src/app
|
||||
- ./src/:/usr/src/app/src
|
||||
- ./run.sh:/usr/src/app/run.sh
|
||||
- ./node_modules/:/usr/src/app/node_modules
|
||||
extra_hosts:
|
||||
- api.mermsemr.com:10.10.33.15
|
||||
- devapi.mermsemr.com:10.10.33.15
|
||||
|
||||
@@ -86,10 +86,10 @@ export default function CSignup() {
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="bg-white custom-bg">
|
||||
<div className="vh-100 bg-white custom-bg">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1 h-100-vh">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { recoverPWD } from '../../services/services';
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
username: Yup.string()
|
||||
.email("Wrong email format")
|
||||
// .email("Wrong email format")
|
||||
// .matches(
|
||||
// /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
||||
// "Invalid email format"
|
||||
@@ -43,14 +43,14 @@ export default function Forgetpwd2() {
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="bg-white">
|
||||
<div className="vh-100 bg-white custom-bg">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="login p-50">
|
||||
<h1 className="mb-2">Recover Password</h1>
|
||||
<p>Please enter your email.</p>
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1h">
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Please enter your username.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
@@ -64,8 +64,8 @@ export default function Forgetpwd2() {
|
||||
<>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='username' className="form-control" placeholder="Email" value={props.values.username} onChange={props.handleChange} />
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
{mutation.error &&
|
||||
@@ -98,13 +98,13 @@ export default function Forgetpwd2() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -66,12 +66,12 @@ export default function Login() {
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="bg-white">
|
||||
<div className="vh-100 custom-bg">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="login p-50">
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome back, please login to your account.</p>
|
||||
<form className="mt-3 mt-sm-5">
|
||||
@@ -135,13 +135,13 @@ export default function Login() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -56,104 +56,104 @@ export default function Signup2() {
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="bg-white">
|
||||
<div className="vh-100 bg-white custom-bg">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome, Please create your account.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={signUp}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2 mt-sm-5'>
|
||||
<div className="row">
|
||||
{!mutation.isSuccess ?
|
||||
<>
|
||||
<div className="col-12 col-sm-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
||||
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome, Please create your account.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={signUp}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2 mt-sm-5'>
|
||||
<div className="row">
|
||||
{!mutation.isSuccess ?
|
||||
<>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
||||
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
||||
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
||||
</div>
|
||||
|
||||
{mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{mutation.error.message}</p>
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
||||
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||
<h4 className='p-4 text-black'>Check your email to continue.</h4>
|
||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||
{mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{mutation.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||
<h4 className='p-4 text-black'>Check your email to continue.</h4>
|
||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3">
|
||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3">
|
||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,13 +11,34 @@ export default function Calendar(){
|
||||
// setDraggedEvent(event)
|
||||
// }
|
||||
|
||||
const dummyEvents = [
|
||||
const events = [
|
||||
{id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
|
||||
{id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
|
||||
{id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
|
||||
{id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
|
||||
]
|
||||
|
||||
const [dummyEvents, setDummyEvents] = useState(events)
|
||||
|
||||
const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
|
||||
|
||||
const [newEvent, setNewEvent] = useState({
|
||||
title: '', color: ''
|
||||
})
|
||||
|
||||
const handleEditEvent = ({target:{name,value}}) => {
|
||||
setNewEvent(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
const handleAddNewEvent = () => {
|
||||
if(newEvent.title && newEvent.color){
|
||||
const eventToAdd = {...newEvent}
|
||||
setDummyEvents(prev => ([...prev, eventToAdd]))
|
||||
setNewEvent({title: '', color: ''})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
|
||||
@@ -51,8 +72,8 @@ export default function Calendar(){
|
||||
))} */}
|
||||
<ExternalDraggable dummyEvents={dummyEvents} />
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" value=""
|
||||
id="defaultCheck1" />
|
||||
<input className="form-check-input" type="checkbox" value={removeAfterDrop}
|
||||
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
|
||||
<label className="form-check-label" htmlFor="defaultCheck1">
|
||||
Remove After Drop
|
||||
</label>
|
||||
@@ -62,7 +83,7 @@ export default function Calendar(){
|
||||
<div className="col-xl-9">
|
||||
<div className="event-calendar">
|
||||
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
|
||||
<EventCalendar />
|
||||
<EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,15 +107,16 @@ export default function Calendar(){
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<label>Event Name</label>
|
||||
<input type="email" className="form-control" id="eventname" />
|
||||
<input type="email" className="form-control" id="eventname" name='title' value={newEvent.title} onChange={handleEditEvent} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Choose Event Color</label>
|
||||
<select className="form-control">
|
||||
<option>Primary</option>
|
||||
<option>Warning</option>
|
||||
<option>Success</option>
|
||||
<option>Danger</option>
|
||||
<select className="form-control" name='color' value={newEvent.color} onChange={handleEditEvent}>
|
||||
<option value={''}>Select</option>
|
||||
<option value={'fc-event-primary'}>Primary</option>
|
||||
<option value={'fc-event-warning'}>Warning</option>
|
||||
<option value={'fc-event-success'}>Success</option>
|
||||
<option value={'fc-event-danger'}>Danger</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -102,7 +124,7 @@ export default function Calendar(){
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" className="btn btn-success">Save changes</button>
|
||||
<button type="button" className="btn btn-success" onClick={handleAddNewEvent}>Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import { INITIAL_EVENTS, createEventId } from './event-utils';
|
||||
|
||||
export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfterDrop, setDummyEvents}) {
|
||||
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||
const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
|
||||
|
||||
@@ -40,31 +40,40 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
}
|
||||
|
||||
const onDrop = (event) => {
|
||||
console.log('event', event)
|
||||
// console.log('event', event)
|
||||
if(event){
|
||||
let newEvent = {
|
||||
id: createEventId(),
|
||||
title: event.draggedEl.innerText,
|
||||
start: event.startStr,
|
||||
end: event.endStr,
|
||||
// end: event.endStr,
|
||||
allDay: event.allDay,
|
||||
...event
|
||||
}
|
||||
setCurrentEvents(prev => ([...prev, newEvent]))
|
||||
if(removeAfterDrop){
|
||||
setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleEventClick(clickInfo) {
|
||||
if (
|
||||
confirm(
|
||||
`Are you sure you want to delete the event '${clickInfo.event.title}'`
|
||||
)
|
||||
) {
|
||||
clickInfo.event.remove();
|
||||
}
|
||||
const removeEvent = (event) => {
|
||||
let eventToRemove = event?.event?._def?.publicId
|
||||
let remainingEvent = currentEvents.filter(item => item.id != eventToRemove)
|
||||
setCurrentEvents(remainingEvent)
|
||||
}
|
||||
|
||||
|
||||
// function handleEventClick(clickInfo) {
|
||||
// if (
|
||||
// confirm(
|
||||
// `Are you sure you want to delete the event '${clickInfo.event.title}'`
|
||||
// )
|
||||
// ) {
|
||||
// clickInfo.event.remove();
|
||||
// }
|
||||
// }
|
||||
|
||||
function handleEvents(events) {
|
||||
// setCurrentEvents(events);
|
||||
}
|
||||
@@ -87,9 +96,9 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
weekends={weekendsVisible}
|
||||
// initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
|
||||
events={currentEvents}
|
||||
// select={handleDateSelect}
|
||||
select={handleDateSelect}
|
||||
eventContent={renderEventContent} // custom render function
|
||||
// eventClick={handleEventClick}
|
||||
// eventClick={handleEventClick}
|
||||
eventsSet={handleEvents} // called after events are initialized/added/changed/removed
|
||||
/* you can update a remote database when these fire:
|
||||
eventAdd={function(){}}
|
||||
@@ -97,7 +106,7 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
eventRemove={function(){}}
|
||||
*/
|
||||
|
||||
|
||||
eventRemove={removeEvent}
|
||||
droppable= {true} // this allows things to be dropped onto the calendar
|
||||
drop={onDrop}
|
||||
/>
|
||||
|
||||
@@ -6,12 +6,17 @@ const ExternalDraggable = ({dummyEvents}) => {
|
||||
|
||||
useEffect(() => {
|
||||
// Make the external events draggable
|
||||
new Draggable(eventContainerRef.current, {
|
||||
const draggable = new Draggable(eventContainerRef.current, {
|
||||
itemSelector: ".fc-event",
|
||||
eventData: (eventEl) => ({
|
||||
title: eventEl.innerText.trim(),
|
||||
}),
|
||||
});
|
||||
|
||||
// Cleanup the Draggable instance on unmount
|
||||
return () => {
|
||||
draggable.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
@@ -2,19 +2,19 @@ let eventGuid = 0;
|
||||
let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
|
||||
|
||||
export const INITIAL_EVENTS = [
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'All-day event',
|
||||
start: new Date('2025-01-19'),
|
||||
end: new Date('2025-01-20'),
|
||||
// color: 'blue'
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'Timed event',
|
||||
start: todayStr + 'T12:00:00',
|
||||
// color: 'red'
|
||||
},
|
||||
// {
|
||||
// id: createEventId(),
|
||||
// title: 'All-day event',
|
||||
// start: new Date('2025-01-19'),
|
||||
// end: new Date('2025-01-20'),
|
||||
// // color: 'blue'
|
||||
// },
|
||||
// {
|
||||
// id: createEventId(),
|
||||
// title: 'Timed event',
|
||||
// start: todayStr + 'T12:00:00',
|
||||
// // color: 'red'
|
||||
// },
|
||||
];
|
||||
|
||||
export function createEventId() {
|
||||
|
||||
Reference in New Issue
Block a user