Here’s the CSS snippet version, and it scales.
https://gist.github.com/taneltm/471ded942978ce4bdca86e7889c0e426
7 Likes
Ah! Thank you so very much! 
I was able to guesswork my way around changing the marker to circle. I will post my solution to your git as a comment.
I’ve learned tons thanks to you!
2 Likes
Thanks for it!, i love it.
I love this, and I’ve been using a version of the timeline since I found this post a few months ago. I have noticed the “today” marker drifting out of sync backwards as the year has gone on. I think this is because the ‘{{Date:DDD}}0’ logic doesn’t account for the gaps between month blocks in designs which don’t implement a smooth gradient across a single year block. Adding 10px for each proceeding month accounts for the gaps in those timeline designs which start each successive block’s x value with a gap after the end of the last month.
I use Templater and by replacing the original DDD+“0” logic with ‘<% (tp.date.now(“DDD”) * 10) + ((tp.date.now(“M”) - 1) * 10) %>’ I get the today marker where it should be. Here in July, I’m adding 60 additional pixels for the six gaps up to the start of this month.
I hope somebody finds this useful. 
2 Likes
Thank you for addressing this issue - I would certainly find this useful if I understood it! 
Is this the line that you are referring to, that needs changing?..
<circle cx="<% tp.date.now("DDD", 0, tp.file.title) %>0" cy="14" r="16" stroke="black" fill="white" />
Sorry to be such a know-nothing
The marker does drift indeed, but how much it drifts depends on which version you’re using
I made a CodePen snippet to debug the drifting when I made the CSS snippet version and now I added a date selector to it, so it’s even easier to test the drift effect: https://codepen.io/taneltm/pen/eYyeyBe
For the CSS snippet version, the marker will drift on top of the month separator gap, but the first day of each month should be correct.
3 Likes
Change one of the double-quote pairs to single-quotes.
Thanks, I have another question, if I put this in the diary template, when I create the diary, I still can’t find the date in this place, but the above will work
Sorry for the delay in replying. Yes, that’s the Templater part that I updated. It took the day of the year and multiplied by ten by tagging a trailing zero. If you replace that with my update it does the same in math with the “* 10” but then adds ten more for each preceding gap (+ Month-1 * 10).
And no need to apologise. Not knowing something is not a crime. 
2 Likes
I know that the Daily Notes plugin will create a note with the title set to the date in “YYYY-MM-DD” format, so I use the tp.file.title function to get the date by referencing the note’s title, but you could use the tp.date.now() without that to get today’s date.
I use this:
# 📆Daily Notes for <% tp.date.now("ddd", 0, tp.file.title, "YYYY-MM-DD") %> [[<% tp.file.title %>]]
to get this:
# 📆Daily Notes for Tue [[2022-08-16]]
(Using the note title I can create a daily note in advance or retrospectively, title it for the required date, and the Templater code will correctly slot in the title/links etc. ) - Although I just realised that the timeline dot I carefully fixed doesn’t use the reference, so would be set for the date I created the note, not the date of the note title. I should make a note to fix that. 
1 Like
It seems that when Calendar created the diary, the template was called, but when the diary was not created successfully, the template could not find the file name (tp.file.title), which caused this place to fail.
That would make sense. I tried it here with the Calendar creating a random date’s Daily Note and it worked okay. Do you know why the initial note creation failed in your case?
If the journal 2022-08-19 is created first, it is normal to manually load the template. But if I load the template while creating the journal 2022-08-19, the template fails
I found the reason, it is a problem with the Templater plugin, just go back to 1.13.0 
Sorry again, I really can’t figure this out - I’ve been headscratching for a while now. What happens to the tp.file.title bit of the original code? That bit makes sure the correct date for my ‘daily note’ - without it the template aborts.
This is what I have…
<g> <circle cx="<% tp.date.now("DDD", 0, tp.file.title) %>0" cy="14" r="16" stroke="black" fill="white" /> </g>
and this is what I have tried )most recently)…
<g> <circle cx="<% (tp.date.now("DDD") * 10) + ((tp.date.now("M") - 1) * 10) %>0" cy="14" r="16" stroke="black" fill="white" /> </g>
Ahh, one moment – curly quotes might be the issue… Nope, the white marker disappears entirely!
The problem is the zero following the Templater code (i.e. %>0"). It’s making your cx value an order of magnitude larger than it should be. Just remove it and the calculation should work (i.e. %>").
Is there a way to show this on a note without dates or template plugin. I was thinking how to pass the date value to the circle tag in the code.
Ok i fixed this. I created a react component called timelinebar and then passed the days dynamically as props in the cx tag. Now the timeline is shown on any note and no need of only having daily note or templater installed. Just include the component on any note md file.
1Q. Doesnt the circle shows wrong position as we move towards the later part of the year? because the width of the sections are the months days*10 but the next month starts with addition of 10 in it. So that creates a lag on the circle marker when we see towards the later part of the year. Eg below 1st sep is showing in August.
1 Like