Obsidian Heatmap calendar

Heatmap calendar is a visual representation of data where values are depicted using color gradient on Calendar , where each grid represents frequency and consistence and intensity of progress

Obsidian heatmap plugin can be very useful to track habit mood or finance, project progress etc. Maybe you have seen it various application like , GitHub , Leetcode, GeekforGeek and several other apps to track consistency and frequency

Image source: [Richardsl, Heatmap Calendar]

Setting Up Heatmap Calendar Plugin in Obsidian

1. To run this plugin, make sure you have installed Dataview Plugin, This plugin is like a super tool that helps you play around with and see the hidden details in your notes. It makes your collection of notes act like a smart database that you can easily search and organize
2. Go to Obsidian setting, Click Community plugin and browse search for Heatmap Calendar By Richardsl, and Install it

Image Source [Obsidian Window app]

3. Annotate The data you want to track, E.g. you want to track your daily Exercise or any other progress Just create a folder inside your vault , within single folder you can track many other activities you don’t need to create separate folder for each activity

Go to Obsidian settings and click on core plugin and mention the folder in which you want to store your daily note files

Image Source [Obsidian Window app]

Next time you will create your new daily note, it will go in this folder and In your daily note add some activities in properties you want to track E.g. I have added Money spent ,

To add new property, just mention three — — — at the top, It's better to create a template for daily not which will save you time, and you can avoid repetitive task, check out this template plugin blog

5. Create a Data view JS block where you want to display your progress

```dataviewjs

dv.span("**💸 Money Spent 💸**")

const calendarData = {
    entries: [],
}

for(let page of dv.pages('"progress"').where(p=>p.moneySpent)){

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

renderHeatmapCalendar(this.container, calendarData)

```

Make some changes in above code :

for(let page of dv.pages('"progress"').where(p=>p.moneySpent))
1.  Replace progress folder name with you folder name you have mentioned in daily 
note plugin 
where(p=>p.moneySpent)) Here replace moneySpent with your activity 
name you have added in daily notes property

For further customization, take a loot at documentation,And don’t hesitate to ask for any help in comment

Result :

Note : this result is based on my daily notes

Your thumbs up encourage to creators