カレンダーhtmlテスト - Assoluto Racing Wiki

イベントカレンダー

日にち:
時刻:
イベント名:
URL:

function generateDateArray(year, month) { const dateArray = []; const firstDate = new Date(year, month - 1, 1); const lastDate = new Date(year, month, 0); for (let date = firstDate; date <= lastDate; date.setDate(date.getDate() + 1)) { dateArray.push(new Date(date)); } return dateArray; }

function generateCalendarHtml(dateArray) { const weekDays = ['日', '月', '火', '水', '木', '金', '土']; let calendarHtml = '<table><tr><th>日</th><th>スタート時</th><th>イベント名</th></tr>';

for (let i = 1; i <= 31; i++) { const day = i < 10 ?` 0${i}` : i; calendarHtml += `<tr><td>${day}</td><td></td><td></td></tr>`; }

calendarHtml += '</table>';

const calendarElement = document.getElementById('calendar'); calendarElement.innerHTML = calendarHtml;

const formElement = document.getElementById('schedule-form'); formElement.addEventListener('submit', function(event) { event.preventDefault(); // デフォルトの送信をキャンセル

const date = event.target.elements.date.value; const time = event.target.elements.time.value; const eventTitle = event.target.elements.eventTitle.value; const url = event.target.elements.url.value;

const calendarDayElement = document.querySelector(`td:nth-of-type(${date.slice(-2)})`); calendarDayElement.nextElementSibling.textContent = time; const eventLinkElement = document.createElement('a'); eventLinkElement.href = url; eventLinkElement.textContent = eventTitle.slice(0, 10); calendarDayElement.nextElementSibling.nextElementSibling.appendChild(eventLinkElement);

});

const now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1;

function updateCalendar() { const firstDayOfMonth = new Date(year, month - 1, 1); const firstDayOfWeek = firstDayOfMonth.getDay(); const startDate = new Date(year, month - 1, 1 - firstDayOfWeek);

let day = startDate.getDate(); for (let i = 1; i <= 31; i++) { const dayOfMonth = new Date(year, month - 1, day); if (dayOfMonth.getMonth() + 1 !== month) { break; } const dayOfWeek = dayOfMonth.getDay(); const dayOfWeekText = weekDays[dayOfWeek]; const dayOfWeekClass = dayOfWeek === 0 ? 'sunday' : (dayOfWeek === 6 ? 'saturday' : ''); const calendarDayElement = document.querySelector(`td:nth-of-type(${i})`); calendarDayElement.textContent = day; calendarDayElement.classList.remove('sunday', 'saturday'); if (dayOfWeekClass) { calendarDayElement.classList.add(dayOfWeekClass); } day++; }

const yearMonthElement = document.getElementById('year-month'); yearMonthElement.textContent = `${year}年${month}月`;

}

function addMonthButtons() { const prevBtn = document.createElement('button'); prevBtn.textContent = '前の月へ'; prevBtn.addEventListener('click', () => { currentDate.setMonth(currentDate.getMonth() - 1); renderCalendar(); });

const nextBtn = document.createElement('button'); nextBtn.textContent = '次の月へ'; nextBtn.addEventListener('click', () => { currentDate.setMonth(currentDate.getMonth() + 1); renderCalendar(); });

const btnContainer = document.createElement('div'); btnContainer.appendChild(prevBtn); btnContainer.appendChild(nextBtn); calendarContainer.appendChild(btnContainer); }

const currentDate = new Date(); const calendarContainer = document.getElementById('calendar'); addMonthButtons(); renderCalendar();

}