Atkins Calendar Script
A calendar that remembers. This script (modernized from the original "Atkins" version) acts as a personal diary. Users can click on any date to save a note. The next time they visit the page, their notes are retrieved from the browser's storage.
Planner Demo
Click any day to add a note. It will persist even if you refresh the page.
Copy the Script
<script>
// Modern Atkins Calendar (LocalStorage Version)
(function() {
var now = new Date();
var month = now.getMonth();
var year = now.getFullYear();
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var daysInMonth = new Date(year, month + 1, 0).getDate();
var firstDay = new Date(year, month, 1).getDay();
// Render Table
document.write('<style>td.cal-day{cursor:pointer;}</style>');
document.write('<table border="1" style="border-collapse:collapse; width:300px;">');
document.write('<tr><th colspan="7">' + months[month] + " " + year + '</th></tr>');
document.write('<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr><tr>');
var col = 0;
for (var i = 0; i < firstDay; i++) { document.write('<td></td>'); col++; }
for (var d = 1; d <= daysInMonth; d++) {
var key = "note_" + year + "-" + month + "-" + d;
var note = localStorage.getItem(key) || "";
var marker = note ? "<span style='color:red; font-size:10px;'>●</span>" : "";
document.write('<td class="cal-day" onclick="addNote(' + d + ')">' + d + ' ' + marker + '</td>');
col++;
if (col == 7) { document.write('</tr><tr>'); col = 0; }
}
document.write('</tr></table>');
// Interaction Function
window.addNote = function(day) {
var key = "note_" + year + "-" + month + "-" + day;
var current = localStorage.getItem(key) || "";
var text = prompt("Enter note for " + day + ":", current);
if (text !== null) {
localStorage.setItem(key, text);
location.reload(); // Refresh to show marker
}
};
})();
</script>Frequently Asked Questions
No. Data stored in LocalStorage is unencrypted and accessible by any script running on your domain. Do not use this to store passwords, credit card numbers, or sensitive personal data.
LocalStorage does not have an expiration date. The data will remain until the user manually clears their browser cache or local data.
This simplified script only shows the current month. To add navigation, you would need to wrap the logic in a function that accepts a `month` parameter and adds "Next/Prev" buttons to increment that parameter (similar to our "Popup Calendar" script).
