JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://javascript.daypilot.org/demo/lite/js/daypilot-all.min.js?v=2024.1.524"></script>
<div id="dp"/>

JavaScript

const dp = new DayPilot.Calendar("dp", {
  startDate: "2022-06-24",
  viewType: "Resources",
  businessBeginsHour: 10,
  businessEndsHour: 15,
  heightSpec: "BusinessHoursNoScroll",
  columns: [
    {name: "Room-A", id: "A"},
    {name: "Room-B", id: "B"},
    {name: "Room-C", id: "C"},
    {name: "Room-D", id: "D"},
  ],
});
dp.init();

dp.events.add({
  start: "2022-06-24T01:00:00",
  end: "2022-06-24T04:30:00",
  resource: "A",
  id: DayPilot.guid(),
  text: "Issue-1, Try to drag this event to 11:30-3:00. Event isn't moved"
});

dp.events.add({
  start: "2022-06-24T01:00:00",
  end: "2022-06-24T05:00:00",
  resource: "C",
  id: DayPilot.guid(),
  text: "Issue-2, Try to drag this event to Room-D. Event duration got shifted 1 hour behind"
});