function MainComponent() { const assignedUsers = [ { name: "山田", startDate: "2023-04-01", endDate: "2023-04-10" }, { name: "鈴木", startDate: "2023-04-05", endDate: "2023-04-15" }, { name: "佐藤", startDate: "2023-04-08", endDate: "2023-04-18" } ]; const generateDates = (year, month)=>{ const dates = []; const daysInMonth = new Date(year, month, 0).getDate(); for(let day = 1; day <= daysInMonth; day++){ const fullDay = day.toString().padStart(2, '0'); dates.push(`${year}-${month.toString().padStart(2, '0')}-${fullDay}`); } return dates; }; const [currentMonth, setCurrentMonth] = React.useState(4); const [dates, setDates] = React.useState(generateDates(2023, currentMonth)); React.useEffect(()=>{ setDates(generateDates(2023, currentMonth)); }, [ currentMonth ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth(currentMonth - 1), className: "mr-4 px-2 py-1 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "← 前の月"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#333]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "担当者のアサイン期間カレンダー"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth(currentMonth + 1), className: "ml-4 px-2 py-1 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "次の月 →")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto border-collapse border border-gray-400", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "担当者"), dates.map((date)=>/*#__PURE__*/ React.createElement("th", { key: date, className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, date)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, assignedUsers.map((user, userIndex)=>/*#__PURE__*/ React.createElement("tr", { key: userIndex, className: `bg-[${userIndex % 2 === 0 ? "#f9f9f9" : "#fff"}]`, __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, user.name), dates.map((date)=>/*#__PURE__*/ React.createElement("td", { key: date, className: `border border-gray-300 p-2 ${new Date(date) >= new Date(user.startDate) && new Date(date) <= new Date(user.endDate) ? 'bg-green-200' : 'bg-transparent'}`, __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this })))))))); }

担当者	2023-04-01	2023-04-02	2023-04-03	2023-04-04	2023-04-05	2023-04-06	2023-04-07	2023-04-08	2023-04-09	2023-04-10	2023-04-11	2023-04-12	2023-04-13	2023-04-14	2023-04-15	2023-04-16	2023-04-17	2023-04-18	2023-04-19	2023-04-20	2023-04-21	2023-04-22	2023-04-23	2023-04-24	2023-04-25	2023-04-26	2023-04-27	2023-04-28	2023-04-29	2023-04-30
山田
鈴木
佐藤