SVG Year timeline in your daily note (now a plugin)

[TanelTM]

If you enable JavaScript for DataView, you can add the timeline to your dashboard like this:

```dataviewjs
dv.el("div", "", { attr: { "data-timeline": moment().format("DDD") }})
```

I’m assuming you’ll have to reopen the dashboard to make it update the date tho.

If you do it like this, it should auto-update every hour:

```dataviewjs
const hour = 3600000 // in milliseconds

await dv.el("div", "", { attr: { "data-timeline": "" }})

function update() {
    if (document.querySelector("[data-timeline]"))
        document.querySelector("[data-timeline]").dataset.timeline = moment().format("DDD")
}

update()
setInterval(update, hour * 1)
```

But opening the dashboard file several times will create several timers - a timer will be created every time the note is rendered.
I would need to dig through dataview docs to see if there’s a way to clean up when the dataview is destroyed.
It’s probably not a big issue, but something to keep in mind.

[333]

First of all, an incredible job. I already have it included in my workflow.

Is there any way that when the pointer is placed over it, what you have written appears in each emoji? Thanks!

[333]

I answer myself… I have added a:

aria-label=“text to appear when mouse over”

[Dramac]

Hello there,
I am amazed by the dedicated moon phase calendar you have. Could you share how you implemented it please ?

[TanelTM]

I’m working on turning this into an actual plugin. I think I’ll release it some time next week.
Here’s a quick sneak-peek

[holroy]

And for the ultimate feature on this timeline, allow to drag the cursor and select the corresponding (or closest) daily note on the timeline…

[melmaninga]

Go @TanelTM !
Go! Go! Go!

How do I deliver a case of coffee??

[TanelTM]

That’s a good idea! I looked into it, it seems doable and I’ll try to add that feature.

@melmaninga I guess I’ll have to add one of those “Buy me a coffee” links as well

Thanks for the support!

[dml0sc]

Just reading the whole story now – that would be really great! Waiting to see the plugin coming along

[megclaypool]

So cool! Do you need beta testers?

[TanelTM]

GitHub - taneltm/obsidian-year-timeline: Add a configurable year timeline to...

@dml0sc “Some time next week” ended up being a couple of weeks, but here’s the first version of the timeline plugin!

I’ll figure out how to get it to the Obsidian community plugins list a bit later. For now, you can get the release files from here: Releases · taneltm/obsidian-year-timeline · GitHub
For now, you’ll need to place the files manually in your vault’s .obsidian/plugins/obsidian-year-timeline directory.

@holroy Added the daily notes integration you suggested. It’s experimental and disabled by default. You can hover over the timeline to see a tooltip of the target date, then when you click it should open the daily note on that date.

@megclaypool Of course I need testers! If something’s buggy or you get new ideas, it would be great if you could write them in the GitHub issues

It should be backwards compatible with the CSS snippet version of the timeline, so if you used that before. You should probably disable the CSS snippet when you use the plugin.

[dml0sc]

I’ll try it right away – thank you!

[Purintu]

Hey the emogie of my event dont show entierly

[TanelTM]

Edit:
If you have Appearance → Show inline title enabled in the settings and you try to move the timeline closer with a CSS snippet, then this can happen, because embeds have contain: paint !important applied to them.

Here’s a workaround:

[data-timeline] {
  margin-top: -2% !important; /* or some other method for moving the timeline */
}

.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false]:has([data-timeline]) {
  contain: unset !important;
}

I’ll include a proper fix in the next update.

---

Original post:
It looks like the timeline height is reduced.
Do you have any custom styling applied, maybe something that would reduce the gap between the timeline and the title?

Which theme are you using? Some of the ones I’ve tested are:

• Default
• Obsidian Nord
• Prism
• Minimal (Legacy)
• Sanctum (Legacy)

If you attempted to move the timeline closer to the title by changing the timeline height, that would result in this situation.
What you could do instead is:

[data-timeline] {
  margin-top: -2% !important;
}

This moves the timeline up based on the viewport width, and the rest of the content moves up as well. This way the timeline element actually overlaps with the title.
The downside of this is that the icons would appear on top of the date at the beginning of the year.

But if you haven’t made any custom modification, could you try to a different theme and let me know if it works for you in other themes? Also disable any CSS snippets or plugins which might affect page styling.

[Purintu]

Hi thanks for answering, so i use Prism and disabled the show inline title but doesn’t make change, i also disabled my snippets and it’s not the problem. And i don’t use the plugin but just this :

<svg viewBox="0 0 3760 100"> <title>Timeline 2023</title> <g class='bars'> <rect fill='#B3E5FC' x='0' width='310' height='25'></rect> <rect fill='#81D4FA' x='320' width='280' height='25'></rect> <rect fill='#4FC3F7' x='610' width='310' height='25'></rect> <rect fill='#29B6F6' x='930' width='300' height='25'></rect> <rect fill='#03A9F4' x='1240' width='310' height='25'></rect> <rect fill='#039BE5' x='1560' width='300' height='25'></rect> <rect fill='#0288D1' x='1870' width='310' height='25'></rect> <rect fill='#0277BD' x='2190' width='310' height='25'></rect> <rect fill='#01579B' x='2510' width='300' height='25'></rect> <rect fill='#004C8C' x='2820' width='310' height='25'></rect> <rect fill='#003A6C' x='3140' width='300' height='25'></rect> <rect fill='#002547' x='3450' width='310' height='25'></rect> 
</g> 
<g class='labels' style="font-size:50px;" text-anchor="middle"> <text fill='#747474' x='0' y='80' text-anchor="start">January</text> <text fill='#747474' x='320' y='80' text-anchor="start">February</text> <text fill='#747474' x='610' y='80' text-anchor="start">March</text> <text fill='#747474' x='930' y='80' text-anchor="start">April</text> <text fill='#747474' x='1240' y='80' text-anchor="start">May</text> <text fill='#747474' x='1560' y='80' text-anchor="start">June</text> <text fill='#747474' x='1870' y='80' text-anchor="start">July</text> <text fill='#747474' x='2190' y='80' text-anchor="start">August</text> <text fill='#747474' x='2510' y='80' text-anchor="start">September</text> <text fill='#747474' x='2820' y='80' text-anchor="start">October</text> <text fill='#747474' x='3140' y='80' text-anchor="start">November</text> <text fill='#747474' x='3450' y='80' text-anchor="start">December</text>
</g> 
<g class="events" style="font-size:100px;" text-anchor="middle">
<text fill="white" x="390" y="-5">☃️</text><!-- Winter festival --> 
<text fill="white" x="2590" y="-5">🎁</text><!-- Birthday --> 
<text fill="white" x="3690" y="-5">🎄</text><!-- Christmas -->
</g> 
<g> 
<circle cx='<% (tp.date.now("DDD") * 10) + ((tp.date.now("M") - 1) * 10) %>' cy="14" r="15" stroke="black" fill="white" />
</g>
</svg>

[TanelTM]

You can play with the svg tag’s viewBox parameters,
maybe something like viewBox="0 -100 3760 200" - that seemed to look fine for me.
Hope it helps!

[Purintu]

It worked thank you

[Jeffurry]

This is great! Love it. Is it possible to create timelines for smaller units of time: for week, or even the day?

[TanelTM]

With the plugin system, you can pretty much do anything, so yes, it’s possible.

Week timeline is quite easy to make. Month timeline is trickier because each month has a variable number of days. The Day timeline would be the trickiest, because you’d probably want to keep time timeline up-to-date with every minute that passes.

The Day timeline wouldn’t be possible with pure CSS/SVG, but would be possible with the help of dataviewjs or if it was built into the Timeline plugin.

How would you use the day timeline?

[TheHerborist]

I apologise for my apparent stupidity, but I don’t understand how to install the plugin

I downloaded the repo from git as a .zip and copied all the content in my vault/.obsidian/plugins/obsidian-year-timeline

This show up as a plugin in the community plugin tab but it fails to load every time I try to enable it. Looking at the files they show a lot of errors, starting from main.ref.ts at line 1 “Cannot find module ‘obsidian’ or its corresponding type declarations”

The error in the obsidian console is
Plugin failure: obsidian-year-timeline Error: ENOENT: no such file or directory, open ‘C:\Users\Fear\Documents\vaults\Main.obsidian\plugins\obsidian-year-timeline\main.js’

What am I doing wrong?