Using calendar tags/emoji as a student

[ChickensInAPearTree]

I love how much utility the tags/emoji features add to the calendar as a student and wanted to share how it improved things for me. These features made it much easier for me to track exams, major due dates, and when semester breaks were coming up. Here's an example of what my calendar looks like now:

I used tags and emoji to:

• Create circular colored badges with a single letter denoting which class has something important going on that day.
• A separate tag to color the date red for exams.
• A tag so I can make weekdays look the same as my weekend coloring to denote days when classes are out during the semester, such as when Thanksgiving break arrives.
• A tag to denote holiday cell coloring.
• CSS to add a white badge circle to go behind the emoji to make it more visible. I then use emoji for the holiday designations like Thanksgiving.
• I use the star for important items from the example CSS to denote other important events. Really love this, which was what got me going down the rabbit hole of customizing the rest of the calendar!

I also recolored the active file (my accent color is too close to my exam color, so I wanted it make it clear - here it's the blue cell. And I added a yellow bottom border to today's file just to make it stand out a bit more to me.

Here's the CSS, it's probably pretty ugly and inefficient but it gets it done:

/* color exam days red with black text */
#calendar-container [data-tags~="calendar/exam"] {
  color: black;
  --color-background-day: crimson;
}
#calendar-container .today{
	border-bottom: 5px solid yellow; /* add a yellow underline */
}
/* I use this to denote days we don't have class during the semester */
#calendar-container [data-tags~="calendar/vacation"] {
	--color-background-day: #505050; /* note this matches my weekend color value */
	border-radius: 0px;
	margin: -1px; /* without this there was a gap between cells */
}
/* holiday cell coloring */
#calendar-container [data-tags~="calendar/holiday"] {
  color: black;
  --color-background-day: chartreuse;
  margin: -1px; /* without this it had a gap around the edges */
}
/* I used the sample code to add a star to the calendar for important tagged items, omitting here for brevity */
/* preference to turn off dots */
#calendar-container .dot-container {
  display: none;
}
/* color the weekends to my preference, based off the sample CSS */
#calendar-container {
	--color-background-weekend: #505050;
	border-collapse: collapse;
}
/* example of a class badge tag */
#calendar-container [data-tags~="calendar/PSYC"]::before{
	background-color: yellow; /* the color of the class badge */
	border-radius: 50%;
	height:18px;
	width:18px;
	font-size: 8;
	color: black;
	align-content: center;
	vertical-align: center;
	display:block;
	content:"P"; /* the letter I use to denote the class */
	top:-6px;
	right:-5.5px;
	position: absolute;
	z-index: 2;
}
/* this adds a white circle behind the emoji tag for visibility - helpful if you too tend to run Obsidian zoomed out pretty far which makes them harder to see */
#calendar-container [data-emoji-tag]::before{
	background-color: white;
	border-radius: 50%;
	height:18px;
	width:18px;
	font-size: 8;
	color: black;
	align-content: center;
	vertical-align: center;
	display:block;
	content:"";
	top:-6px;
	right:-5.5px;
	position: absolute;
	z-index: 2; /* this controls the relative layer position, notice it is lower than what is set for the emoji */
}

/* this is the basically emoji information from the sample CSS but with z-index considered */
#calendar-container [data-emoji-tag]::after {
  content: attr(data-emoji-tag);
  position: absolute;
  top: -4px;
  right: 4px;
  height: 8px;
  width: 8px;
  z-index: 3; /* notice the z index is higher than for the background circle */
}
/* recolor the active selected file in the calendar */
#calendar-container .active{
	background: blue;
}