function MainComponent() { const [selectedDates, setSelectedDates] = React.useState([]); const holidays = { "07-15": "海の日", "08-11": "山の日", "09-16": "敬老の日", "09-23": "秋分の日" }; const isHoliday = (month, day)=>!!holidays[`${month}-${day}`]; const isWeekend = (date)=>date.getDay() === 0 || date.getDay() === 6; const isAdjacent = (date)=>{ if (selectedDates.length === 0) return true; const [lastMonth, lastDay] = selectedDates[selectedDates.length - 1].split("/"); const lastSelected = new Date(`2024/${lastMonth}/${lastDay}`); const newDate = new Date(`2024/${date}`); const diffDays = (newDate - lastSelected) / (1000 * 3600 * 24); return diffDays === 1 || selectedDates.includes(date); }; const handleDateClick = (month, day)=>{ const date = `${month < 10 ? `0${month}` : month}/${day < 10 ? `0${day}` : day}`; if (selectedDates.includes(date)) { setSelectedDates(selectedDates.filter((d)=>d !== date)); } else if (selectedDates.length < 3 && !isWeekend(new Date(2024, month - 1, day)) && !isHoliday(month, day) && isAdjacent(date)) { setSelectedDates([ ...selectedDates, date ]); } }; const handleRemoveDate = (date)=>{ setSelectedDates(selectedDates.filter((d)=>d !== date)); }; const renderDays = (month)=>{ const daysInMonth = new Date(2024, month, 0).getDate(); const firstDay = new Date(2024, month - 1, 1).getDay(); let days = []; let counter = 1; for(let i = 0; i < 6; i++){ let week = Array.from({ length: 7 }, (_, j)=>{ if (i === 0 && j < firstDay || counter > daysInMonth) { return /*#__PURE__*/ React.createElement("td", { key: j, className: "p-2", __source: { fileName: "", lineNumber: 51, columnNumber: 18 }, __self: this }); } else { const dayClass = j === 0 || isHoliday(month, counter) ? "bg-red-200" : j === 6 ? "bg-blue-200" : selectedDates.includes(`${month < 10 ? `0${month}` : month}/${counter < 10 ? `0${counter}` : counter}`) ? "bg-gray-300 cursor-pointer" : "cursor-pointer"; const day = counter; counter++; return /*#__PURE__*/ React.createElement("td", { key: j, className: `p-2 text-center ${dayClass}`, onClick: ()=>handleDateClick(month, day), __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, day); } }); days.push(/*#__PURE__*/ React.createElement("tr", { key: i, __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, week)); } return days; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, [ 7, 8, 9 ].map((month)=>/*#__PURE__*/ React.createElement("div", { key: month, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, month === 7 ? "7月" : month === 8 ? "8月" : "9月", " 2024"), /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, "日"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "月"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, "火"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, "水"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, "木"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "金"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, "土"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, renderDays(month)))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-4", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-2 rounded-md", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "選択した日付:"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, selectedDates.map((date)=>/*#__PURE__*/ React.createElement("div", { key: date, className: "flex items-center ml-2", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, date), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-red-400 text-white py-1 px-2 rounded", name: "remove-date", onClick: ()=>handleRemoveDate(date), __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, "×"))))))); }

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

7月 2024

8月 2024

9月 2024