We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Open Source Mar 14, 2024
I am facing the same issue. Month and Day view work fine however when I switch to Week view it does not show the records. When I test with static records it works fine. Please let me know where I am doing mistake here:
/* eslint-disable-next-line react/no-multi-comp */
/* eslint-disable max-classes-per-file */
/* eslint-disable react/no-unused-state */
import * as React from "react";
import { toast } from "react-toastify";
import common from "../../../services/common";
import {
Button,
Row,
Col,
Spinner,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
} from "reactstrap";
import CaseDetailsBody from "../Cases/CaseDetailsBody";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import LoadingOverlay from "react-loading-overlay";
import { connect } from "react-redux";
import {
Inject,
ScheduleComponent,
ViewsDirective,
ViewDirective,
Day,
Week,
Month,
Resize
} from "@syncfusion/ej2-react-schedule";
import moment from "moment";
import "../../../../node_modules/@syncfusion/ej2-base/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-calendars/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-lists/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-popups/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
import "../../../../node_modules/@syncfusion/ej2-react-schedule/styles/material.css";
import { TreeViewComponent } from "@syncfusion/ej2-react-navigations";
import scheduler from "../../../services/scheduler";
import Badge from "reactstrap/lib/Badge";
import Form from "reactstrap/lib/Form";
import Input from "reactstrap/lib/Input";
class Scheduler extends React.Component {
constructor(props) {
super(props);
this.state = {
activeLocation: this.props.defaultLocation,
events: [],
locations: [],
draggedEvent: null,
showPopup: true,
eventLoader: false,
showCaseModal: false,
showAddEditModal: false,
droppedData: null,
formData: null,
deleteLoder: false,
currentDate: new Date(moment()),
startDayHour: "08:00",
endDayHour: "20:00",
blockedDetail: null,
slotLoader: false,
currentView: "Week",
fields: [
{
Id: 1,
Subject: "NO APPOINTMENT",
StartTime: "2018-09-03T02:00:00.000Z",
EndTime: "2018-09-03T04:00:00.000Z",
},
],
colorCodes: ['#1eb653', '#faea12', '#e83e8c', '#3254eb', '#ca0cdb', '#c14018', '#0fbd99', '#2f353a', '#026112', '#da0704', '#808080']
};
}
resetEvent = (id) => {
let events = this.state.events;
if (window.confirm("Are you sure?")) {
let event_to_be_removed = events.map((event) => event.id).indexOf(id);
events.splice(event_to_be_removed, 1);
this.setState({ events, showPopup: false });
}
};
onTreeDragStop = (e) => {
if (typeof this.scheduleObj.getCellDetails(e.target) !== "undefined") {
this.setState({ showAddEditModal: true, droppedData: e.target });
}
};
componentDidMount() {
this.setState({ eventLoader: true });
this.getEvents(this.props.defaultLocation);
common.getUserLocations().then((response) => {
if (response.data.locations) {
let eventLocations = response.data.locations.map((loc) => loc);
let locations = eventLocations.filter(
(item, i, ar) => ar.map((c) => c.id).indexOf(item.id) === i
);
this.setState({ locations });
}
});
}
componentDidUpdate = (prevProps, prevState) => {
if (
// moment(prevState.currentDate).format("MMMM") !==
// moment(this.state.currentDate).format("MMMM") ||
//* NOT REQURIRED AS change of date is calling events list already
prevProps.defaultLocation !== this.props.defaultLocation ||
prevState.currentView !== this.state.currentView ||
prevState.currentDate !== this.state.currentDate
) {
this.getEvents(this.state.activeLocation);
}
};
toggleCaseModal = (id) => {
let caseId = id !== undefined ? id : "";
this.setState((prevState) => ({
caseId,
showCaseModal: !prevState.showCaseModal,
}));
};
toggleAditEditModal = (id) => {
let caseId = id !== undefined ? id : "";
this.setState((prevState) => ({
caseId,
showAddEditModal: !prevState.showAddEditModal,
formData: null,
blockedDetail: null,
}));
};
deleteBlockedSlots = () => {
this.setState({ deleteLoder: true });
scheduler.delete({ id: this.state.caseId }).then((res) => {
if (res.data.success) {
toast.success(res.data.message, {
position: toast.POSITION.TOP_RIGHT,
});
this.getEvents(this.state.activeLocation);
this.toggleAditEditModal();
this.setState({
formData: null,
blockedDetail: null,
});
}
this.setState({ deleteLoder: false });
});
};
getEvents = (id) => {
let events = [];
this.setState({ eventLoader: true, activeLocation: id });
scheduler
.getCaseList({
fields: {
location_id: id,
currentDate: moment(this.state.currentDate).format("YYYY-MM-DD"),
view: this.state.currentView,
},
})
.then((response) => {
if (response.data.success) {
response.data.cases.forEach(c => {
events.push({
Id: c.id,
Subject: common.getFullName(c.patient),
StartTime: new Date(c.appointment_date + " " + c["slot"].from_time),
EndTime: new Date(c.appointment_date + " " + c["slot"].to_time),
CategoryColor: this.state.colorCodes[c.status],
});
});
response.data.blocked.forEach(b => {
events.push({
Id: b.id,
Subject: b.subject,
StartTime: new Date(b.appointment_date + " " + b.from_time),
EndTime: new Date(b.appointment_date + " " + b.to_time),
CategoryColor: "#808080",
type: "blocked",
});
});
/* events.push(
{
Id: 1,
Subject: "New Year",
StartTime: new Date("2024-03-12 09:00"),
EndTime: new Date("2024-03-12 09:30"),
},
{
Id: 2,
Subject: "May Day",
StartTime: new Date("2024-03-15 11:00"),
EndTime: new Date("2024-03-15 11:30"),
},
{
Id: 3,
Subject: "Bering Sea Gold",
StartTime: new Date("2024-03-16 14:00"),
EndTime: new Date("2024-03-16 14:30"),
}
) */
this.setState({ data: events });
}
this.setState({ eventLoader: false });
});
};
onPopupOpen = (args) => {
args.cancel = true;
if (args.data.Id && args.data.type !== "blocked") {
this.toggleCaseModal(args.data.Id);
} else if (args.data.Id && args.data.type === "blocked") {
this.toggleAditEditModal(args.data.Id);
this.getBlockedDetail(args.data.Id);
} else if (args.data.event) {
args.cancel = false;
}
};
getBlockedDetail = (id) => {
this.setState({ slotLoader: true });
let params = { id: id };
scheduler
.getOne(params)
.then((response) => {
if (response.data.success) {
this.setState({
blockedDetail: response.data.form,
formData: response.data.form.subject,
slotLoader: false,
});
}
})
.catch(function (error) {
this.setState({ error_403: true });
});
};
onEventRendered = (args) => {
if (args) {
args.element.style.backgroundColor = args.data.CategoryColor;
}
};
handleChange = (e) => {
this.setState({ formData: e.target.value });
};
handleSubmit = (e) => {
e.preventDefault();
let fields = {};
let eventData = {};
let cellData = this.scheduleObj.getCellDetails(this.state.droppedData);
if (this.state.blockedDetail) {
fields = {
id: this.state.blockedDetail.id,
user_id: this.props.userId,
location_id: this.state.activeLocation,
subject: this.state.formData,
appointment_date: this.state.blockedDetail.appointment_date,
from_time: this.state.blockedDetail.from_time,
to_time: this.state.blockedDetail.to_time,
full_day_off:
this.state.blockedDetail.from_time === "08:00:00" &&
this.state.blockedDetail.to_time === "20:00:00"
? "1"
: "0",
};
eventData = {
Subject: this.state.formData,
StartTime: this.state.blockedDetail.from_time,
EndTime: this.state.blockedDetail.to_time,
// IsAllDay: cellData.isAllDay,
// IsBlock: true,
};
} else if (cellData.startTime.toLocaleTimeString() === "12:00:00 AM") {
fields = {
user_id: this.props.userId,
location_id: this.state.activeLocation,
subject: this.state.formData,
appointment_date: cellData.startTime.toLocaleDateString("zh-Hans-CN"),
from_time: "08:00:00",
to_time: "20:00:00",
full_day_off: "1",
};
eventData = {
Subject: this.state.formData,
StartTime: cellData.startTime,
EndTime: cellData.endTime,
IsAllDay: cellData.isAllDay,
// IsBlock: true,
};
} else {
fields = {
user_id: this.props.userId,
location_id: this.state.activeLocation,
subject: this.state.formData,
appointment_date: cellData.startTime.toLocaleDateString("zh-Hans-CN"),
from_time: cellData.startTime.toLocaleTimeString(),
to_time: cellData.endTime.toLocaleTimeString(),
};
eventData = {
Subject: this.state.formData,
StartTime: cellData.startTime,
EndTime: cellData.endTime,
IsAllDay: cellData.isAllDay,
// IsBlock: true,
};
}
scheduler.add({ fields: fields }).then((res) => {
this.getEvents(this.state.activeLocation);
if (res.data.success) {
toast.success(res.data.message, {
position: toast.POSITION.TOP_RIGHT,
});
this.setState({
showAddBlockedModal: false,
formData: null,
blockedDetail: null,
});
this.scheduleObj.addEvent(eventData);
} else {
toast.error(res.data.message, {
position: toast.POSITION.TOP_RIGHT,
});
}
});
this.toggleAditEditModal();
};
onresizeStart = (args) => {
if (args.data.CategoryColor !== "#808080") {
args.cancel = true;
}
};
onresizeStop = (args) => {
if (args.data.CategoryColor !== "#808080") {
args.cancel = true;
}
let fields = {
id: args.data.Id,
user_id: this.props.userId,
location_id: this.state.activeLocation,
subject: args.data.Subject,
appointment_date: args.data.StartTime.toLocaleDateString("zh-Hans-CN"),
from_time: args.data.StartTime.toLocaleTimeString(),
to_time: args.data.EndTime.toLocaleTimeString(),
full_day_off:
args.data.StartTime.toLocaleTimeString() === "8:00:00 AM" &&
args.data.EndTime.toLocaleTimeString() === "8:00:00 PM"
? "1"
: "0",
};
let eventData = {
Subject: args.data.Subject,
appointment_date: args.data.StartTime.toLocaleDateString("zh-Hans-CN"),
StartTime: args.data.StartTime.toLocaleTimeString(),
EndTime: args.data.EndTime.toLocaleTimeString(),
// IsAllDay: cellData.isAllDay,
// IsBlock: true,
};
scheduler.add({ fields: fields }).then((res) => {
this.getEvents(this.state.activeLocation);
if (res.data.success) {
toast.success(res.data.message, {
position: toast.POSITION.TOP_RIGHT,
});
}
});
this.scheduleObj.addEvent(eventData);
};
render() {
const { currentDate, data, startDayHour, endDayHour } = this.state;
return (
{this.state.locations.map((loc, i) => (
color="primary"
outline={
parseInt(this.state.activeLocation) !== parseInt(loc.id)
}
key={i}
className={
parseInt(this.state.activeLocation) === parseInt(loc.id)
? "mr-3 mb-3 active"
: "mr-3 mb-3"
}
onClick={() => this.getEvents(loc.id)}
>
{loc.publish_name}
))}
fields={{
dataSource: this.state.fields,
id: "Id",
text: "Subject",
}}
allowDragAndDrop
nodeDragStop={this.onTreeDragStop}
className="no-appointment"
/>
New Cases
Patient Checked-in
Patient Paper work uploaded
Payment Accepted
Records captured
Re-formated files uploaded
Ready for Radiologist
Rad Report Completed
Case Completed
Blocked
active={this.state.eventLoader}
spinner={
fadeSpeed={200}
classNamePrefix="mitiz"
>
ref={(schedule) => (this.scheduleObj = schedule)}
popupOpen={this.onPopupOpen}
eventSettings={{ dataSource: this.state.data }}
navigating={(e) => {
this.setState({
currentDate: e.currentDate,
currentView: e.currentView
? e.currentView
: this.state.currentView,
});
}}
eventRendered={this.onEventRendered}
resizeStart={this.onresizeStart}
resizeStop={this.onresizeStop}
currentView={"Week"}
>
option="Day"
startHour={startDayHour}
endHour={endDayHour}
/>
option="Week"
startHour={startDayHour}
endHour={endDayHour}
/>
{this.state.showCaseModal && (
caseId={this.state.caseId}
enableEditCase={true}
enableBackCase={this.toggleCaseModal}
toggle={() => {
this.setState({ showCaseModal: false });
this.getEvents(this.state.activeLocation);
}}
/>
)}
{this.state.showAddEditModal && (
active={this.state.slotLoader}
spinner={
fadeSpeed={200}
classNamePrefix="mitiz"
>
)}
);
}
}
const mapStateToProps = (state) => {
return {
defaultLocation: state.defaultLocation,
userId: state.userId,
};
};
export default connect(mapStateToProps)(Scheduler);
Open Source Mar 14, 2024
You may check the below look video to understand the view.
Dear customer,
Based on the shared details, we were unable to reproduce the issues or problems you mentioned. The event data is properly loaded for both the week and month views. We have attached a validated sample for your reference. We kindly request that you provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.
Sample: https://stackblitz.com/edit/drag-drop-issues-pzkqvg?file=index.js
Regards,
Ashok
