There is no way to delete a time slot

[marcoscunha]

Hi,

I'm using the latest version with npm. My code is in jsx.

However, there is no way to delete a time slot.

Thanks in advance,

Marcos

[forabi]

The core library does not include a delete button, but it allows you to create your custom time slot component which you can add anything to it (including a delete button). Please have a look at the demo code included in this repo to understand how you can customize the component.

…

‫في ٢٥‏/٠٨‏/٢٠٢٠، الساعة ١١:٥٢ ص، كتب/كتبت ‏⁨Marcos Cunha⁩ ***@***.***⁩>:‬ Hi, I'm using the latest version with npm. However, there is no way to delete a time slot. Thanks in advance, Marcos — You are receiving this because you are subscribed to this thread. Reply to this email directly, ‏⁨view it on GitHub⁩ ‏<⁨#28⁩>, or ‏⁨unsubscribe⁩ ‏<⁨https://github.com/notifications/unsubscribe-auth/AAHXIGMMFOK6W3MQAF7HNJDSCN3TXANCNFSM4QKMXU5Q⁩>.

[marcoscunha]

Thanks for the answer.

[tanay-msp]

Hi @forabi

I pulled the demo code but I am not able to make the delete work on my project. Is there a simpler way to do it? Is there an event click handler I can use to customise the delete feature?

[forabi]

@tanay-msp what kind of issue you've encountered with the demo code?

[tanay-msp]

I'm sorry, let me rephrase - it works on the demo project but I was unable to replicate the behaviour on my own project. I can share that with you too, but I am trying to do it in a different way now. Here's my code, trying to delete using my own custom method. However, this approach is now throwing a memory leak warning when it executes the line marked with ******.

Expected behavior - delete a time slot if the range is reduced down to 15 minutes.

function WeekScheduler(props) {
  
  let rangeStrings = props.schedule;
  console.log('WeekScheduler rangestrings = ', rangeStrings);

  const defaultSchedule = rangeStrings.map(range =>
    range.map(dateString => new Date(dateString)),
  );

  console.log('WeekScheduler defaultSchedule = ', defaultSchedule);

  const [schedule, setSchedule] = useState(rangeStrings);
  const [viewPlanner, setViewPlanner] = useState(false);

useEffect(() => {
    // console.log('new schedule = ' + schedule);
    var newSchedule = [];
    for(var i=0; i<schedule.length; i++) {
      // console.log('schedule[' + i + '] = ' + schedule[i]);
      var a = moment(schedule[i][0]);
      var b = moment(schedule[i][1]);
      // console.log('diff = ' + b.diff(a, 'minutes', true)); // 1.75
      if(b.diff(a, 'minutes', true) > 15)
        newSchedule.push(schedule[i]);
    }
    console.log('schedule = ' + schedule.length);
    console.log('newSchedule = ' + newSchedule.length);
    
    // if(newSchedule.length > 3) {
    //   console.log('setting viewplanner') ;
    //   setViewPlanner(true)
    // }

    if(newSchedule.length < schedule.length) { 
      try {
        setSchedule(newSchedule); // *********
      } catch (error) {
        console.log(error)
      }
    }
  });

return (
    <div
      className="root"
      style={{
        width: "80vw",
        height: "400px",
        position: 'relative',
        "--cell-height": "20px",
        "--cell-width": "50px",
      }}
    >
<TimeGridScheduler
            classes={classes}
            style={{ width: "100%", height: "100%" }}
            originDate={new Date("2019-03-04")}
            schedule={schedule}
            onChange={setSchedule}
            visualGridVerticalPrecision={15}
            verticalPrecision={15}
            cellClickPrecision={60}
          />
    </div>
  );
}

Warning:
react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in Resizable (created by RangeBox) in div (created by ForwardRef(DefaultEventRootComponent)) in ForwardRef(DefaultEventRootComponent) (created by RangeBox) in DraggableCore (created by Draggable) in Draggable (created by RangeBox) in RangeBox (created by Schedule) in span (created by Schedule)

If I can fix this memory leak, I think it should be okay.