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.

Benko111 · 2024-07-08T13:30:40Z

Benko111
Jul 8, 2024

True, even more with HTML. I use Markor all the time for importing websites which I like, getting inspiration how they did certain implementations of css or js functions. It's just so damn hassle free and convinient once you're used to a certain work flow. A new script needs testing? Throw it up in Markor. To be able to see console messages or have some sort of inspector tool replacement I'm combining it with Eruda. That enabled me to write little debugging scripts, aggregating data from the console for further debugging processes. This is the first mobile coding experience I actually enjoy, having tried so many approaches before. Top work.

As soon as I find time to dive into Android Studio (no experience at all) I'm gonna try to built some front end-building specific features for myself (or anyone who wants them). Convenient block selecting would be one of the first. Selecting and copying half a page of minified code is hell at the moment.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript calendar in markor - examples and ideas #2278

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Javascript calendar in markor - examples and ideas #2278

harshad1 May 9, 2024 Collaborator

Replies: 1 comment

Benko111 Jul 8, 2024

harshad1
May 9, 2024
Collaborator

Benko111
Jul 8, 2024