search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

onEventEditKeyDown acces current text

Asked by Anonymous
9 hours ago.

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;
No reply yet.
New Reply
This reply is
Attachments:
or drop files here
Your name (optional):