Show week day and week number

Customization Look what I built
21

Hi! I’m new to logseq and definitely not a JS expert.
Thank you (everyone, not just the latest iteration!) for this snippet! I like that this is not interval based, but it gets applied only when I scroll a journal so that a new date pops up, or when I navigate to a journal page. Upon launch, nothing gets added to the title. Is there a way to force the first appearance?

22

Add to new line

setTimeout(() => 
document.querySelectorAll("span.title, h1.title").forEach(addExtendedDate), 500);
23

This is amazing! Thank you for your code :smiling_face_with_three_hearts:

24

Hi, appreciate the sharing, but instead of using week number of the current year. I tweaked it into week number of the current month.

function addExtendedDate(titleElement) {
    // check if element already has date info
    const existingSpan = titleElement.querySelector("span");
    if (existingSpan) return;

    // remove ordinal suffixes from date
    const journalDate = new Date(Date.parse(titleElement.textContent.replace(/(\d+)(st|nd|rd|th)/, "$1")));
    if (!isFinite(journalDate)) return;

    // calculate dates
    const dayOfWeekName = new Intl.DateTimeFormat("default", {weekday: "long"}).format(journalDate);

    var firstWeekday = new Date(journalDate.getFullYear(), journalDate.getMonth(), 1).getDay();
    var offsetDate = journalDate.getDate() + firstWeekday - 1;
    var weekNumberInCurrentMonth = Math.floor(offsetDate / 7) + 1;
    /* this is the original code
    const days = Math.ceil((journalDate - new Date(journalDate.getFullYear(), 0, 1)) / 86400000);
    const weekNumber = Math.ceil(days / 7);
    */

    // apply styles
    const dateInfoElement = document.createElement("span");
    dateInfoElement.style = "opacity:0.5;font-size:0.7em";
    dateInfoElement.textContent = ` ${dayOfWeekName}, Week ${weekNumberInCurrentMonth}`;

    titleElement.appendChild(dateInfoElement);
}

const observer = new MutationObserver(() => {
    document.querySelectorAll("span.title, h1.title").forEach(addExtendedDate);
});


observer.observe(document.getElementById("main-content-container"), {
    attributes: true,
    subtree: true,
    attributeFilter: ["class"],
});

Hope it’d help anyone.