Pastebin for Calendar and Instructions

Be sure the calendar things are within a folder in this structure, or prepare to rewrite the link refs.
Or you can download all files as a zip here: https://files.catbox.moe/ef67y1.zip and open with liveserver in VSCode to see


[public]
	[calendar]
		[stickers]
			golden lotus.png
			pink lotus.png
			...
	calendar.html
	calendar.css
	calendar.js
	stickers.js
index.html
--------------------------------------------------------------------
calendar.css: https://pastebin.com/y8tXzdta
This ensures the days and weeks line up and the grid area scales to maximalize the space given to it, you can change the colors with :root's variables and change the height/width of things.
--------------------------------------------------------------------
calendar.html: https://pastebin.com/9vFt9LDq
This is the framework for the calendar to add to your page.
--------------------------------------------------------------------
index.html: https://pastebin.com/E0psSkBm

You only need to add about 5 lines of code to wherever you want your calendar to be.
Add this in your header:
    <link href="calendar/calendar.css" rel="stylesheet" type="text/css" media="all">

Add the <div id= "content-body"></div> to where you want to put the calendar in your body.

Add this below the body (Must be after the body so that all the html is loaded and it can search for div class = "content-body")
  <script type="module">
    import { ShowCalendar } from '../calendar/calendar.js';
    ShowCalendar(); // auto-load calendar on page load
  </script>
ShowCalendar will search for the class ".content-body" to write calendar.html in it, but you can replace it with whatever id you want

--------------------------------------------------------------------
stickers.js: https://pastebin.com/2QTHhGCc

- LoadMyHabits: reads async from the sheets (meaning it will wait until the sheet is read before running the code)
- GetStickers takes the date, reads the corresponding row for that date
For You:
Feel free to change the logic for the sticker (eg. create stickers representing 2.5k, 5k, 7.5k, 10k steps)
Feel free to change the types of stickers
In the future, you/I can update LoadMyHabits to read from different Google sheets and tabs by changing the logic in the string and making either an array or json object to store different links to different sheets

--------------------------------------------------------------------
calendar.js: https://pastebin.com/KcQ4TyZU

Simple logic to update the calendar per current day.
For You:
important thing to note is this section of the for loop, you can change it depending on how you want to add the stickers.
await means wait for the GetStickers function to return, because it may be waiting to finish reading the Google sheets.

  datedivs += '<div class = "date">';
  const stickerHTML = await GetSticker(i + 1); // +1 because your sheet uses 1-based days
  datedivs += stickerHTML;
--------------------------------------------------------------------