Show week day and week number

Look what I built
1

I wrote some Javascript code to show week day and week number beside all journal page titles, like below:

Screen Shot 2022-11-23 at 1.20.46 PM
Screen Shot 2022-11-23 at 1.20.46 PM1108Ă—134 35.2 KB

I was going to make it a plugin, but writing it as a plugin I did not find a way to have access to the HTML elements I needed to modify. Instead I added a javascript file at my-graph/logseq/custom.js with the following:

function insertInfo() {
  console.log('inserting info');
  var journalTitles = document.querySelectorAll("span.title") // in page view this will find the page title
  if (journalTitles.length == 0)
    journalTitles = document.querySelectorAll("h1.title") // in journals view, this will find all visible journal titles
  for (let t of journalTitles) {
    addToElement(t)
  }
}
function addToElement(t) {
  const dateRegexMatch = new RegExp('([A-Z]\\w+) (\\d+)\\w\\w, (\\d\\d\\d\\d)$').exec(t.textContent)
  
  if (!!dateRegexMatch && dateRegexMatch.length == 4) {
      const journalDate = new Date(dateRegexMatch[1] + " " + dateRegexMatch[2] + " " + dateRegexMatch[3])
      
      const startDate = new Date(journalDate.getFullYear(), 0, 1);
      const days = Math.floor((journalDate - startDate) / (24 * 60 * 60 * 1000));
      const weekNumber = Math.ceil(days / 7);
      
      const dayOfWeekName = journalDate.toLocaleString(
        'default', {weekday: 'long'}
      );

      const span = document.createElement("span")
      span.style = "opacity:0.5;font-size:0.7em"
      span.innerHTML = " " + dayOfWeekName + ', Week ' + weekNumber
      t.append(span)
  }
}
var t=setInterval(insertInfo,1000);

And that did it for me. Feel free to use the code if you wish.

2

This is amazing! I wonder if you can help making something similar for yyyy-MM-dd type of date? I tried figuring out from your posted code but this is above my skill level for now.

3

This is what I have been wishing for! Unfortunately, same as the commentor above, I tried it in my graph but does not seem to work with date format do MMM yyyy.

4

Thanks, I love it! That’s just what I needed. No need to make it a plugin if you can just drop the file into the vault, in my opinion.

1 Like
5

Try this out

function addToElement(t) {
    const dateRegexMatch = new RegExp("(\\d\\d\\d\\d)-(\\d\\d)-(\\d\\d)$").exec(
        t.textContent
    );

    if (!!dateRegexMatch && dateRegexMatch.length == 4) {
        const journalDate = new Date(
            dateRegexMatch[1] +
                " " +
                dateRegexMatch[2] +
                " " +
                dateRegexMatch[3]
        );

        const startDate = new Date(journalDate.getFullYear(), 0, 1);
        const days = Math.floor(
            (journalDate - startDate) / (24 * 60 * 60 * 1000)
        );
        const weekNumber = Math.ceil(days / 7);

        const dayOfWeekName = journalDate.toLocaleString("default", {
            weekday: "long",
        });

        const span = document.createElement("span");
        span.style = "opacity:0.5;font-size:0.7em";
        span.innerHTML = " " + dayOfWeekName + ", Week " + weekNumber;
        t.append(span);
    }
}
var t = setInterval(insertInfo, 1000);
1 Like
6

Awesome, this looks really cool! I am just starting out with the advanced capabilities of Logseq. I tried adding a costum.js to " my-graph/logseq/custom.js", then I closed and opened Logseq but I did not see any changes. Is there anything else I need to do? :slight_smile:

7

It showed up for me after I pressed Command-R. If you use Windows, it should be Control-R.

I did not restart Logseq.

8

Thank you Sri! :slight_smile: It worked now. I had an old logseq path that I was not using anymore. That’s why it didn’t work. Now I am just wondering, how I can get the :spiral_calendar: into the journal?

9

Add this custom CSS:

/*add calendar icon to the left of journal titles*/
.journal-title .title::before,
.is-journals .title::before {
  content: "🗓️";
  font-size: 0.75em;
  margin-right: 10px;
  vertical-align: text-bottom;
}
2 Likes
10

Thank you for the code! :slight_smile:

11

Awesome! Any chance this can be made extensible to work with the various date formats supported by Logseq?