Went another way and used opacity. Worked great :)

Any way to make the bars showing ram be transparent?

@KirAsh4 said in Monthly Calendar View:

Oh I suppose …

Keep in mind that the styling can be changed by the user to whatever they want it to look like. The sky isn’t the limit … it’s their imagination. :)

can u post css for this?

Hi all!
I would really appreciate if someone would look my custom.css over. Im sure there are something thats not needed or causing conflictions. Would someone take a sec to look it over?

Edit; I am specially eager to work out why the lines below my headers are all different sizes.
I would like them ALL to be the same size except for the oneliner part.

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {
  margin: 20px;
  position: absolute;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  background: #000;
  background-Image: url("bg.jpg");
  background-size: cover;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

.region.fullscreen {
  position: absolute;
  top: -65px;
  left: -65px;
  right: -65px;
  bottom: -65px;
}
.clock .time {
  color: #99F;
  text-transform: uppercase;
}

.clock .date {
  color: #99F;
  text-transform: uppercase;
}

.calendar_monthly table {
  width: initial;
  float: left;
}

.calendar_monthly td {
  text-align: left !important;
}

.calendar_monthly calendar-table {
  text-align: left !important;
}

.calendar_monthly {
  color: #99F;
} 

.region.top.right .MMM-WunderGround table th {
  display: none; /* removes icons above max-temp, min-temp and % chance of rain */
}

.MMM-WunderGround .max-temp {
  color: #f66;
}

.MMM-WunderGround .min-temp {
  color: #0ff;
}

.MMM-WunderGround .weather-icon {
  color: #f93;
}

.MMM-WunderGround .day {
  color: #99F;
}

.MMM-WunderGround .large .bright {
  color: #99F;
}

.MMM-WunderGround table.small tr:first-child td {
  color: #99F;
}

.MMM-WunderGround .hourv {
  color: #99F;
}

/* Weather changes */
.region.top.center .MMM-WunderGround table.small,   /* selector for ONLY current weather Thanks to Strawberry-3.141 */
.region.top.right .MMM-WunderGround table:not(.small),   /* selector for ONLY weather forecast */
.region.top.right .MMM-WunderGround table.small td:nth-child(6)  {
  display: none;    /* this line and line above selector for NO rain amount column */
}

/* Newsfeed size & color */
.newsfeed div.light.small.dimmed {
  color: #99F;          /* color for newsfeed **source** */
  font-size: 24px;      /* size for newsfeed **source** */
}

/* Limit the width of the left and right columns to 300px */
.region.right .module-content,
.region.left .module-content {
  max-width: 320px;
}

/* Allows styling of row elements in tables.  You need this for the next rule */
table.small {
  border-collapse:collapse;
}

/* Add an underline to table rows - also requires the rule above this one */
table tr {
  border-bottom: solid 1px #222;
  border-bottom-color: #99F;
}

/* Blue colour styling for module headers */
.module-header {
  color: #99F;
  border-bottom-color: #99F;
  font-size: 15.5px;
  font-family: "Roboto";
  text-align: center;
}

/* MMM-OneLiner header color & border */
.MMM-Oneliner .header {
  color: #99F;
  border-bottom-color: #99F;
}

/* MMM-OneLiner text color & size & text type */
.MMM-Oneliner .wrapper {
  color: #99F;
  font-family: 'Bubbler One', sans-serif;
  font-size: 24px;
}

/* MMM-NetworkScanner icon color */
.MMM-NetworkScanner .fa-li {
  color: #FF8000;
}

/* MMM-Tools width & color change */
.MMM-Tools {
  width: 320px;
  color: #99F;
}

/* Fix for MMM-Tools - Place module anywhere */
.Tools .status_item .container {
  margin-top:0;
}

Completely unrelated, but how are you getting those lines under the header to be exactly the same length everywhere?

Perfect. I just included it in my custom.css
Thanks for the fix! :D

Great stuff! :) Seems like i can run the module fine anywhere but the bottom rows.

Probably not a bug at all, may be my custom css that is causing issues.
Tried min-width and width but really didnt fix anything.

I love this module. Very nicely made. But i would like to be able to show a calender with every single day + something special to show the holidays(i only use it for holidays now)
Can i create an ical with all the days in it and maybe have a certain color for holidays?

The issue seems pretty straightforward.
If i place it top_center. It works fine.
bottom_right (where i want it) without any other modules there, it displays the text only. No bars etc. If i re-add the module i already have there it doesnt show at all…