Java-Scripts.net

Diet Tracker Calendar

Visualize your streaks. This script dynamically generates a calendar grid for the current month and allows interactive toggling of day statuses.

Current Month

Click a day: Green = Good, Red = Bad, Gray = Reset

Copy the Script

<div id="calContainer"></div>

<script>
function createCalendar() {
    var d = new Date();
    var daysInMonth = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
    var html = "";
    
    for(var i=1; i<=daysInMonth; i++) {
        html += "<button onclick='toggleDay(this)' style='width:30px; height:30px; margin:2px;'>" + i + "</button>";
    }
    document.getElementById("calContainer").innerHTML = html;
}

function toggleDay(btn) {
    if (btn.style.backgroundColor == "green") {
        btn.style.backgroundColor = "red";
    } else if (btn.style.backgroundColor == "red") {
        btn.style.backgroundColor = ""; // Reset
    } else {
        btn.style.backgroundColor = "green";
    }
}

createCalendar();
</script>

Frequently Asked Questions

No. This is a frontend visualization script. To save the user's progress (green/red days), you would need to save the state to LocalStorage or a database.

Yes. It is generic. You can use it for workout tracking, study streaks, or any daily habit.

Yes. The script calculates the correct number of days in the month using `new Date(y, m, 0).getDate()`.