Richardsl / heatmap-calendar-obsidian

An Obsidian plugin for displaying data in a calendar similar to the github activity calendar
Apache License 2.0
623 stars 103 forks source link

FEATURE REQUEST: link to daily note on hover #12

Closed sundevista closed 2 years ago

sundevista commented 2 years ago

It would be nice to be able to jump to a specific note when hovering over a square

arsenty commented 2 years ago

@ka1tzyu, here is simple solution:

calendarData.entries.push({
        date: page.file.name,
        intensity: intensity,
        content: await dv.span(`[](${page.file.name})`)
})

and custom css to expand clickable area on entire a square:

.heatmap-calendar-boxes li {
    position: relative;
}
.heatmap-calendar-boxes li:not(.task-list-item)::before {
    content: unset;
}
.heatmap-calendar-boxes .internal-link {
    text-decoration: none;
    position: absolute;
    width: 100%;
    height: 100%;
}
Woodams commented 1 year ago

Hi, when I add

content: await dv.span(`[](${page.file.name})`)

I see this and the cells are not clickable.

image

I've ensured Preview core plugin is enabled and I added that custom css to Obsidian's css snippet section (not sure if that's where it's supposed to go).

Here is my Dataview snippet

let metric = "caffeine"
dv.span(metric)
const calendarData = { entries: [], }
    for (let page of dv.pages('"Daily"').where(p => p[metric])) { 
//      dv.span("<br>" + page.file.name)      // uncomment for troubleshooting 
        // Title is required to be YYYY-MM-DD
        // Converting to ll (Mon dd, YYYY)
        let date          = moment(page.file.name, "ll");  
        let formattedDate = date.format('YYYY-MM-DD');

        calendarData.entries.push({ 
            date     : formattedDate,         // (required) Format YYYY-MM-DD
            intensity: page[metric],         // (required) the data you want to track, auto-maps colors
            content  : await dv.span(`[](${page.file.name})`), //for hover preview
            color    : "obsidian",
        }) 
    }
    renderHeatmapCalendar(this.container, calendarData)

front-matter

---
alias: 
tags: daily
outlook: neutral
exercise: 
- tricep-push-down
- squat
- seated-row
- pull-ups
- seated-leg-press
- deltoid-circles
calories: 0
caffeine: 200
alcohol: 0
weight: 162.5
thc: 0
---

If I remove that line then it looks like a proper calendar. New to JS and obsidian so would appreciate a hand!

lksrpp commented 8 months ago

Hi @Woodams,

The problem I just stumbled across the same problem. It is caused by how your settings define the link formatting. The one in the example is a classic markdown link, while you probably have the wikilinks format enabled in the Obsidian settings.

The solution Swap this line:

content  : await dv.span(`[](${page.file.name})`), //for hover preview

With this one:

content: await dv.span(`[[${page.file.name}|]]`), //for hover preview