Thiết kế website giá rẻ

Question

I have a problem, because when I click first eg today button, then from api i get slice with titles with date:today, but when i click next or prev month and then i go back to current month, when i click today nothing happens. I think problem is in renderCalendar so maybe js problem or htmx problem

Thanks from advance

package components

import "github.com/janicaleksander/BeMotivated/types"
import "strconv"

templ DashboardProduction(){
@Base(Calendar(),ChartBox())
}


templ Calendar(){
<head>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


    <style>
....

    </style>
</head>

<body>

<div class="container">
    <div class="calendar">
        <div class="header">
            <div class="month"></div>
            <div class="btns">
                <!-- today -->
                <div class="btn today">
                    <span class="material-symbols-outlined">today</span>
                </div>
                <!-- previous month -->
                <div class="btn prev">
                    <span class="material-symbols-outlined">chevron_left</span>
                </div>
                <!-- next month -->
                <div class="btn next">
                    <span class="material-symbols-outlined">chevron_right</span>
                </div>
            </div>
        </div>

        <div class="weekdays">
            <div class="day">Mon</div>
            <div class="day">Tue</div>
            <div class="day">Wed</div>
            <div class="day">Thu</div>
            <div class="day">Fri</div>
            <div class="day">Sat</div>
            <div class="day">Sun</div>
        </div>
        <div class="days">
            <!-- render days with js -->
        </div>
        <br>
        <div id="calendar-task">
        </div>

        <div id="chart" >
            <form >

            </form>
        </div>
        <div id="ctn"></div>

    </div>
</div>

<script>


    function getDayOfWeekIndex(date, month, year) {
        const dateObj = new Date(year, month - 1, date);
        const dayNumber = dateObj.getDay();
        return dayNumber;
    }

    const daysContainer = document.querySelector(".days");
    const nextBtn = document.querySelector(".next");
    const prevBtn = document.querySelector(".prev");
    const todayBtn = document.querySelector(".today");
    const month = document.querySelector(".month");

    const months = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
    ];

    const days = [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat","Sun"];

    const date = new Date();
    let currentMonth = date.getMonth();
    let currentYear = date.getFullYear();

    const renderCalendar = () => {
        date.setDate(1);
        const firstDay = new Date(currentYear, currentMonth, 1); // data pierwszego dnia miesciaca
        const lastDay = new Date(currentYear, currentMonth + 1, 0); // data ostatniego dnia miesciaca


        const lastDayIndex = lastDay.getDay(); // indeks ostatenigo dnia tygodnie od 0 do 6 0 to niedziela 6 to sobota
        const lastDayDate = lastDay.getDate(); // cyferka ostatniego dnia tygodznia


        const prevLastDay = new Date(currentYear, currentMonth, 0); // data ostatniego dnia last miesiaca
        const prevLastDayDate = prevLastDay.getDate(); // cyferka ostatniego dnia last miesiaca
        var nextDays =0;
        if(lastDayIndex===0){
            const nextDays = 0;
        }else{
            nextDays = 7 - lastDayIndex -1;
        }

        month.innerHTML = `${months[currentMonth]} ${currentYear}`;

        let days = "";
        // firstDay.getDay zwraca indeks pierwszego dnia 0 niedziela 6 sobota
        let k=0;
        if(firstDay.getDay()!==0) {
            for (let x = firstDay.getDay() - 1 ; x > 0; x--) {
                days += `<button class="day prev">${prevLastDayDate - x+1}</button>`;
                k++;

            }
        }
        k = 6;
        if(firstDay.getDay()===0) {
            for (let x = 6 ; x > 0; x--) {
                days += `<button class="day prev">${prevLastDayDate - k+1}</button>`;
                k--;
            }
        }

        for (let i = 1; i <= lastDayDate; i++) {
            if (
                i === new Date().getDate() &&
                currentMonth === new Date().getMonth() &&
                currentYear === new Date().getFullYear()
            ) {
                days += `<button  hx-post="/api/get-task" hx-target="#calendar-task" hx-swap="innerHTML"  class="day today" name="show" value="${currentYear},${currentMonth+1},${i}">${i}</button>`;

            } else {
                days += `<button hx-post="/api/get-task" hx-target="#calendar-task" hx-swap="innerHTML"  class="day " name="show" value="${currentYear},${currentMonth+1},${i}">${i}</button>`;
            }
        }

        for (let j = 1; j <= nextDays+1; j++) {
            days += `<button  hx-post="/api/get-task" hx-target="#calendar-task" hx-swap="innerHTML"  class="day" name="show" value="${currentYear},${currentMonth+1},${j}">${j}</button>`;

        }

        daysContainer.innerHTML = days;
        hideTodayBtn();
    };

    nextBtn.addEventListener("click", () => {
        currentMonth++;
        if (currentMonth > 11) {
            currentMonth = 0;
            currentYear++;
        }
        renderCalendar();
    });

    prevBtn.addEventListener("click", () => {
        currentMonth--;
        if (currentMonth < 0) {
            currentMonth = 11;
            currentYear--;
        }
        renderCalendar();
    });

    todayBtn.addEventListener("click", () => {
        currentMonth = date.getMonth();
        currentYear = date.getFullYear();
        renderCalendar();
    });

    function hideTodayBtn() {
        if (
            currentMonth === new Date().getMonth() &&
            currentYear === new Date().getFullYear()
        ) {
            todayBtn.style.display = "none";
        } else {
            todayBtn.style.display = "flex";
        }
    }

    renderCalendar();

    function handleClick(event){
        alert(event + ' clicked');
    }



</script>

</body>
}

Thiết kế website giá rẻ

Danh mục

Problem with golang plus htmx plus javascript