Create A Web-Based Calendar Similar To The Diagram

create Web Based Calendar Similar To The Diagra

Programming Assignment Create web-based calendar, similar to the diagram shown below, using ASP .NET. Here are some additional requirements: 1. DO NOT USE THE ASP .NET CALENDAR CONTROL. We are looking for you to build the solution from scratch using recommended software architectural practices. 2. The calendar will open up to the current date and will highlight that day in a configurable color. 3. The calendar will have two configurable year limits - a minimum year and a maximum. Once a user has reached January of the minimum year or December of the maximum year, the web-based calendar will no longer allow him to click on the "Move Previous" or "Move Next" image. (Note: Visually, you can make the image disappear, disable it, or change it to a "Not Allowed" icon.) 4. If a user wants the web-calendar to display day numbers in all cells of the calendar, then he/she can check the “Show Day Numbers From Other Months” checkbox that appears at the bottom of the calendar. Please submit your code as a Visual Studio 2010 or 2012 solution in a zip archive.

Paper For Above instruction

body {

font-family: Arial, sans-serif;

margin: 20px;

}

.calendar-container {

width: 100%;

max-width: 800px;

margin: auto;

}

h1 {

text-align: center;

}

table {

width: 100%;

border-collapse: collapse;

}

th {

background-color: #f2f2f2;

}

td {

width: 14.28%;

height: 80px;

border: 1px solid #ccc;

vertical-align: top;

text-align: right;

padding: 5px;

font-size: 14px;

}

.header-controls {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

}

.nav-buttons img {

cursor: pointer;

width: 30px;

height: 30px;

}

.disabled {

opacity: 0.5;

cursor: not-allowed;

}

highlight {

background-color: #87CEFA; / Configurable highlight color /

}

let currentDate = new Date();

let displayedYear = currentDate.getFullYear();

let displayedMonth = currentDate.getMonth();

const minYear = 2000; // Configurable minimum year

const maxYear = 2030; // Configurable maximum year

const highlightColor = '#FF6347'; // Configurable highlight color

let showOtherMonths = false;

function init() {

document.getElementById('showOtherMonths').addEventListener('change', function() {

showOtherMonths = this.checked;

renderCalendar();

});

document.getElementById('prevMonth').addEventListener('click', () => {

if (canMovePrev()) {

changeMonth(-1);

}

});

document.getElementById('nextMonth').addEventListener('click', () => {

if (canMoveNext()) {

changeMonth(1);

}

});

renderCalendar();

updateNavigationButtons();

}

function canMovePrev() {

// Prevent moving before min year

if (displayedYear === minYear && displayedMonth === 0) {

return false;

}

return true;

}

function canMoveNext() {

// Prevent moving beyond max year

if (displayedYear === maxYear && displayedMonth === 11) {

return false;

}

return true;

}

function updateNavigationButtons() {

const prevBtn = document.getElementById('prevMonth');

const nextBtn = document.getElementById('nextMonth');

if (!canMovePrev()) {

prevBtn.classList.add('disabled');

prevBtn.setAttribute('disabled', 'true');

} else {

prevBtn.classList.remove('disabled');

prevBtn.removeAttribute('disabled');

}

if (!canMoveNext()) {

nextBtn.classList.add('disabled');

nextBtn.setAttribute('disabled', 'true');

} else {

nextBtn.classList.remove('disabled');

nextBtn.removeAttribute('disabled');

}

}

function changeMonth(offset) {

displayedMonth += offset;

if (displayedMonth

if (displayedYear > minYear) {

displayedMonth = 11;

displayedYear--;

} else {

displayedMonth = 0; // Stay at the edge

}

} else if (displayedMonth > 11) {

if (displayedYear

displayedMonth = 0;

displayedYear++;

} else {

displayedMonth = 11; // Stay at the edge

}

}

renderCalendar();

updateNavigationButtons();

}

function renderCalendar() {

const calendarBody = document.getElementById('calendarBody');

calendarBody.innerHTML = '';

const firstDay = new Date(displayedYear, displayedMonth, 1);

const lastDay = new Date(displayedYear, displayedMonth + 1, 0);

const startDay = firstDay.getDay();

// Determine previous month. For days from other months

const prevMonthLastDate = new Date(displayedYear, displayedMonth, 0).getDate();

const totalCells = 42; // 6 weeks * 7 days

let dateNumber = 1;

let nextMonthDate = 1;

const today = new Date();

const todayDay = today.getDate();

const isCurrentMonth = (today.getFullYear() === displayedYear && today.getMonth() === displayedMonth);

for (let cell=0; cell

const row = Math.floor(cell / 7);

const column = cell % 7;

const td = document.createElement('td');

let cellDate;

// Cells before first day of current month

if (cell

// days from prior month

const day = prevMonthLastDate - startDay + cell + 1;

if (showOtherMonths) {

cellDate = new Date(displayedYear, displayedMonth -1, day);

td.textContent = day;

td.style.color = '#999'; // Dim color for other months

} else {

td.textContent = '';

td.style.backgroundColor = '#f9f9f9';

}

} else if (cell >= startDay + lastDay.getDate()) {

// days after current month's last day

const day = cell - startDay - lastDay.getDate() + nextMonthDate;

if (showOtherMonths) {

cellDate = new Date(displayedYear, displayedMonth +1, day);

td.textContent = day;

td.style.color = '#999';

} else {

td.textContent = '';

td.style.backgroundColor = '#f9f9f9';

}

} else {

// current month days

const dayNumber = cell - startDay + 1;

cellDate = new Date(displayedYear, displayedMonth, dayNumber);

td.textContent = dayNumber;

// Highlight current day if in current view

if (isCurrentMonth && dayNumber === todayDay) {

td.id = 'highlight';

td.style.backgroundColor = highlightColor;

}

}

// Optional: Add tooltip or data attribute

if (cellDate != null && showOtherMonths || (cellDate && cellDate.getMonth() === displayedMonth)) {

td.setAttribute('data-date', cellDate);

}

calendarBody.appendChild(td);

}

document.getElementById('monthYear').textContent =

`${getMonthName(displayedMonth)} ${displayedYear}`;

}

function getMonthName(index) {

const months = ['January', 'February', 'March', 'April', 'May', 'June',

'July', 'August', 'September', 'October', 'November', 'December'];

return months[index];

}

window.onload = init;