I’m implementing inline Edit in a react app, It seems to be impossible to access the current text while editing,
I tried with the function onEventEditKeyDown, but while when i print the args out i can see multiple places where the current text is but if i try to access it I always keep getting the old text. Here is a min version of my problem. you can there see in the print out that args.e and args.element.event show the current text, but if a try to access it with args.e.data.text or args.element.event.data.text I will only get the old text.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {DayPilot, DayPilotScheduler} from "daypilot";
function App() {
const startDate = DayPilot.Date.today().firstDayOfYear();
const resources = [];
for (let i = 0; i < 12; i++) {
const month = startDate.addMonths(i);
resources.push({
name: month.toString("MMMM"),
start: month,
end: month.addMonths(1),
});
}
const events = [
{
start: startDate.addMonths(2).addDays(0),
end: startDate.addMonths(2).addDays(1),
id: DayPilot.guid(),
text: "Event 1",
},
{
start: startDate.addMonths(3).addDays(2),
end: startDate.addMonths(3).addDays(10),
id: DayPilot.guid(),
text: "Event 2",
},
];
const onBeforeCellRender = (args) => {
const belongsToCurrentMonth = args.cell.x + 1 === args.cell.start.getDay();
if (!belongsToCurrentMonth) {
args.cell.properties.backColor = "#dddddd";
}
else {
args.cell.properties.fontColor = "#dddddd";
args.cell.properties.text = args.cell.start.toString("ddd");
args.cell.properties.verticalAlignment = "center";
args.cell.properties.horizontalAlignment = "center";
}
};
const onEventSelected = (args) => {
console.log(args)
}
const onTimeRangeDoubleClick = (args) => {
console.log(args)
}
const onRectangleSelect = (args) => {
console.log(args)
}
const onEventEditKeyDown = (args)=> {
console.log(args.e,args.e.data,args.e.data.text,args.element.event,args.element.event.data.text);
}
return (
<DayPilotScheduler
eventClickHandling = "Edit"
onEventEditKeyDown={onEventEditKeyDown}
allowMultiMove={true}
allowMultiSelect={true}
onEventSelected={onEventSelected}
onTimeRangeDoubleClick={onTimeRangeDoubleClick}
rectangleSelectMode={"Free"}
rectangleSelectHandling={"Enabled"}
timeRangeDoubleClickHandling="Enabled"
onRectangleSelect={onRectangleSelect}
days={31}
scale="Day"
resources={resources}
startDate={startDate}
allowMultiRange={true}
events={ events}
onBeforeCellRender = {onBeforeCellRender}
/>
);
}
export default App;