Javascript calendar in markor - examples and ideas #2278

harshad1 · 2024-05-09T19:52:50Z

harshad1
May 9, 2024
Collaborator

With some (a lot) of help from chat gpt I made the following:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
        body { display: flex; background: #333; min-height: 100vh; padding: 0 10px; align-items: center; justify-content: center; color: #fff; }
        .calendar-container { background: #222; width: 450px; border-radius: 10px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); padding: 20px; }
        .calendar-container header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
        .calendar-navigation { display: flex; align-items: center; }
        .calendar-navigation span { cursor: pointer; padding: 5px 10px; user-select: none; background: #444; border-radius: 5px; margin: 0 5px; }
        .year-selector { margin-right: 10px; background: #444; color: #fff; border: none; padding: 5px 10px; border-radius: 5px; }
        .calendar-body ul { list-style: none; flex-wrap: wrap; display: flex; text-align: center; }
        .calendar-body li { width: calc(100% / 7); padding: 10px 0; cursor: pointer; }
        .calendar-dates li.active { background-color: #555; border-radius: 5px; }
        .calendar-dates li.inactive { color: #666 }
        .today-button, .reset-button, .yesterday-button { display: block; width: 100%; text-align: center; padding: 10px; margin-top: 20px; background: #444; color: #fff; cursor: pointer; border-radius: 5px; }
        .reset-button { margin-bottom: 20px; }
        .year-selector, .calendar-current-date { font-size: 140%; }
    </style>
</head>
<body>
    <div class="calendar-container">
        <span class="reset-button">Reset</span>
        <header class="calendar-header">
            <select class="year-selector"></select>
            <p class="calendar-current-date"></p>
            <div class="calendar-navigation">
                <span id="calendar-prev">&#9664;</span> <!-- Left arrow -->
                <span id="calendar-next">&#9654;</span> <!-- Right arrow -->
            </div>
        </header>
        <div class="calendar-body">
            <ul class="calendar-weekdays">
                <li>Sun</li>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
            </ul>
            <ul class="calendar-dates"></ul>
        </div>
        <span class="today-button">Today</span>
        <span class="yesterday-button">Yesterday</span>
    </div>
    <script>
        const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        const TODAY = new Date();
        const OFFSET = TODAY.getTimezoneOffset() * 60000;

        let currentYear = TODAY.getFullYear();
        let currentMonth = TODAY.getMonth();

        const day = document.querySelector(".calendar-dates");
        const monthHeader = document.querySelector(".calendar-current-date");
        const prevNextIcons = document.querySelectorAll(".calendar-navigation span");
        const yearSelector = document.querySelector(".year-selector");
        const resetButton = document.querySelector(".reset-button");
        const todayButton = document.querySelector(".today-button");
        const yesterdayButton = document.querySelector(".yesterday-button");

        const setupYearSelector = () => {
            for (let i = currentYear - 10; i <= currentYear; i++) {
                const option = document.createElement("option");
                option.textContent = i;
                option.value = i;
                if (i === currentYear) {
                    option.selected = true;
                }
                yearSelector.appendChild(option);
            }
        };

        const makePath = (date) => {
            const ds = date.toISOString().split('T')[0];;
            return `./${ds.slice(0, 4)}/${ds.slice(0, 7)}/${ds}.md`;
        }

        const updateCalendar = () => {
            const dayone = new Date(currentYear, currentMonth, 1).getDay();
            const lastdate = new Date(currentYear, currentMonth + 1, 0).getDate();
            const dayend = new Date(currentYear, currentMonth, lastdate).getDay();
            const monthlastdate = new Date(currentYear, currentMonth, 0).getDate();

            const today = new Date() 
            const todayDay = today.getDate()
            const isTodayMonth = (today.getFullYear() === currentYear && today.getMonth() === currentMonth)

            let lit = "";
            for (let i = dayone; i > 0; i--) {
                lit += `<li class="inactive">${monthlastdate - i + 1}</li>`;
            }
            for (let i = 1; i <= lastdate; i++) {
                const cls = (isTodayMonth && i === todayDay) ? "active" : "";
                const path = makePath(new Date(currentYear, currentMonth, i))
                lit += `<li class="${cls}" data-path="${path}">${i}</li>`;
            }
            for (let i = dayend; i < 6; i++) {
                lit += `<li class="inactive">${i - dayend + 1}</li>`
            }
            
            const req = (7 * 6) - 1
            const count = (dayone - 1) + lastdate + (6 - dayend)
            for (let i = count; i < req; i++) {
                lit += `<li class="inactive">&nbsp</li>`
            }

            monthHeader.innerText = `${MONTHS[currentMonth]} ${currentYear}`;
            day.innerHTML = lit;
        };

        setupYearSelector();
        updateCalendar();

        prevNextIcons.forEach(icon => {
            icon.addEventListener("click", () => {
                currentMonth = icon.id === "calendar-prev" ? currentMonth - 1 : currentMonth + 1;
                if (currentMonth < 0) {
                    currentMonth = 11;
                    currentYear--;
                } else if (currentMonth > 11) {
                    currentMonth = 0;
                    currentYear++;
                }
                yearSelector.value = currentYear;
                updateCalendar();
            });
        });

        resetButton.addEventListener("click", () => {
            const date = new Date();
            currentYear = date.getFullYear();
            currentMonth = date.getMonth();
            yearSelector.value = currentYear;
            updateCalendar();
        });
        
        const mkTodayPath = () => {
            // 3 hours ago
            const today = new Date(Date.now() - (3 * 60 * 60 * 1000) - OFFSET)
            return makePath(today)
        };
        
        todayButton.addEventListener("click", () => {
            window.open(mkTodayPath())
        });

        yesterdayButton.addEventListener("click", () => {
            // 27 hours ago
            const today = new Date(Date.now() - (27 * 60 * 60 * 1000) - OFFSET)
            const path = makePath(today)
            window.open(path)
        });

        yearSelector.addEventListener("change", (event) => {
            currentYear = parseInt(event.target.value, 10);
            updateCalendar();
        });

        document.addEventListener("click", function(event) {
            if (event.target.tagName === "LI" && event.target.dataset.path) {
                window.open(event.target.dataset.path)
            }
        });

        // location.href = mkTodayPath()
    </script>
</body>
</html>

When opened in markor in view mode this shows a calendar:

Clicking on a date takes me to my daily note on that date. There are today and yesterday buttons to make this easier. (Uncomment that last line to automatically switch to today's log file).

I have a had a lot of success with javascript in markor for various small tasks. Thinking about ways to do even more here.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript calendar in markor - examples and ideas #2278

{{title}}

Replies: 0 comments

Select a reply

Javascript calendar in markor - examples and ideas #2278

harshad1 May 9, 2024 Collaborator

Replies: 0 comments

harshad1
May 9, 2024
Collaborator