Untitled

unknown
plain_text
a month ago
4.9 kB
Indexable
Never
Here’s a breakdown of how you can implement a custom monthly calendar with pure JavaScript, HTML, and CSS:

1. HTML Structure

You will create a container for your calendar, including buttons for navigating between months and the date grid.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monthly Calendar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calendar-container">
        <div class="calendar-header">
            <button id="prevMonth">Previous</button>
            <div id="monthYear"></div>
            <button id="nextMonth">Next</button>
        </div>
        <div class="calendar-body">
            <div class="calendar-days">
                <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span>
                <span>Thu</span><span>Fri</span><span>Sat</span>
            </div>
            <div id="calendarDates" class="calendar-dates"></div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS for Styling

We can use pure CSS to style the calendar. It will involve styling the grid layout for the days and dates.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calendar-container {
    width: 300px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#monthYear {
    font-weight: bold;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
}

.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-top: 10px;
}

.calendar-dates div {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.calendar-dates div.disabled {
    color: #999;
    cursor: not-allowed;
}

3. JavaScript Logic

const monthYear = document.getElementById('monthYear');
const calendarDates = document.getElementById('calendarDates');
const prevMonthButton = document.getElementById('prevMonth');
const nextMonthButton = document.getElementById('nextMonth');

let currentDate = new Date();

function renderCalendar(date) {
    calendarDates.innerHTML = '';
    const year = date.getFullYear();
    const month = date.getMonth();

    monthYear.textContent = `${date.toLocaleString('default', { month: 'long' })} ${year}`;

    const firstDay = new Date(year, month, 1).getDay();
    const lastDate = new Date(year, month + 1, 0).getDate();
    const prevLastDate = new Date(year, month, 0).getDate();

    for (let i = 0; i < firstDay; i++) {
        const prevDateElement = document.createElement('div');
        prevDateElement.classList.add('disabled');
        prevDateElement.textContent = prevLastDate - firstDay + i + 1;
        calendarDates.appendChild(prevDateElement);
    }

    for (let i = 1; i <= lastDate; i++) {
        const dateElement = document.createElement('div');
        dateElement.textContent = i;
        if (date.getFullYear() === currentDate.getFullYear() &&
            date.getMonth() === currentDate.getMonth() &&
            i === currentDate.getDate()) {
            dateElement.classList.add('current');
        }

        dateElement.addEventListener('click', function() {
            const selectedDate = new Date(year, month, i);
            console.log(selectedDate);
        });

        calendarDates.appendChild(dateElement);
    }

    const remainingBoxes = 42 - (firstDay + lastDate);
    for (let i = 1; i <= remainingBoxes; i++) {
        const nextDateElement = document.createElement('div');
        nextDateElement.classList.add('disabled');
        nextDateElement.textContent = i;
        calendarDates.appendChild(nextDateElement);
    }
}

prevMonthButton.addEventListener('click', function() {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(currentDate);
});

nextMonthButton.addEventListener('click', function() {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar(currentDate);
});

renderCalendar(currentDate);

Key Points:

1. Date Object: The Date object is used to calculate the current month, year, first day of the month, and the number of days in a month.


2. Event Listeners: The event listeners on the "Next" and "Previous" buttons adjust the current date and rerender the calendar. Each date box has an event listener to console the selected date when clicked.


3. Disabled Dates: Dates from previous and next months are disabled by giving them the .disabled class.



This setup provides a simple, functional calendar that includes navigation between months, with disabled previous and future month dates.