2025-11-04

Quarto Calendar is nearly done
- Load a calendar with dates from blog posts
- Indicate on the calendar days when a posting has occured.
- Click on a date and a link is populated with the required page.
- A div on the page is populated with the blog post.
  - Stop Quarto formating the page with headers and footers
  - Sort out the page structure.

As said in a previous post the script is split in to two sections. The first scans the posts and extracts the date and url link and encodes them into a JSON object, which is then stored on the page.

<% const events = []; %>
<%     items.forEach( item => { %>
<%         if (item.date) { %>
<%             const d = new Date(item.date); %>
<%             const year = d.getFullYear(); %>
<%             const month = d.getMonth() + 1; %>
<%             const day = d.getDate(); %>

<%             var date = month+"-"+day+"-"+year; %>
<%             var link = item.path; %>
<%             var event = { "date": date, "link": link } %>

<%             events.push(event); %>
<%         } %>
<%     }); %>
<% const serverData = { events: events }; %>

The second piece of code is executed in the browser, loads a JsCalendar, and then proceeds to process the JSON object and load the calendar with events. The clicked date enables a link which links to the required blog post page.

<script src="https://unpkg.com/simple-jscalendar@1.4.5/source/jsCalendar.min.js" integrity="sha384-F3Wc9EgweCL3C58eDn9902kdEH6bTDL9iW2JgwQxJYUIeudwhm4Wu9JhTkKJUtIJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/simple-jscalendar@1.4.5/source/jsCalendar.min.css" integrity="sha384-CTBW6RKuDwU/TWFl2qLavDqLuZtBzcGxBXY8WvQ0lShXglO/DsUvGkXza+6QTxs0" crossorigin="anonymous">

<div id="calendar"></div>
<div id="data-container" data-config="<%- JSON.stringify(serverData) %>"></div>

<b>Day  : </b><input id="my-input-a"><br>
<b>Link : </b><a id="anchor">link</a><br>
<div id="post">POST</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const container = document.getElementById("data-container");
        const jsonString = container.getAttribute("data-config");
        const data = JSON.parse(jsonString);
        const calendarElement = document.getElementById("calendar");
        const calendar = new jsCalendar(calendarElement);

        data.events.forEach( item => {
            var d = new Date(item.date);
            var year = d.getFullYear();
            var month = d.getMonth() + 1; 
            var day = d.getDate();     

            // hightlight event date
            calendar.select(day+"/"+month+"/"+year);

            var inputA = document.getElementById("my-input-a");
            var anchor = document.getElementById("anchor");

            // Add events
            calendar.onDateClick(function(event, date){
                const container = document.getElementById("data-container");
                const jsonString = container.getAttribute("data-config");
                const data = JSON.parse(jsonString);       
                
                data.events.forEach( event => {
                    var d = new Date(event.date);

                    if( d.getTime() === date.getTime()) {
                        inputA.value = date.toString();
                        anchor.href = event.link.replace("qmd", "html");

                        var post = document.getElementById("post");
                        post.innerHTML =  "<object type=\"text/html\" data=\""+link+"\"></object>";

                    }
                })
            });
        });

        // Refresh layout
        calendar.refresh();
    });
</script>