.today-highlight {
outline: 2px solid #005fcb;
outline-offset: 2px;
border-radius: 6px;
padding: 2px 6px;
color: #005fcb;
font-weight: bold;
background-color: transparent !important;
}
body {
font-family: Arial, sans-serif;
background: #f5f5fc;
padding: 20px;
margin: 0;
}
.month-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.month-nav button {
background: black;
color: red;
border: none;
padding: 5px 12px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
}
.calendar-container {
position: relative;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.day {
background-size: cover;
background-position: center;
border: 2px solid #000;
border-radius: 12px;
padding: 10px;
position: relative;
cursor: pointer;
text-align: center;
color: #33302e;
font-weight: bold;
min-height: 120px;
}
.match-text {
font-size: 14px;
margin-top: 6px;
background: rgba(0,0,0,0.6);
border-radius: 6px;
padding: 4px;
}
.calendar-tooltip {
opacity: 0;
transition: opacity 0.3s ease;
background: #fff;
color: #000;
padding: 20px;
text-align: left;
border-radius: 10px;
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
width: 95%;
max-width: 900px;
box-shadow: 0 0 10px rgba(0,0,0,0.25);
display: none;
}
.calendar-tooltip.show {
display: block;
opacity: 1;
}
.calendar-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 0.3s ease;
display: none;
z-index: 998;
}
.calendar-overlay.show {
display: block;
opacity: 1;
}
.tooltip-section {
margin-bottom: 12px;
}
.tooltip-section h4 {
margin: 5px 0;
font-size: 16px;
text-decoration: underline;
}
.logo {
max-height: 40px;
margin-bottom: 10px;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.weekend {
background-color: #FF6347;
color: white;
font-weight: bold;
}

const calendar = document.getElementById(‘calendar’);
const monthTitle = document.getElementById(‘monthTitle’);
const hoverDetails = document.getElementById(‘hoverDetails’);
const hoverTitle = document.getElementById(‘hoverTitle’);
const hoverTime = document.getElementById(‘hoverTime’);
const hoverLocation = document.getElementById(‘hoverLocation’);
const hoverParticipants = document.getElementById(‘hoverParticipants’);
const hoverHighlights = document.getElementById(‘hoverHighlights’);
const hoverLogo = document.getElementById(‘hoverLogo’);

let currentMonthIndex = 0;
let pinnedDay = null;
const months = [“May 2025”];

const events = {
“May 2025”: {
10: {
title: “WWE Backlash”,
location: “St. Louis, MO – Enterprise Center”,
time: “5:30 PM”,
participants: [“Roman Reigns”, “The Rock”, “Becky Lynch”, “Rhea Ripley”, “Owens”, “Zayn”],
highlights: [“Roman Reigns vs The Rock”, “Becky Lynch vs Rhea Ripley”],
matches: [“Link>>>”],
logo: “https://upload.wikimedia.org/wikipedia/en/5/5d/WWE_Backlash_2021_logo.png”,
background: “https://i.imgur.com/NJKZC9F.jpeg”
},
12: {
title: “Monday Night RAW”,
location: “Louisville, KY – KFC Yum! Center”,
time: “7:30 PM”,
participants: [“Cody Rhodes”, “Sami Zayn”],
highlights: [“Cody Rhodes vs Sami Zayn”],
matches: [“Link>>>”],
logo: “https://upload.wikimedia.org/wikipedia/en/3/3d/WWE_Raw_logo_2019.png”,
background: “https://i.imgur.com/xQrsV5j.jpeg”
}
}
};

function renderCalendar() {
const monthName = months[currentMonthIndex];
monthTitle.textContent = monthName;
calendar.innerHTML = “”;

const [monthStr, yearStr] = monthName.split(” “);
const monthIndex = new Date(`${monthStr} 1, ${yearStr}`).getMonth();
const year = parseInt(yearStr);
const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();

const firstDayOfMonth = new Date(year, monthIndex, 1).getDay();
for (let j = 0; j < firstDayOfMonth; j++) {
const emptyDiv = document.createElement('div');
emptyDiv.className = 'day';
calendar.appendChild(emptyDiv);
}
const today = new Date();
for (let i = 1; i <= daysInMonth; i++) {
const dayDiv = document.createElement('div');
dayDiv.className = 'day';
const isToday = today.getFullYear() === year && today.getMonth() === monthIndex && today.getDate() === i;
const isWeekend = new Date(year, monthIndex, i).getDay() === 0 || new Date(year, monthIndex, i).getDay() === 6;
dayDiv.innerHTML = `${i}`;

const ev = events[monthName][i];
if (ev) {
dayDiv.style.backgroundImage = `url(‘${ev.background}’)`;
dayDiv.setAttribute(‘data-title’, ev.title);
dayDiv.setAttribute(‘data-time’, ev.time);
dayDiv.setAttribute(‘data-location’, ev.location);

// Kiểm tra nếu trận đấu là “Roman Reigns vs The Rock” và tô màu đỏ
let matchText = `

`;
if (ev.highlights[0] === “Roman Reigns vs The Rock”) {
matchText = `

`; // Thêm màu đỏ cho trận này
}

dayDiv.innerHTML += matchText;

dayDiv.addEventListener(‘mouseenter’, () => {
if (pinnedDay) return;
hoverTitle.textContent = ev.title;
hoverTime.textContent = ev.time;
hoverLocation.textContent = ev.location;
hoverParticipants.innerHTML = ev.participants.map(p => `

${p}

`).join(”);
hoverMatches.innerHTML = ev.matches.map(m => `

${m}

`).join(”);
hoverHighlights.innerHTML = ev.highlights.map(h => `

${h}

`).join(”);
hoverLogo.src = ev.logo;
document.getElementById(‘calendarOverlay’).classList.add(‘show’);
hoverDetails.classList.add(‘show’);
});

dayDiv.addEventListener(‘mouseleave’, () => {
if (pinnedDay) return;
setTimeout(() => {
document.getElementById(‘calendarOverlay’).classList.remove(‘show’);
hoverDetails.classList.remove(‘show’);
}, 300);
});
} else {
dayDiv.innerHTML += `

`;
}

calendar.appendChild(dayDiv);

dayDiv.addEventListener(‘click’, () => {
pinnedDay = i;
hoverTitle.textContent = ev.title;
hoverTime.textContent = ev.time;
hoverLocation.textContent = ev.location;
hoverParticipants.innerHTML = ev.participants.map(p => `

${p}

`).join(”);
hoverMatches.innerHTML = ev.matches.map(m => `

${m}

`).join(”);
hoverHighlights.innerHTML = ev.highlights.map(h => `

${h}

`).join(”);
hoverLogo.src = ev.logo;
document.getElementById(‘calendarOverlay’).classList.add(‘show’);
hoverDetails.classList.add(‘show’);
});
}
}

function changeMonth(direction) {
currentMonthIndex += direction;
if (currentMonthIndex = months.length) currentMonthIndex = 0;
renderCalendar();
}

renderCalendar();