I want to be able to drag and drop the draggable box to any other date and it should remove that previous one.
For example if I move drag box from 5th march to 6th march it should remove from 5th march and update to 6th march
my problem is when I drag and drop this box it shows a stop sign and I cannot move it. Is there any way to fix it or any other way so I can move my boxes to another date along with its data (has some data name and subrub when you hover over drag box?
my code for runsheetpreview.js
import React, { useState, useRef } from "react";
import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, format, addDays, addMonths, subMonths, isSameMonth } from "date-fns";
import "../assets/css/RunSheetPDF.css";
const DraggableBox = ({ day, onDrop, name: initialName, suburb: initialSuburb }) => {
const [editable, setEditable] = useState(false);
const [name, setName] = useState(initialName);
const [suburb, setSuburb] = useState(initialSuburb);
const [showTooltip, setShowTooltip] = useState(false);
const boxRef = useRef(null);
const handleDoubleClick = () => {
setEditable(true);
};
const handleChangeName = (e) => {
setName(e.target.value);
};
const handleChangeSuburb = (e) => {
setSuburb(e.target.value);
};
const handleBlur = () => {
setEditable(false);
};
const handleDragStart = () => {
setShowTooltip(false);
boxRef.current.classList.add('dragging');
};
const handleDragEnd = () => {
boxRef.current.classList.remove('dragging');
};
const handleDragOver = (e) => {
e.preventDefault();
};
const handleDrop = (e) => {
e.preventDefault();
const draggedDay = parseInt(e.dataTransfer.getData("text/plain"));
onDrop(draggedDay, day);
};
return (
<div
className="drag-box"
ref={boxRef}
draggable
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
onDoubleClick={handleDoubleClick}
onDragOver={handleDragOver}
onDrop={handleDrop}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
style={{
width: "70px",
height: "80px",
textAlign: "center",
backgroundColor: "#F5F5F5",
color: "#333333",
marginTop: "5px",
position: "relative",
cursor: "move" // Set cursor to move when hovering over the box
}}
>
<p style={{ margin: 0, lineHeight: "80px" }}>{day}</p>
{showTooltip && (
<div className="tooltip">
<p>Name: {name}</p>
<p>Suburb: {suburb}</p>
</div>
)}
</div>
);
};
const RunSheetPreview = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
const [calendarData, setCalendarData] = useState([
{ day: 5, name: "John", suburb: "Suburb 1" },
{ day: 15, name: "Alice", suburb: "Suburb 2" },
{ day: 25, name: "Bob", suburb: "Suburb 3" },
{ day: 27, name: "Eva", suburb: "Suburb 4" }
]);
const handleDrop = (draggedDay, dropDay) => {
const newData = [...calendarData];
const draggedItem = newData.find(item => item.day === draggedDay);
draggedItem.day = dropDay;
setCalendarData(newData);
};
const generateCalendar = () => {
const monthStart = startOfMonth(selectedDate);
const monthEnd = endOfMonth(selectedDate);
const startDate = startOfWeek(monthStart, { weekStartsOn: 0 });
const endDate = endOfWeek(monthEnd, { weekStartsOn: 0 });
const rows = [];
let days = [];
let day = startDate;
while (day <= endDate) {
for (let i = 0; i < 7; i++) {
const dayOfMonth = format(day, "d");
const isCurrentMonth = isSameMonth(day, monthStart);
const draggableData = calendarData.find(item => item.day === parseInt(dayOfMonth));
const draggableBoxExists = draggableData !== undefined;
days.push(
<td key={day} style={{ width: "70px", height: "80px" }}>
{isCurrentMonth && (
<div>
{draggableBoxExists ? (
<DraggableBox
day={draggableData.day}
name={draggableData.name}
suburb={draggableData.suburb}
onDrop={handleDrop}
/>
) : (
<p>{dayOfMonth}</p>
)}
</div>
)}
</td>
);
day = addDays(day, 1);
}
rows.push(<tr key={day}>{days}</tr>);
days = [];
}
return rows;
};
const handleNextMonth = () => {
setSelectedDate(addMonths(selectedDate, 1));
};
const handlePreviousMonth = () => {
setSelectedDate(subMonths(selectedDate, 1));
};
return (
<div style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center", marginTop: "20px" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "0px" }}>
<button onClick={handlePreviousMonth} style={{ backgroundColor: "#F5F5F5", color: "#333333", border: "1px solid #CCCCCC", borderRadius: "5px", padding: "5px 10px", marginRight: "10px" }}>Previous Month</button>
<h2 style={{ color: "#333333", margin: 0 }}>{format(selectedDate, "MMMM yyyy")}</h2>
<button onClick={handleNextMonth} style={{ backgroundColor: "#F5F5F5", color: "#333333", border: "1px solid #CCCCCC", borderRadius: "5px", padding: "5px 10px", marginLeft: "10px" }}>Next Month</button>
</div>
<div className="calendar-container">
<table className="calendar-table">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
{generateCalendar()}
</tbody>
</table>
</div>
</div>
);
};
export default RunSheetPreview;
my code for RunSheetPDF.css
.centered-text {
text-align: center;
font-weight: 700;
}
.title {
text-align: left;
font-weight: bold;
font-size: 30px;
text-transform: uppercase;
font-style: bold;
}
.table-container {
width: 1000px;
background: white;
font-family: "Times New Roman";
}
.table {
width: 90%;
border-collapse: collapse;
}
.top-header th {
text-align: left;
border: none;
}
.table-body td {
text-align: left;
border: none;
}
.paper {
padding: 20px;
display: flex;
justify-content: space-between;
}
.left-content {
flex: 1;
text-align: left;
}
.right-content {
flex: 1;
text-align: left;
}
.flex-content {
display: flex;
justify-content: space-between;
}
.empty-box {
text-align: left;
}
.border-box {
width: 100px;
height: 20px;
border: 1px solid #000;
}
.bold-text {
font-weight: bold;
}
.normal-text {
font-weight: normal;
}
.text-left {
text-align: left;
font-family: "Times New Roman", Times, serif;
}
.no-border {
border: none;
}
.page-content {
height: 38rem;
overflow: auto;
border: solid 1px black;
margin: 0 80mm 30mm 45mm;
width: 35rem;
page-break-after: always;
}
/* Use media query to apply styles only when printing */
@media print {
.page-content {
page-break-before: always; /* This will force a page break before each .page-content element */
}
}
/* Add this to your CSS file or CSS module */
.print-button-wrapper {
position: fixed;
bottom: 130px; /* Adjust this value to change the vertical position */
right: 150px; /* Adjust this value to change the horizontal position */
}
.calendar-container {
margin: 20px auto;
max-width: 800px;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calendar-table {
width: 100%;
border-collapse: collapse;
}
.calendar-table th, .calendar-table td {
padding: 10px;
text-align: center;
border: 2px solid #fff; /* White border to separate cells */
}
.calendar-table th {
background-color: #3f51b5; /* Dark blue background for days */
color: #fff;
font-weight: bold;
font-size: 18px;
}
.calendar-table td {
background-color: #ffffff; /* White background for date cells */
}
.calendar-table td:first-child {
background-color: #f5f5f5; /* Light gray background for first column */
}
.drag-box {
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
}
.drag-box p {
margin: 5px 0;
}
.drag-box input {
width: 100%;
padding: 5px;
margin-bottom: 5px;
}
.drag-box.draggable {
background-color: #ffd700; /* Gold background for draggable box */
border-color: #ffd700;
color: #000;
}
.drag-box.draggable p {
color: #000;
}
.drag-box {
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100px; /* Adjust the width as needed */
height: 60px; /* Adjust the height as needed */
transition: opacity 0.3s ease; /* Add transition for smooth hide/show effect */
}
.drag-box.hidden {
opacity: 0; /* Hide the box during drag */
}
.calendar-table {
border-collapse: collapse;
width: 100%; /* Make the table fill its container */
background-color: #f0e8ff; /* Light purple background color */
}
.calendar-table th,
.calendar-table td {
border: 1px solid #cccccc;
padding: 8px;
text-align: center;
width: 100px; /* Adjust the width of table cells */
}
.drag-box {
cursor: pointer;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
margin: 2px;
}
.calendar-table {
width: 100%;
}
.calendar-table td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
.calendar-table p {
margin: 0;
}
.drag-box {
cursor: pointer;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
margin: 2px;
position: relative; /* Add relative positioning */
}
.tooltip {
position: absolute;
top: 100%; /* Position below the draggable box */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
z-index: 1; /* Ensure tooltip appears above other elements */
white-space: nowrap; /* Prevent line breaks */
visibility: hidden; /* Initially hidden */
}
.drag-box:hover .tooltip {
visibility: visible; /* Show tooltip on hover */
}