Create a timeline view of all notes with the specified combination of tags
Generate a chronological timeline of all notes with the specified set of tags.
VIDEO BRIEF EXAMPLE: https://www.youtube.com/watch?v=_gtpZDXWcrM
To render a timeline in a note:
timeline
tag to the note, either in the YAML frontmatter or somewhere else.timeline
code block or a timeline HTML comment for static rendering.Create the following code block where a timeline is to be inserted:
You can also have an horizontal timeline by:
timeline
with timeline-vis
in the code block,tags=test
startDate=1700
endDate=2030
fivHeight=600
minDate=200
The render block takes a single input which is the list of tags by which to filter timeline tagged notes (e.g. in the above example block, ONLY notes with all three tags timeline
, test
and now
).
Insert the following HTML comment where a statically rendered timeline should be inserted:
<!--TIMELINE BEGIN tags='test;now'--><!--TIMELINE END-->
Use the Timelines: Render Timeline
command to generate a timeline statically. Running the command again will replace everything between the two comments (BEGIN/END) with a freshly rendered timeline.
Timeline event changes will not be detected using this method, but as it is creating static HTML, the generated content will work be readable without Obsidian (on GitHub, via Obsidian publish, etc.).
For a note to be included in a timeline the following must be valid:
timeline
tag must be included in that note---
tags: [timeline, test, me, now]
---
The note must have all the specified tags to be included in the search. This note example above will be included in all of the following searches (assuming its timeline span info is valid): test
, test;me
, test;me;now
, etc.
The note must contain at least one timeline span
or div
element containing the event information, see the next section.
When generating a timeline, a note will be ignored in the following cases:
timeline
tag (the tag specified in plugin settings)Timeline events must specify the following:
ob-timelines
must be specified.All other fields are optional.
Invalid timeline events will be skipped.
A timeline entry can be created using a <span></span>
or <div></div>
tag, with the following attributes:
<span
class='ob-timelines'
data-date='2000-10-10-00'
data-title='Another Event'
data-class='orange'
data-img = 'Timeline Example/Timeline_2.jpg'
data-type='range'
data-end='2000-10-20-00'>
A second event!
</span>
Timeline span and div entries (.ob-timelines class) are hidden in preview by default, however, if you wish to display content, try a snippet like this:
/* Render the ob-timelines span or div elements as inline blocks that use an italic font */
.ob-timelines {
display: inline-block !important;
font-style: italic;
}
/* Use the before pseudo element to display attributes of the span or div */
.ob-timelines::before {
content: "🔖 " attr(data-date) ": " attr(data-title) ". ";
color: lilac;
font-weight: 500;
}
Using the above snippet, a span like this:
<span class='ob-timelines' data-date='1499-03-28-00' data-title="An example"></span>
would be rendered as:
The most important and essential info for the timeline entry is the date. Timeline entries can be used for fantasy timelines, leading to a simplified set of rules for valid dates.
A valid date is specified as YEAR-MONTH-DAY-HOUR
.
-123-45-678-9
is a valid date.Rightmost-segments containing only zeros will be omitted when the timeline is generated, for example:
2300-02-00-00
will display as 2300-02
2300-00-00-00
will display as 2300
Event sorting is performed by converting the date into a number. For fantasy calendars, you may need to pad months, days, or hours with zeros to ensure sorting works properly.
2300-02-00-00
is sorted as 2300020000
-234-02-00-00
is sorted as -234020000
For statically generated timelines, events that occur at the same time are grouped, and are either prepended or appended to a list based on your timeline sorting preference.
http
& absolute local path
will render. Obsidian release v0.10.13
blocked obsidian links for background images.quotes / double quotes and ticks
from title and text (no longer needed)css class
allowing to customize each card of the timelineMultiple Events per note
are now allowed. All spans on a single note will be displayed on the timeline (previously only first span was presented i.e. 1 card event per note)PR Contribution by https://github.com/ebullient
Added timeline
render block:
Tags searched will include both inline
& YAML
tags
Removed the Add Timeline
command as it is no longer needed with the addition of the render block
Licenced under the MIT License.