JavaScript Calendar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ប្រតិទិនប្រចាំឆ្នាំ</title>
<style>
.calendar-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.month {
width: 280px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
text-align: center;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 5px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
h2 {
margin: 0;
}
.sunday {
color: red;
}
</style>
</head>
<body>
<h1 style="text-align: center;">ប្រតិទិនប្រចាំឆ្នាំ</h1>
<div style="text-align: center; margin-bottom: 20px;">
<label for="year">ជ្រើសរើសឆ្នាំ</label>
<input type="number" id="year" value="2025">
<button onclick="generate12MonthCalendar()">បង្ហាញ</button>
</div>
<div class="calendar-container" id="calendar"></div>
<script>
function generate12MonthCalendar() {
const year = parseInt(document.getElementById('year').value);
const calendarContainer = document.getElementById('calendar');
calendarContainer.innerHTML = ''; // Clear previous calendars
for (let month = 0; month < 12; month++) {
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
let calendarHTML = `<div class="month">
<h2>${new Date(year, month).toLocaleString('default', { month: 'long' })} ${year}</h2>
<table>
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>`;
let date = 1;
for (let i = 0; i < 6; i++) { // Maximum 6 rows for a calendar
calendarHTML += '<tr>';
for (let j = 0; j < 7; j++) { // 7 days in a week
if (i === 0 && j < firstDay) {
calendarHTML += '<td></td>'; // Empty cells before the first day
} else if (date > daysInMonth) {
calendarHTML += '<td></td>'; // Empty cells after the last day
} else {
const isSunday = j === 0; // Sunday is the first day of the week
const cellClass = isSunday ? 'sunday' : '';
calendarHTML += `<td class="${cellClass}">${date}</td>`;
date++;
}
}
calendarHTML += '</tr>';
if (date > daysInMonth) break;
}
calendarHTML += '</table></div>';
calendarContainer.innerHTML += calendarHTML;
}
}
</script>
</body>
</html>
Comments
Post a Comment