Syintax Highlighting

CSS Code

<style>
    /* Styling Umum */
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
    }

    .dashboard-container {
        max-width: 800px;
        margin: auto;
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /* Kalender */
    .calendar {
        width: 100%;
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        background: white;
        text-align: center;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .month-year {
        font-size: 20px;
        font-weight: bold;
    }

    .nav-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 18px;
    }

    .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        font-weight: bold;
        margin-top: 10px;
    }

    .days div {
        padding: 10px;
        text-align: center;
        background: #f7d456;
        color: #3b0764;
        border-radius: 5px;
    }
</style>
    

HTML Code

<div class="dashboard-container">
    <div class="calendar">
        <div class="header">
            <button id="prev" class="nav-btn" aria-label="Previous Month">
                <svg viewBox="0 0 24 24">
                    <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z"/>
                </svg>
            </button>
            <h2 id="month-year" class="month-year"></h2>
            <button id="next" class="nav-btn" aria-label="Next Month">
                <svg viewBox="0 0 24 24">
                    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/>
                </svg>
            </button>
        </div>
        <div class="days">
            <div>Min</div> <div>Sen</div> <div>Sel</div> <div>Rab</div> 
            <div>Kam</div> <div>Jum</div> <div>Sab</div>
        </div>
        <div id="calendar-grid"></div>
    </div>
</div>
    

JavaScript Code

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const monthYear = document.getElementById("month-year");
        const prevBtn = document.getElementById("prev");
        const nextBtn = document.getElementById("next");
        const calendarGrid = document.getElementById("calendar-grid");

        let currentDate = new Date();

        function getMonthName(monthIndex) {
            const months = [
                "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                "Juli", "Agustus", "September", "Oktober", "November", "Desember"
            ];
            return months[monthIndex];
        }

        function renderCalendar() {
            const month = currentDate.getMonth();
            const year = currentDate.getFullYear();
            monthYear.textContent = `${getMonthName(month)} ${year}`;
            calendarGrid.innerHTML = "";

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

            for (let i = 0; i < firstDay; i++) {
                const emptyCell = document.createElement("div");
                calendarGrid.appendChild(emptyCell);
            }

            for (let day = 1; day <= lastDate; day++) {
                const dayCell = document.createElement("div");
                dayCell.textContent = day;
                dayCell.classList.add("day");
                calendarGrid.appendChild(dayCell);
            }
        }

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

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

        renderCalendar();
    });
</script>