I tried to modify main.js and style.css code and then implement the weekly heatmap, adding a function called "renderWeekHeatmapCalendar" next to the renderHeatmapCalendar. The modified file is attached.
It enables users to display weekly heatmap data, like this.
And here is how we call this function in Obsidian.
const propertyToShow = ["","","","" ] //Only four properties is acceptable. If you want more, please change the css file-.heatmap-week-calendar-properties,.heatmap-week-calendar-boxes - grid-template-rows- repeat 4
const calendarData = {
year:2023,
colors: "default",
showCurrentDayBorder: true, // (optional) defaults to true
defaultEntryIntensity: 4, // (optional) defaults to 4
intensityScaleStart: 10, // (optional) defaults to lowest value passed to entries.intensity
intensityScaleEnd: 100, // (optional) defaults to highest value passed to entries.intensity
entries: [], // (required) populated in the DataviewJS loop below
}
const today = new Date()
const currentDayOfWeek = today.getDay()
const currentTime = today.getTime()
const oneDayMilliseconds = 24 * 60 * 60 * 1000
const mondayOffset = ( currentDayOfWeek + 6) % 7
const nearestMondayTimestamp = currentTime - (mondayOffset * oneDayMilliseconds);
const sundayOffset = (7 - currentDayOfWeek) % 7
const nearestSundayTimestamp = currentTime + (sundayOffset * oneDayMilliseconds)
const nearestMonday = new Date(nearestMondayTimestamp);
const nearestSunday = new Date(nearestSundayTimestamp);
let filenames = [];
let currentDate = new Date(nearestMonday)
while (currentDate <= nearestSunday)
{
const formattedDate = currentDate.toISOString().slice(0, 10);
filenames.push(formattedDate);
currentDate = new Date(currentDate.getTime() + oneDayMilliseconds)
}
const pages = []
for (const filename of filenames)
{
const page = dv.page(`2023/${filename}.md`) ?? dv.page("2023/default.md")
pages.push(page)
}
for (let page of pages)
{
for (let heatproperty of propertyToShow){
calendarData.entries.push({
date: page.file.name,
intensity: page[heatproperty]??0,
content: await dv.span(`[](${page.file.name})`)})
}
}
dv.span("**Weekly Habit Tracker**")
renderWeekHeatmapCalendar(this.container, calendarData,propertyToShow)
As I'm a beginner in Javascript and CSS, there might be some errors. And also there is a limitation that user can only track 4 habits, same as the setting in css file. And if you have any suggestion, please let me know.
Hi everybody,
I tried to modify main.js and style.css code and then implement the weekly heatmap, adding a function called "renderWeekHeatmapCalendar" next to the renderHeatmapCalendar. The modified file is attached.
It enables users to display weekly heatmap data, like this.![image](https://github.com/Richardsl/heatmap-calendar-obsidian/assets/50686783/6888441a-4928-495e-9ed0-8f1cab3b4ed1)
And here is how we call this function in Obsidian.
As I'm a beginner in Javascript and CSS, there might be some errors. And also there is a limitation that user can only track 4 habits, same as the setting in css file. And if you have any suggestion, please let me know.
SelfHeatmap.zip