Obsidian Dataview Tracker

gistfile1.txt

```dataviewjs
const values = dv.pages('#daily').where(p => p.walk === 1);
const year = 2024;
let date = getStartDate(year);
let diff = dv.luxon.DateTime.utc(year + 1).diff(date, 'days').days;

// == Create calendar data ==
const calendar = [];
for (let i = 1; i <= diff; i++) {
    const color = !!values.find(p => p.file.name === date.toFormat('yyyy-MM-dd')) ? "green" : "rgba(255,255,255,0.1)";
    calendar[i] = { date: date, html: getDayEl(date, color)};
    date = addDays(date, 1);
}

// == Render calendar ==
let week = [];
let month = 0;
let monthLabel;
dv.el("div", `<span style='display:inline-block;font-size:small;margin-left:35px;word-spacing: 0.8em;'>M T W T F S S</span>`)
for (let i = 1; i <= diff; i++) {
	week.push(calendar[i].html);

	if (i % 7 === 0 || i === diff) {
		let monthLabel = getMonthEl(month, calendar[i].date.month);
		if (month !== calendar[i].date.month) month = calendar[i].date.month;
		const row = week.reduce((acc, curr) => `${acc} ${curr}`, "");
		dv.el("div", monthLabel + row);
		week = [];
	}
}

// == Functions ==
function addDays(date, days) {
	if (days < 0) {
		return dv.luxon.DateTime.fromMillis(date - dv.duration(`${(days*-1)}d`));
	}
    return dv.luxon.DateTime.fromMillis(date + dv.duration(`${days}d`));
}

function getDayEl(date, color) {
    return `<span style="width:18px;height:18px;border-radius:2px;background-color:${color};display:inline-block;font-size:4pt;" title="${date.toFormat('yyyy-MM-dd')}"></span>`;
}

function getMonthEl(oldMonth, newMonth) {
	const style = "display:inline-block;min-width:30px;font-size:small"
	if (oldMonth !== newMonth) {
		const monthLabel = dv.luxon.DateTime.utc(year, newMonth).toFormat('MMM');
		return `<span style='${style}'>${monthLabel}</span>`
	}

	return `<span style='${style}'>   </span>`;
}

// Make sure year starts on a Monday
function getStartDate(year) {
	let date = dv.luxon.DateTime.utc(year);

	if (date.weekday === 1) {
		return date;
	}

	return addDays(date, -1*(date.weekday - 1));
}
```