Build Amazing Timelines
How to use it
Choose the timeline
or timeline-labeled
tag
-
timeline
tagRequires
+
at the beginning of each line:-
each event has 3
+
s in total: 1 for time, 1 for title and 1 for content -
you can separate them with empty lines if it's easier for you to write
-
-
-
timeline-labeled
tag- each event has a corresponding label (
date
,title
andcontent
) that starts the line - you can separate them with empty lines if it's easier for you to write
- Example
- each event has a corresponding label (
[]
is optional!
You can use []
at the beginning of the code-block to add pre-written classes or your own classes to the wrapper.
Example: [spaced-paragraph, your-class, even-more]
Can be used for timeline
and timeline-labeled
tag
Example:
```timeline-labeled
[line-5, body-3, active-color-interactive-accent-hover]
date: 13th April 1969
title: Enim sit amet venenatis urna
content:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```
Just a snippet
Use this file as a snippet using this template!
Customize
Using pre-written classes for line
, body
and the active color
:
-
line:
- preview (soon, for now test it in obsidian)
- classes:
- line-2
- line-3
- line-4
- line-5
-
body:
- preview (soon, for now test it in obsidian)
- classes:
- body-2
- body-3
- body-4
-
active color:
- it uses obsidian's css variables as active colors, so it matches the theme
- default active color is background-modifier-success
- if you want your own color use
--timeline-active-color
css variable attached to.timeline
class.timeline --timeline-active-color: #00c137
- preview (soon, for now test it in obsidian)
- classes:
- active-color-background-modifier-success
- active-color-background-modifier-error
- active-color-background-modifier-error-hover
- active-color-text-accent
- active-color-text-accent-hover
- active-color-text-error
- active-color-text-error-hover
- active-color-text-selection
- active-color-interactive-accent
- active-color-interactive-accent-hover
- active-color-interactive-success
Plugin does not activate on iOS
Hi @George-debug I just realised that the plugin would not load after its last update on iOS. I mostly use Obsidian for mobile and cannot use it anymore. It works fine on my Mac though. Would you know why and/or require more info on my Obsidian setup? Thanks in advance
iOS: 14.8 Obsidian for iOS: 1.0.4
[Feature Request]Support formatting out of codeblock
Thanks for making this great plugin. A structured timeline view will be extremely useful for chronologically taking evergreen notes on researchers, academic debates, status of specic fields and so on.
However I was disappointed to find that linking inside codeblocks isn't fully supported by Obsidan. The links are clickable, but won't create a link between notes in graph and notes won't appear in the "linked mentions" panel. So it would be great for this plugin to read formatting outside codeblocks to fit the Zettelkasten-philosophy of Obsidian.
One suggestion on formatting is nested bullet points, which has also a clear view in edit mode:
[feature request] Timelines spacing proportional to the dates
Hi there Is there a way to be able to have kind of spacing between paragraphs wich is proportional to the sate spacing, ie, if I have:Jan, Feb, Dec that Jan & Feb are close to each other and Dec is further down. Of course this should be optional and there would be the need to use date formats and a date format qualifier but just managing this via empty lines should be doable.
What do you think ?? Rui
spaced-paragraph and white/black classes don't seem to do anything
This timeline text (no
spaced-paragraph
class):And this timeline text (with a
spaced-paragraph
class):Appear to render exactly the same. Is the
spaced-paragraph
class supposed to change the way the text renders?Suggestion & Discussion: Ability to use Markdown markup in timeline elements (plugin)
1. Idea Overview
The main idea is to allow the user to use Markdown markup in various elements of the plugin.
Here I am talking about:
2. Entering syntax
Now the
+
symbol is used to add an event to the timeline. I find it inconvenient for several reasons:2.1. Here I suggest
Introduce a simple, human-readable syntax, for example:
date:
event-title:
event-content: / event-desc:
Here I have tried to depict human-readable examples. They are not definitive, perhaps you will find better options.
3. Allow the user to use Markdown markup in various elements
Why? So that the user has the ability to style the timeline with Markdown markup. Little room for styling as well as content management.
3.1. Examples of use
date: ### 26 December <br> 1991
event title: # Dissolution of the Soviet Union
event-content: The dissolution of the Soviet Union[b] (1988–1991) was the process of internal disintegration within the Soviet Union, which began with growing unrest in its various constituent republics developing into an incessant political and legislative conflict between the republics and the central government, and ended when the leaders of three primal republics (the Russian SFSR, the Ukrainian SSR and the Byelorussian SSR) declared it no longer existed, later accompanied by 11 more republics, resulting in President Mikhail Gorbachev having to resign and what was left of the Soviet parliament formally acknowledging what had already taken place.
Note the markdown syntax. The user can select the size of the header (H1-H6). Italic or Bold or strikethrough text.
3.2. Allowed syntax for timeline elements
To avoid turning the timeline into a visual circus, I propose to introduce some restrictions for elements.
date (Allowed syntax)
<br>
(already work)event-title (Allowed syntax)
<br>
(already work)event-description (Allowed syntax)
<br>
(already work)3.3. Default state
I also suggest adding a default state. This is for cases where, for example, the user does not use markdown for timeline elements.
In this case, the timeline is displayed "by default". For example as you have it now.
PS: If the idea(s) turn out to be interesting, I can describe more timeline styling features in stages. But do not overload it too much, so that it remains simple and readable.
Plugin Test
Hi!
I tested the plugin and ran into two small problems. I will describe them below and also attach technical information. If you want, you can put each problem in a separate issue for convenience.
Some tech info
Issue 1
I tried using headers and it didn't work. I get the text generated instead.
Some Pics
Issue 2
It seemed to me that the distance between the header (e.g. H1) and the timeline is not enough. This makes the text formatting look bad.
I think it would be nice to add some «air» between the timeline and the headings. If it's possible of course.
Some Pics
Text vanishing after inserting YAML
Hi there,
Thank you for the great plugin!
I'm just having some trouble making the plugin work correctly. After adding
--- cssclass: timeline ---
to the top of the note, all the remaining text in the note (that is not part of the timeline) can no longer be seen. The text is still there because the word count reflects this and it will appear in reading view but I can't edit the remaining content.I thought it might have to do with live preview so I switched this off. I've also tried toggling between editing and reading mode and toggling between live preview and source mode.
Any help or advice is greatly appreciated.
Problematic interaction with Tasks plugin
After updating a bunch of plugins I noted a strange behavior with nodes populating in the graph that shouldn't be there. I eventually traced back this to Timeline interacting with the Tasks plugins query results.
I use the Tasks plugin to query tasks in my daily notes, ranging all from no due dates, due within 7 days and all sorts of things. These are located on the bottom of my daily notes. These results from Tasks plugin queries do not create nodes in the graph as is the expected behavior.
With Timeline activated since the latest update, as soon as a task is toggled within a note the graph is populated with nodes from these Tasks query results, suddenly filling up the local graph with a lot of nodes. If Obsidian is restarted the graph is no longer populated, but as soon as another task is toggled it will populate with these again.
Looking in the latest changelog I see "The plugin creates nodes between files", could this be the cause for this behavior? Would it be possible to detect if Tasks is used with Timeline, or even a setting that can be toggled, to prevent this from happening?
Thank you for a great plugin.
Suggestion: Move the text to the second line in `line for time`
Hi!
I thought it would be cool to be able to move the line for time text to a new line with the command
<br>
for example. This will allow you to add long expressions to the header without affecting the reading.As you may have noticed, if you add too long text to the header, the whole time line starts to "plush". I recorded a short video with an example below.
Video example
https://user-images.githubusercontent.com/14002721/125280292-89c6dc80-e31d-11eb-83ea-708b11675cbf.mov
Clarification
Hay the instructions on customization in you plugin page are a bit unintuitive, I can't figure out how to use the css classes in the timeline code. I get it maybe intuitive to someone who learned css but I don't have that unfortunately.
similar plugin for flow chart possible
hi developer, the timeline plugin is super great , because its super simple and doesnt interrupt workflow.
is it possible to make a similar plugin for simple flow chart (if possible with one or 2 branches)
thank you
Request - ability to change colour of single entries
Currently the colours only get applied at start of the timeline block and is applied to the whole timeline.
I'd like to see the ability to apply colours to single entries , e.g. red to highlight significant event
Does this plugin supports periods ?
Is it possible to add periods to the timeline (= an event with a specified length) ? If so, is it possible to add several parallel periods ?
Exemple of desired behavior (from Aeon Timeline) :
Thank you
Timeline Export to HTML/website
Hi, I'm loving the timeline - thank you so much for the work put into developing this idea. It's been working great - using a nice image embedded with each time block.
However, as a non-native obsidian plugin, it does not play well with Publish. When publishing dataview files, I have been able to copy the code from the developer tools, but I am having no luck doing that with the timeline. Do you have any advice as to which part of the code I need to copy over to create a stand alone file that I can use with obsidian Publish?
Thanks!
Nik
Feature Request: Horizontal Scroll by Date/Time in the timeline
A Horizontal Scroll bar for timeline that scrolls by date/time in the order mentioned.
So the date scroll will scroll from : < --- (first) pre-17th century -------------------------------- 17th century (last) --->
Feature Request : Adding End Date for a Content
Ability to Add Date Start and Date End for a particular content.
Maybe, can add in something like this:
Integration of Aeon Timeline
I bought this a long time ago: https://timeline.app/
What keeps me from using it is the overlap with my writing tools. I want to avoid ending up with text changes in two places. Aeon offers sync with Scrivener, but I never warmed up to the design and methodology of that program. They also offer ulysses, but I do not work on Mac.
Syncing Obsidian with Aeon would be GREAT, though!!!
Here, they explain the feature with Scrivener and Ulyseses: https://timeline.app/integrations/