Heatmap calendar with checkmark property - Obsidian

[dresgonzalez13]

Heatmap calendar using a checkbox property

---

This is a quick example of any properties where there is a checkmark, in this case, I wanted to track the days I am praying (with a checkmark), see the properties below. (Oracion means prayer in Spanish)

---

Code (Raw)

dv.span("** 🙏 Prayer 🙏 **")

const calendarData = {
    year: 2023,
    colors: {
        dark: ["#491d8b"],
        purple: ["#8a3ffc"],
    },
    entries: []
}

for (let page of dv.pages('"daily notes"').where(p => p.Oracion)) {
    let color = page.Oracion === "true" ? "dark" : "purple";

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

// Add entries for unchecked pages
for (let page of dv.pages('"daily notes"').where(p => !p.Oracion)) {
    calendarData.entries.push({
        date: page.file.name,
        intensity: page.Oracion,
        content: await dv.span(`[](${page.file.name})`), 
        color: "dark"  // Set color to dark for unchecked entries
    });
}

renderHeatmapCalendar(this.container, calendarData);

---

Code breakdown

dv.span("** 🙏 Prayer 🙏 **") // Displays a section title for the code, emphasizing "Prayer."

const calendarData = { // Defines an object to store data for the heatmap.
    year: 2023, // Sets the year for the calendar data.
    colors: { // Defines color mappings for the heatmap.
        dark: ["#491d8b"],
        purple: ["#8a3ffc"],
    },
    entries: [] // Initializes an empty array to store data for each date.
}

for (let page of dv.pages('"daily notess"').where(p => p.Oracion)) { // Initiates a loop for checked pages related to prayer.
    let color = page.Oracion === "true" ? "dark" : "purple"; // Determines the color based on the value of the "Oracion" property.

    calendarData.entries.push({ // Adds an entry to calendarData.entries for each checked date.
        date: page.file.name, // Sets the date for the entry.
        intensity: page.Oracion, // Sets the intensity based on the "Oracion" property.
        content: await dv.span(`[](${page.file.name})`), // Generates a hover preview link for the note associated with the date.
        color: color // Assigns the determined color to the entry.
    });
}

// Add entries for unchecked pages
for (let page of dv.pages('"daily notes"').where(p => !p.Oracion)) { // Initiates a loop for unchecked pages related to prayer.
    calendarData.entries.push({ // Adds an entry to calendarData.entries for each unchecked date.
        date: page.file.name, // Sets the date for the entry.
        intensity: page.Oracion, // Sets the intensity based on the "Oracion" property.
        content: await dv.span(`[](${page.file.name})`), // Generates a hover preview link for the note associated with the date.
        color: "dark" // Sets the color to "dark" for unchecked entries.
    });
}

renderHeatmapCalendar(this.container, calendarData); // Renders the heatmap using the specified container and calendar data.

If you are looking for nice colors to use on your heatmap, I found this IBM color system