6:00 PM to 6 PM

[mdefrancesco]

Is there a way to display the times on the hour without the minute zeroes?

So the events would look like

12:30 PM
1:30 PM
3 PM
4 PM
5:30 PM

thanks

[eouia]

It needs some tricks.

1. hide original time parts.
2. Prepend your custom time with eventTransformer function.

.CX3 .event.singleday .headline .time {
  display: none;
}

.CX3 .customTime {
  margin-right: 5px;
}

eventTransformer: (event) => {
	if (event.fullDayEvent) return event
	let time = new Date(+event.startDate)
	let timeFormat = (time.getMinutes() === 0) ? { hour: 'numeric', hour12: true } : { hour: 'numeric', minute: '2-digit' }
	let timeStr = time.toLocaleTimeString(['en-US'], timeFormat)
	event.title = `<span class="customTime">${timeStr}</span>` + event.title
	return event
}

[mdefrancesco]

ugh...that had no effect

[eouia]

What did you do and what happened?
Send me entire config.js and custom.css and then f possible, screenshot.

[mdefrancesco]

so i followed what you said in the above post. didnt have any effect so i started trying some things and nothing worked

Aside from Teslamate and a problem with what appears to be the Mosquitto Broker I have everything working pretty well. Just want to iron out the rest of these calendar tweaks. and somehow my legend turned red, not sure where that happened?

once i launch MM the calendar doesnt usually show up populated so i need the refresh and then it populates.

**this is my first time (obvioulsy) making one of these so its been a lot of learning on the fly so some of my solutions may nto be very elegant. Thanks again for the help

config.js

/* MagicMirror² Config Sample
*

• By Michael Teeuw https://michaelteeuw.nl

• MIT Licensed.

• For more information on how you can configure this file

• see https://docs.magicmirror.builders/configuration/introduction.html

• and https://docs.magicmirror.builders/modules/configuration.html
  */
  let config = {
  address: "localhost", // Address to listen on, can be:
  // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
  // - another specific IPv4/6 to listen on a specific interface
  // - "0.0.0.0", "::" to listen on any interface
  // Default, when address config is left out or empty, is "localhost"
  port: 8080,
  basePath: "/", // The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
  // you must set the sub path here. basePath must end with a /
  ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
  // or add a specific IPv4 of 192.168.1.5 :
  // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
  // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
  // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

  useHttps: false, // Support HTTPS or not, default "false" will use HTTP
  httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true
  httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true

  language: "en",
  locale: "en-US",
  logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
  timeFormat: 12,
  units: "imperial",
  // serverOnly: true/false/"local" ,
  // local for armv6l processors, default
  // starts serveronly and then starts chrome browser
  // false, default for all NON-armv6l devices
  // true, force serveronly mode, because you want to.. no UI on this device

  modules: [
  {
  module: "alert",
  },
  {
  module: "updatenotification",
  position: "top_bar"
  },
  {
  module: "clock",
  position: "top_left"
  },
  {
  module: "calendar",
  header: "US Holidays",
  //position: "top_left",
  config: {

  broadcastPastEvents: true,
  maximumEntries: 1000, // There was a change just before the release of 2.20.0 that may require setting this high to see all of your future events
  displaySymbol: true,
  wrapEvents: true,
  maxTitleLines: 20,
  colored: true,
  calendars: [

       {
   symbol: "calendar",
   name: "us_holiday",
   url: "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics",
   color: "#FFFF00",
  
   	},
   {
   //symbol: "fa-calendar-o",
   name: "ellen",
   url: "https://calendar.google.com/calendar/ical/xxxxxxxxxxxxxxx/public/basic.ics",
   color: "#90EE90",
   //class: 'ellen-calendar',
   
  
   	},
  
   {	
   //symbol: "fa-birthday-cake",
   name: "mark",
   url: "https://calendar.google.com/calendar/ical/xxxxxxxxxxxxxxxxxxxxxxx/public/basic.ics",
   color: "#6AC5FE",
   },
  

  ]
  }
  },

   									// TESLAMATE TOP RIGHT (NOT WORKING YET)
  

{
module: 'MMM-Teslamate',
position: 'top_right',
config: {
mqttServer: {
address: '192.168.1.182', // Server address or IP address of the MQTT broker
port: 1883, // Port number if other than default (1883)
//user: 'teslamate', // Leave out for no user
//password: 'xxxx', // Leave out for no password
},

    rangeDisplay: "%", // "%" or "range"
    imperial: true, //use imperial units (true = Miles & F) or metric (false = Km & C)

    carID: '1', // defaults to '1'; only override if you have multiple Teslas and want to display 
                // a specific car per instance of the module

    // set to true to enable both the graphic, and the additional stats 
    // (charge remaining, scheduled charge start, etc)
    hybridView: true,
    // size of the visible area
    sizeOptions: {
        // size of the icons + battery (above text)
        width: 450, // px, default: 450
        height: 203, // px, default: 203
        // the battery images itself
        batWitdh: 250, // px, default: 250
        batHeight: 75, // px, default: 75
        // visual distance reduction to the module above
        topOffset: -40, // px, default: -40
    },
    carImageOptions: {
        model: "my", // mx, ms (S pre-refresh), ? (S post-refresh)

        view: "STUD_3QTR", // STUD_SIDE works better for S/X

        // full list of option codes: https://tesla-api.timdorr.com/vehicle/optioncodes.
        // you need at least the color and the wheels. not all combos work.
        // also consult: https://teslaownersonline.com/threads/teslas-image-compositor.7089/
        options: "PPSB,W38B,PFP31,DV4W",

        // play with this until it looks about right.
        // tested values: 0 for m3/STUD_3QTR, 25 for ms/STUD_SIDE
        verticalOffset: 0,

        opacity: 0.5
    },

    // show inside and outside temperatures below the car image: when AC or preconditioning is running (default), always, or never
    showTemps: "hvac_on", // "always", "never"

    // time in seconds to wait before re-rendering the module on incoming data. prevents high CPU load due to re-rendering on every new data point during driving
    updatePeriod: 5,
}

},

								//BIG CALENDAR												

{
module: "MMM-CalendarExt3",
position: "top_bar",
//title: "calendarpalooza",
config: {
mode: "week",
//weekIndex: 3,
weeksInView: 8,
fontSize: 23,
displayLegend: true,
displaySymbol: true,
//this is important and can be used other places
eventTransformer: (event) => {
//if (event.title.includes("Chloe")) event.color = "red"; // Originally it was "green"
//keep this return event out so you can use multiple
//return event;
if (event.title.includes("Chloe work")) event.color = "red"; // Originally it was "green"

			return event;
			
			

		},
			
			//instanceId: "basicCalendar",
			//locale: 'de-DE',
			maxEventLines: 8,
			firstDayOfWeek: 7,
			calendars: [
			    {
    name: "us_holiday",
    showSymbol: true, // Set to true to show symbols only for this calendar
  },
			 
					
      ],
			calendarSet: ['us_holiday', 'ellen', 'mark'],

}
},
//BUFFALO WEATHER EMMA
{
module: "weather",
header: "Buffalo",
position: "top_right",
config: {
weatherProvider: "openweathermap",
type: "current",
location: "New York",
locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
},
//bottom row weather might not need it but it's cool
{
disabled: false,
module: "MMM-Climacell-Hourly",
position: "bottom_bar", // designed for bottom_bar(best) thirds should be good too
config: {
apiKey: "jce5LVm8srqrqeC64eWgKHROX9tV2xe3", // Get FREE API key from ClimaCell.com
ownTitle: "Current Condition is ",
tempUnits: "imperial", // imperial or metric
lat: '40.642021', // Chicago
lon: '-73.633949', // Chicago
css: "2",
playSounds: "no",
useHeader: true, // true if you want a header
header: "Oceanside, NY",
maxWidth: "100%",
updateInterval: 5 * 60 * 1000,
}
},
//CHANGE THE TITLE BUT ITS THE HOUR BY HOUR CALENDAR //tweaked nerdy jeff calendar
{
module: "MMM-MyCalendar",
header: "HERE'S A QUICK CALENDAR UPDATE",
position: "top_left", // This can be any of the regions. Best results in left or right regions.
config: {
colored: true,
fade: false,
calendars: [
{
url: "https://calendar.google.com/calendar/ical/xxxxxxxxxxxxxxxxxxxxxxx/public/basic.ics",
color: "#90EE90",
},
{ url: "https://calendar.google.com/calendar/ical/xxxxxxxxxxxxxxxxxxxxxxxxxxx/public/basic.ics",
color: "#6AC5FE",
},
{
url: "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics",
color: "#FFFF00",
},
],
},
},
//WEATHER //best weather so far top right
{
module: "MMM-OpenWeatherForecast",
position: "top_right",
header: "The DeFrancesco Forecast",
config: {
apikey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx", //only string here
units: "imperial",
latitude: xxxxxxxxxx0, //number works here
longitude: "xxxxxxxxxxxxxxx0" //so does a string
}
},
//this day in history
{
module: 'MMM-History',
position: 'top_left',
config: {
maxWidth: "400px" // Increase to maximum px or 100% to stretch across mirror. See Examples above.
}
},
//hockey
{
module: 'MMM-NHL',
position: 'top_right',
config: {
colored: true,
matches: 30 ,
focus_on: ['NYI', 'BOS', 'BUF'],
daysInPast: 5,
daysAhead: 15,
}
},
//SPANISH WORD OF THE DAY
{
module: 'MMM-WOTD',
position: 'top_left',
config: {
updateInterval: 86400000,
retryDelay: 5000,
showExamples: true,
showExampleTranslations: true,
language: "spanish"

                }
    },
								//english word of the day

{
module: 'MMM-WordOfTheDay',
position: 'top_left',
config: {
updateInterval: 86400000,
headerText: "English Word of the Day"
}
},
// DAD JOKES TOP RIGHT
{
module: 'MMM-Dad-Jokes',
position: 'top_left', // Or wherever you want
header: "dad's favorite jokes",
classes: 'default everyone',
config: {
updateInterval: 60000,
fadeSpeed: 4000
}
},
// BOTTOM NEWS TICKER

	{
		module: "newsfeed",
		position: "bottom_bar",
		config: {
			feeds: [
				{
					title: "New York Times",
					url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml", 
				},
				{
					title: "The Good News Network",
					url: "https://www.goodnewsnetwork.org/feed/"
				},
				{
					title: "NPR",
					url: "https://feeds.npr.org/1001/rss.xml",
				},
					{
					title: "Phys.Org",
					url: "https://phys.org/rss-feed/",
				},
					{
					title: "Live Science",
					url: "https://www.livescience.com/feeds/all",
				},
				{
					title: "E! News Daily",
					url: "https://eol-feeds.eonline.com/rssfeed/us/top_stories",
					},

					{
					title: "Positive News Network",
					url: "https://www.positive.news/feed/",
				},
					{
					title: "Reasons to be Cheerful",
					url: "https://reasonstobecheerful.world/feed/",
				},
					{
					title: "ABC News International",
					url: "https://abcnews.go.com/abcnews/internationalheadlines",
				},
			],
			ignoreOlderThan: 86400000,
			showSourceTitle: true,
			showPublishDate: true,
			broadcastNewsFeeds: true,
			broadcastNewsUpdates: true
		}
	},
								//SUPERHERO QUOTES
	{
module: 'MagicMirror-QuoteCatalog',
header: 'The Quote Catalog',
position: 'top_left',
config: {
            // See below for configurable options
        }

},
{
module: 'MMM-page-indicator',
position: 'top_bar',
config: {
pages: 5,
}
},
{
module: 'MMM-pages',
config: {
modules:
[['MMM-WordOfTheDay', 'MMM-WOTD', 'MMM-Teslamate'], ["MMM-MyCalendar", "weather", 'MagicMirror-QuoteCatalog', 'MMM-NHL', "MMM-Climacell-Hourly"], ["MMM-OpenWeatherForecast", 'MMM-Dad-Jokes', "newsfeed", 'MMM-History'], ["MMM-CalendarExt3"]],
fixed: [ "MMM-page-indicator", "clock" ],
hiddenPages: {
"screenSaver": [ "clock", "MMM-SomeBackgroundImageModule" ],
"admin": [ "MMM-ShowMeSystemStatsModule", "MMM-AnOnScreenMenuModule" ],
},
}
},
]
//customCSS: ["css/custom.css"],
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

MMM-CalendarExt3.css

/* stylelint-disable
value-no-vendor-prefix, property-no-vendor-prefix, custom-property-pattern,
selector-class-pattern, selector-id-pattern, no-descending-specificity,
selector-pseudo-class-no-unknown, keyframes-name-pattern,
*/

.CX3 {
/* you CAN modify these values; but SHOULD NOT to remove */
--celllinecolor: #333;
--cellbgcolor: rgb(0 0 0 / 20%);
--cellheaderheight: 25px;
--cellfooterheight: 2px;
--defaultcolor: #fff;
--eventheight: calc(var(--fontsize) + 4px);
--totalheight: calc(var(--eventheight) * var(--maxeventlines));
--displayEndTime: none;
--displayWeatherTemp: none;

font-size: var(--fontsize);
color: var(--defaultcolor);
line-height: calc(var(--eventheight));
}

.CX3 * {
box-sizing: border-box;
}

.CX3_MAGIC {
display: none;
}

.CX3.bodice {
width: 100%;
}

.CX3 .week {
width: 100%;
padding: 0 5px;
height: calc(
var(--cellheaderheight) + var(--cellfooterheight) +
calc(var(--eventheight) * var(--maxeventlines))
);
position: relative;
}

.CX3 .weekGrid {
display: grid;
width: 100%;
grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
grid-auto-columns: 0fr;
}

.CX3 .weekGridRow {
grid-template-rows: repeat(
var(--maxeventlines),
[event-start] minmax(0, 1fr) [event-end]
);
grid-auto-rows: 0;
overflow-y: hidden;
grid-auto-flow: column dense;
}

.CX3 .cellContainer {
width: 100%;
height: calc(
var(--cellheaderheight) + var(--cellfooterheight) +
calc(var(--eventheight) * var(--maxeventlines))
);
position: absolute;
top: 0;
left: 0;
}

.CX3 .eventContainer {
z-index: 20;
position: absolute;
bottom: var(--cellfooterheight);
left: 0;
width: 100%;
height: calc(var(--eventheight) * var(--maxeventlines));
}

.CX3 .cell {
border: 1px solid var(--celllinecolor);
background-color: var(--cellbgcolor);
height: calc(
var(--cellheaderheight) + var(--cellfooterheight) +
calc(var(--eventheight) * var(--maxeventlines))
);
position: relative;
}

.CX3 .cell.hasMore::after {
counter-reset: more var(--more);
content: counter(more);
display: block;
position: absolute;
bottom: 4px;
right: 4px;
width: 18px;
height: 18px;
color: black;
font-weight: bold;
font-size: 14px;
border-radius: 9px;
background-color: white;
z-index: 30;
text-overflow: "+";
}

.CX3 .cellHeader {
text-align: right;
height: var(--cellheaderheight);
padding: 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 90%;
}

.CX3 .cellFooter {
text-align: left;
height: var(--cellfooterheight);
padding: 2px;
}

.CX3 .cellBody {
height: calc(var(--eventheight) * var(--maxeventlines));
}

.CX3 .cw {
font-size: 80%;
color: goldenrod;
margin-right: 5px;
}

.CX3 .cw:not(.cwFirst) {
display: none;
}

.CX3 .cw::before {
content: "CW";
margin-right: 5px;
}

.CX3 .cellContainer .cell:nth-child(1) .cw {
display: inherit;
}

.CX3 .cell.today {
border: 3px solid #fff;
background-color: #535f6b;
}

.CX3 .today .cellDate {
font-weight: bold;
background-color: white;
color: black;
border-radius: 8px;
padding: 1px 8px;
margin: 1px;
line-height: 100%;
}

.CX3 .thisMonth {
background-color: rgb(255 255 255 / 10%);
}

.CX3 .cellDate .literal {
margin-right: 3px;
}

.CX3 .cellDate :not(.day) {
display: none;
}

.CX3 .today .cellDate :not(.day) {
display: inline-block;
}

.CX3 .date_1 .cellDate :not(.day) {
display: inline-block;
}

.CX3 .week:nth-child(2) .cell:first-child .cellDate * {
display: inline-block;
}

.CX3 .event {
margin: 1px 2px;
padding: 0 2px;
text-align: left;
grid-row: span 1;
color: var(--defaultcolor);
display: flex;
justify-content: flex-start;
gap: 2px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
min-width: 0;
position: relative;
}

.CX3 .event .headline {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 2px;
min-width: 0;
flex: 1;
}

.CX3 .event .headline .title.marquee {
overflow: hidden;
white-space: nowrap;
text-overflow: unset;
position: relative;
}

.CX3 .event .headline .title.marquee .marqueeText {
display: inline-block;
white-space: nowrap;
overflow: unset;
animation: marquee calc(var(--marqueeLength) / 10) linear 2s infinite;
min-width: 0;
}

@Keyframes marquee {
0% {
transform: translateX(0);
opacity: 1;
}

49.999% {
transform: translateX(calc(var(--marqueeScroll) * -1));
opacity: 1;
visibility: hidden;
}

50% {
opacity: 0;
visibility: hidden;
}

50.001% {
transform: translateX(var(--marqueeOffset));
opacity: 1;
visibility: visible;
}

60% {
opacity: 1;
transform: translateX(0);
}

100% {
/* waiting */
}
}

.CX3 .event .time {
font-size: 75%;
width: fit-content;
}

.CX3 .event .headline .title {
font-size: 75%;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-left: 2px;
order: 3;
}

.CX3 .event .headline .symbol {
order: 1;
}

.CX3 .event .headline .time {
order: 2;
display: inline-block;
}

.CX3 .event.fullday,
.CX3 .event.multiday {
background-color: var(--calendarColor);
//background-color: var(--calendarColor);
mix-blend-mode: difference;
border-radius: 4px;
//color: var(--oppositeColor);
color: var(--oppositeColor);
}

.CX3 .event.singleday .headline:not(.useSymbol)::before,
.CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before {
content: "⬤";
color: var(--calendarColor);
display: inline-block;
padding-right: 2px;
font-size: 75%;
}

.CX3 .event .headline:not(.useSymbol) .symbol {
/display: none;/
}

.CX3 .event .headline.useSymbol .symbol {
/display: inline-block;/
display: none;
padding-right: 2px;
font-size: 75%;
align-self: center;
}

.CX3 .event.singleday .headline.useSymbol .symbol {
color: var(--calendarColor);
}

.CX3 .event.fullday .headline .time {
display: none;
}

.CX3 .event.singleday .headline .time {
/display: none; i need the line of inline-block to keep the time on/
display: inline-block;
padding-right: 2px;
font-size: 75%;
color: var(--defaultColor);
}

.CX3 .event.multiday .headline .startTime {
display: inline-block;
padding-right: 2px;
font-size: 75%;
color: var(--oppositeColor);
}

.CX3 .event .time.notInDay {
display: none;
}

.CX3 .event .time.endTime {
display: var(--displayEndTime);
}

.CX3 .event:not(.fullday) .headline .time.endTime {
display: var(--displayEndTime);
}

.CX3 .event .startTime::after {
display: var(--displayEndTime);
content: " -";
}

.CX3 .event .startTime.notInDay + .endTime.inDay::before {
display: var(--displayEndTime);
content: "- ";
}

.CX3 .event.continueFromPreviousWeek .headline .time {
display: none;
}

.CX3 .event.multiday:not(.continueToNextWeek) .headline .endTime {
display: inherit;
order: 4;
margin-left: auto;
}

.CX3 .event .description,
.CX3 .event .location {
display: none;
}

.CX3 .event.passed {
filter: brightness(0.8) grayscale(0.5);
}

.CX3 .event.current {
filter: saturate(2);
}

.CX3 .weekend {
color: crimson;
font-weight: bold;
}

.CX3 .weekend_2 {
color: crimson;
}

.CX3 .weekend_1 {
color: dodgerblue;
}

.CX3 .cellHeader .cellDate {
flex-grow: 3;
}

.CX3 .cellHeader .cellWeather {
color: white;
margin: 2px;
font-size: 100%;
align-self: center;
}

.CX3 .cellHeader .cellWeather .icon {
font-size: 100%;
font-weight: bold;
}

.CX3 .cellHeader .cellWeather .maxTemp {
color: white;
font-weight: bold;
font-size: 90%;
}

.CX3 .cellHeader .cellWeather .minTemp {
color: darkgray;
font-weight: normal;
}

.CX3 .cellHeader .cellWeather .temperature {
display: var(--displayWeatherTemp);
padding-left: 5px;
font-size: 90%;
}

.CX3 .cellHeader .cellWeather .maxTemp::before {
content: " \25b2";
}

.CX3 .cellHeader .cellWeather .minTemp::before {
content: " \25bc";
}

.CX3 .cellHeader .cellWeather .temperature::after {
content: "° ";
}

.CX3 .legends {
display: flex;
flex-direction: row;
gap: 5px;
justify-content: center;
padding: 10px;
}

.CX3 .legends .legend {
font-size: 75%;
background-color: var(--calendarColor);
color: var(--oppositeColor);
padding: 2px 5px;
border-radius: 5px;
display: block;
}

.CX3 .legend.useSymbol .symbol {
display: inline-block;
padding-right: 2px;
font-size: 90%;
align-self: center;
}

/* popover */

#CX3_POPOVER {
max-width: 50%;
min-width: 25%;
height: fit-content;
max-height: calc(max(fit-content, 80%) - 20px);
background-color: white;
border-radius: 10px;
position: absolute;
box-shadow: 5px 5px 20px 0 #000;
font-size: 90%;
}

#CX3_POPOVER[popover] {
padding: 0;
}

#CX3_POPOVER:popover-open {
animation: slideIn 0.5s ease-in-out;
}

#CX3_POPOVER::backdrop {
background-color: rgb(127 127 127 / 25%);
backdrop-filter: blur(5px);
}

@Keyframes slideIn {
0% {
opacity: 0;
transform: translateY(200px);
}

100% {
opacity: 1;
}
}

#CX3_POPOVER .header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 5px;
font-size: 150%;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
color: white;
background-color: black;
}

#CX3_POPOVER .header[data-is-fullday="true"] {
background-color: var(--calendarColor);
color: var(--oppositeColor);
}

#CX3_POPOVER .header[data-is-fullday="false"] {
background-color: var(--oppositeColor);
color: var(--calendarColor);
}

#CX3_POPOVER .content {
display: flex;
flex-direction: column;
gap: 5px;
padding: 20px;
background-color: white;
overflow-y: auto;
}

#CX3_POPOVER .content .name {
font-weight: bold;
text-transform: uppercase;
font-size: 75%;
color: darkmagenta;
}

#CX3_POPOVER .content .value {
margin-left: 10px;
margin-bottom: 10px;
font-size: 90%;
color: black;
white-space: unset;
overflow-wrap: break-word;
hyphens: auto;
text-wrap: balance;
overflow-y: hidden;

/* text-wrap: balance; */

/* Expreimental for CSS Text Module Level 4 */
}

#CX3_POPOVER .content .list {
margin: 0;
padding: 0;
}

#CX3_POPOVER .content .eventItem {
margin-bottom: 5px;
}

#CX3_POPOVER .eventItem {
display: flex;
flex-flow: row wrap;
list-style: none;
}

#CX3_POPOVER .eventItem .symbol {
color: var(--calendarColor);
font-weight: bold;
}

#CX3_POPOVER .eventItem .title {
margin-left: 10px;
font-weight: bold;
}

#CX3_POPOVER .eventItem .time {
flex-basis: 100%;
}

#CX3_POPOVER .eventItem .full {
margin-left: 30px;
}

custom.css
/* MagicMirror² Custom CSS Sample
*

• Change color and fonts here.
• Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
• MIT Licensed.
  */

/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: /
/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */

body {
margin: 0;
position: absolute;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
height: 100vw;
object-fit: cover;
top: 100vh;
visibility: visible;
}

:root {
--color-text: #999;
--color-text-dimmed: #666;
--color-text-bright: #fff;
--color-background: black;

--font-primary: "Roboto Condensed";
--font-secondary: "Roboto";

--font-size: 20px;
--font-size-small: 0.75rem;

--gap-body-top: 60px;
--gap-body-right: 60px;
--gap-body-bottom: 60px;
--gap-body-left: 60px;

--gap-modules: 30px;
}

.module-header {
font-size: 25px !important;
color: white;
}

/* Set the font size for the MMM-NHL module header /
.MMM-NHL header {
font-size: 25px; / Adjust the font size as needed */
color: white;
}
/change the weekend column names and thickness/
.CX3 .weekend {
color: gray;
font-weight: bold;
}

/make the event name the calendar color/
.CX3 .event .headline .title {
//color: var(--calendarColor);
}
/turns off the CW week number at the beginning of each week/
.CX3 .cellContainer .cell:nth-child(1) .cw {
display: none;
}

/* changes all the text color to match nice - but only use without the background borders*/
.CX3 .event.singleday .headline .title {
color: var(--calendarColor);
}*/

/gives everthing a background color - nice/
/.CX3 .event { / singleday event /
/ color: var(--defaultcolor);
/* background-color: var(--calendarColor); /* Color by config or eventTransformer /
/ color: var(--oppositeColor); /* Auto calculated color by --calendarColor /
/ }*
*/

.MMM-WOTD header {

margin-top: 100px; /* Change color and thickness as needed */
}

.wotd-title {
line-height:0.75;
padding-top: 15px;
}

.wotd-summary {

line-height:1.1;
display: block;
width: 300px;
padding-bottom:10px;
padding-top:10px;

}

.wotd-examples {

line-height:1.1;
display: block;
width: 300px;
padding-bottom:10px;
padding-top:10px;

}
.MMM-History .header {
text-align: left;
font-size: 25px;

}
.MMM-History .title {
text-align: left;
font-size: 20px;
}

.MMM-History {
margin-top: 100px;
text-align: left;
}

.MMM-Dad-Jokes .bright.light.small {
font-size: 20px !important;
color: white;
}
.MMM-Dad-Jokes {
width: 400px;
text-align: left;
margin-top: 100px;

}
.MMM-Dad-Jokes header{
text-align: left;

}
.MMM-Dad-Jokes title{
text-align: left;
font-size: 20px;
color: white;
}

.MMM-QuoteCatalog .bright.small.light {

text-align: left !important; /* Left-align the text */

}
.MMM-OpenWeatherForecast .module-header.forecast-header {
font-size: 20px;

}

MMM-CalendaerExt3.js
/* Global Log, Module, config */

const popoverSupported = (typeof HTMLElement !== 'undefined') ? HTMLElement.prototype.hasOwnProperty('popover') : false
if (!popoverSupported) console.info(This browser doesn't support popover yet. Update your system.)
const animationSupported = (typeof window !== 'undefined' && window?.mmVersion) ? +(window.mmVersion.split('.').join('')) >= 2250 : false
Module.register('MMM-CalendarExt3', {
defaults: {
mode: 'week', // or 'month', 'day'
weekIndex: -1, // Which week from this week starts in a view. Ignored on mode 'month'
dayIndex: -1,
weeksInView: 3, // How many weeks will be displayed. Ignored on mode 'month'
instanceId: null,
firstDayOfWeek: null, // 0: Sunday, 1: Monday
minimalDaysOfNewYear: null, // When the first week of new year starts in your country.
weekends: [], // or [0, 6]. 0: Sunday, 6: Saturday
locale: null, // 'de' or 'en-US' or prefer array like ['en-CA', 'en-US', 'en']
cellDateOptions: {
month: 'short',
day: 'numeric'
},
eventTimeOptions: {
//timeStyle: 'short'
hour: 'numeric',
minute: 'numeric',
hour12: true // This ensures the time is displayed in 12-hour format
},
headerWeekDayOptions: {
weekday: 'long'
},
headerTitleOptions: {
month: 'long'
},
calendarSet: [],
maxEventLines: 5, // How many events will be shown in a day cell.
fontSize: '18px',
eventHeight: '22px',
eventFilter: (ev) => { return true },
eventSorter: null,
eventTransformer: (ev) => { return ev },
refreshInterval: 1000 * 60 * 10, // too frequent refresh. 10 minutes is enough.
waitFetch: 1000 * 5,
glanceTime: 1000 * 60, // deprecated, use refreshInterval instead.
animationSpeed: 2000,
useSymbol: true,
displayLegend: false,
useWeather: true,
weatherLocationName: null,
//notification: 'CALENDAR_EVENTS', /* reserved */
manipulateDateCell: (cellDom, events) => { },
weatherNotification: 'WEATHER_UPDATED',
weatherPayload: (payload) => { return payload },
eventNotification: 'CALENDAR_EVENTS',
eventPayload: (payload) => { return payload },
displayEndTime: false,
displayWeatherTemp: false,
popoverTemplate: './popover.html',
popoverTimeout: 1000 * 30,
popoverPeriodOptions: {
dateStyle: 'short',
timeStyle: 'short'
},
popoverDateOptions: {
dateStyle: 'full',
},
displayCW: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
skipPassedEventToday: false,
showMore: true,
useIconify: true,
useMarquee: false,

skipDuplicated: true,
monthIndex: 0,
referenceDate: null,

},

defaulNotifications: {
weatherNotification: 'WEATHER_UPDATED',
weatherPayload: (payload) => { return payload },
eventNotification: 'CALENDAR_EVENTS',
eventPayload: (payload) => { return payload },
},

getStyles: function () {
let css = ['MMM-CalendarExt3.css']
return css
},

getMoment: function (options) {
let moment = (options.referenceDate) ? new Date(options.referenceDate) : new Date()
//let moment = (this.tempMoment) ? new Date(this.tempMoment.valueOf()) : new Date()
switch (options.mode) {
case 'day':
moment = new Date(moment.getFullYear(), moment.getMonth(), moment.getDate() + options.dayIndex)
break
case 'month':
moment = new Date(moment.getFullYear(), moment.getMonth() + options.monthIndex , 1)
break
case 'week':
default:
moment = new Date(moment.getFullYear(), moment.getMonth(), moment.getDate() + (7 * options.weekIndex))
}
return moment
},

regularizeConfig: function (options) {
const weekInfoFallback = {
firstDay: 1,
minimalDays: 4,
weekend: [0, 6]
}

options.locale = Intl.getCanonicalLocales(options.locale ?? config?.locale ?? config?.language)?.[ 0 ] ?? ''
const calInfo = new Intl.Locale(options.locale)
if (calInfo?.weekInfo) {
  options.firstDayOfWeek = (options.firstDayOfWeek !== null) ? options.firstDayOfWeek : (calInfo.weekInfo?.firstDay ?? weekInfoFallback.firstDay)
  options.minimalDaysOfNewYear = (options.minimalDaysOfNewYear !== null) ? options.minimalDaysOfNewYear : (calInfo.weekInfo?.minimalDays ?? weekInfoFallback.minDays)
  options.weekends = ((Array.isArray(options.weekends) && options.weekends?.length) ? options.weekends : (calInfo.weekInfo?.weekend ?? [])).map(d => d % 7)
}

options.instanceId = options.instanceId ?? this.identifier
this.notifications = {
  weatherNotification: options.weatherNotification ?? this.defaulNotifications.weatherNotification,
  weatherPayload: (typeof options.weatherPayload === 'function') ? options.weatherPayload : this.defaulNotifications.weatherPayload,
  eventNotification: options.eventNotification ?? this.defaulNotifications.eventNotification,
  eventPayload: (typeof options.eventPayload === 'function') ? options.eventPayload : this.defaulNotifications.eventPayload,
}

options.mode = ([ 'day', 'month', 'week' ].includes(options.mode)) ? options.mode : 'week'
options.weekIndex = (options.mode === 'month') ? 0 : options.weekIndex
options.weeksInView = (options.mode === 'month') ? 6 : options.weeksInView
options.dayIndex = (options.mode === 'day') ? options.dayIndex : 0

return options

},

start: function() {
this.activeConfig = this.regularizeConfig({ ...this.config })
this.originalConfig = { ...this.activeConfig }

this.fetchTimer = null
this.refreshTimer = null
this.forecast = []
this.eventPool = new Map()
this.popoverTimer = null

this._ready = false

let _moduleLoaded = new Promise((resolve, reject) => {
  import('/' + this.file('CX3_Shared/CX3_shared.mjs')).then((m) => {
    this.library = m
    if (this.config.useIconify) this.library.prepareIconify()
    resolve()
  }).catch((err) => {
    console.error(err)
    reject(err)
  })
})

let _domCreated = new Promise((resolve, reject) => {
  this._domReady = resolve
})

Promise.allSettled([_moduleLoaded, _domCreated]).then ((result) => {
  this._ready = true
  this.library.prepareMagic()
  setTimeout(() => {
    this.updateAnimate()
  }, this.activeConfig.waitFetch)
})
if (popoverSupported) {
  this.preparePopover()
}

},

preparePopover: function () {
if (!popoverSupported) return
if (document.getElementById('CX3_POPOVER')) return

fetch(this.file(this.config.popoverTemplate)).then((response) => {
  return response.text()
}).then((text) => {
  const template = new DOMParser().parseFromString(text, 'text/html').querySelector('#CX3_T_POPOVER').content.querySelector('.popover')
  const popover = document.importNode(template, true)
  popover.id = 'CX3_POPOVER'
  document.body.appendChild(popover)
  popover.ontoggle = (ev) => {
    if (this.popoverTimer) {
      clearTimeout(this.popoverTimer)
      this.popoverTimer = null
    }
    if (ev.newState === 'open') {
      this.popoverTimer = setTimeout(() => {
        try {
          popover.hidePopover()
          popover.querySelector('.container').innerHTML = ''
        } catch (e) {
          // do nothing
        }
      }, this.activeConfig.popoverTimeout)
    } else { // closed
      popover.querySelector('.container').innerHTML = ''
    }
  }
}).catch((err) => {
  console.error('[CX3]', err)
})

},

dayPopover(cDom, events, options) {
const popover = document.getElementById('CX3_POPOVER')
if (!popover) return
const container = popover.querySelector('.container')
container.innerHTML = ''
const ht = popover.querySelector('template#CX3_T_EVENTLIST').content.cloneNode(true)
container.appendChild(document.importNode(ht, true))
let header = container.querySelector('.header')
header.innerHTML = new Intl.DateTimeFormat(options.locale, { dateStyle: 'full' }).formatToParts(new Date(+cDom.dataset.date))
.reduce((prev, cur, curIndex, arr) => {
prev = prev + <span class="eventTimeParts ${cur.type} seq_${curIndex} ${cur.source}">${cur.value}</span>
return prev
}, '')

let list = container.querySelector('.list')
list.innerHTML = ''
const { renderSymbol } = this.library
events.forEach((e) => {
  pOption = (e.fullDayEvent) ? { dateStyle: 'short' } : { dateStyle: 'short', timeStyle: 'short' }

  const item = popover.querySelector('template#CX3_T_EVENTITEM').content.firstElementChild.cloneNode(true)
  item.style.setProperty('--calendarColor', e.color)
  item.classList.add('event')
  const symbol = item.querySelector('.symbol')
  renderSymbol(symbol, e, config)
  const time = item.querySelector('.time')
  time.innerHTML = new Intl.DateTimeFormat(options.locale, pOption).formatRangeToParts(new Date(+e.startDate), new Date(+e.endDate))
  .reduce((prev, cur, curIndex, arr) => {
    prev = prev + `<span class="eventTimeParts ${cur.type} seq_${curIndex} ${cur.source}">${cur.value}</span>`
    return prev
  }, '')
  const title = item.querySelector('.title')
  title.innerHTML = e.title
  list.appendChild(item)
})

this.activatePopover(popover)

},

eventPopover: function (eDom) {
const popover = document.getElementById('CX3_POPOVER')
if (!popover) return
const container = popover.querySelector('.container')
container.innerHTML = ''
const ht = popover.querySelector('template#CX3_T_EVENTDETAIL').content.cloneNode(true)
container.appendChild(document.importNode(ht, true))
let eSymbol = eDom.querySelector('.symbol').cloneNode(true)
container.querySelector('.symbol').appendChild(eSymbol)
let eTitle = eDom.querySelector('.title').cloneNode(true)
container.querySelector('.title').appendChild(eTitle)
let header = container.querySelector('.header')
header.style.setProperty('--calendarColor', eDom.style.getPropertyValue('--calendarColor'))
header.style.setProperty('--oppositeColor', eDom.style.getPropertyValue('--oppositeColor'))
header.dataset.isFullday = eDom.dataset.fullDayEvent

let criteria = container.querySelector('.criteria')
criteria.innerHTML = ''
const ps = ['location', 'description', 'calendar']
ps.forEach((c) => {
  if (eDom.dataset[ c ]) {
    const ct = popover.querySelector('template#CX3_T_CRITERIA').content.firstElementChild.cloneNode(true)
    ct.querySelector('.name').innerHTML = c
    ct.querySelector('.value').innerHTML = eDom.dataset[ c ]
    criteria.appendChild(document.importNode(ct, true))
  }
})

let start = new Date(+(eDom.dataset.startDate))
let end = new Date(+(eDom.dataset.endDate))
const ct = popover.querySelector('template#CX3_T_CRITERIA').content.firstElementChild.cloneNode(true)
const n = criteria.appendChild(document.importNode(ct, true))
n.classList.add('period')
n.querySelector('.name').innerHTML = 'period'
pOption = (eDom.dataset.fullDayEvent === 'true') ? { dateStyle: 'short' } : { dateStyle: 'short', timeStyle: 'short' }
n.querySelector('.value').innerHTML = new Intl.DateTimeFormat(this.locale, pOption).formatRangeToParts(start, end)
.reduce((prev, cur, curIndex, arr) => {
  prev = prev + `<span class="eventTimeParts ${cur.type} seq_${curIndex} ${cur.source}">${cur.value}</span>`
  return prev
}, '')
this.activatePopover(popover)

},

activatePopover: function (popover) {
let opened = document.querySelectorAll('[popover-opened]')
for (const o of Array.from(opened)) {
o.hidePopover()
}
popover.showPopover()
},

notificationReceived: function (notification, payload, sender) {
const replyCurrentConfig = ({ callback }) => {
if (typeof callback === 'function') {
callback({ ...this.activeConfig })
}
}

if (notification === this.notifications.eventNotification) {
  let convertedPayload = this.notifications.eventPayload(payload)
  this.eventPool.set(sender.identifier, JSON.parse(JSON.stringify(convertedPayload)))
}

if (notification === 'MODULE_DOM_CREATED') {
  this._domReady()
  const moduleContainer = document.querySelector(`#${this.identifier} .module-content`)
  const callback = (mutationsList, observer) => {
    for (let mutation of mutationsList) {
      const content = document.querySelector(`#${this.identifier} .module-content .CX3`)
      if (mutation.addedNodes.length > 0) this.updated(content, this.activeConfig)
    }
  }
  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
  const observer = new MutationObserver(callback)
  observer.observe(moduleContainer, { childList: true })
}

if (notification === this.notifications.weatherNotification) {
  let convertedPayload = this.notifications.weatherPayload(payload)
  if (
    (this.activeConfig.useWeather
      && ((this.activeConfig.weatherLocationName && convertedPayload.locationName.includes(this.activeConfig.weatherLocationName))
      || !this.activeConfig.weatherLocationName))
    && (Array.isArray(convertedPayload?.forecastArray) && convertedPayload?.forecastArray.length)
  ) {
    this.forecast = [...convertedPayload.forecastArray].map((o) => {
      let d = new Date(o.date)
      o.dateId = d.toLocaleDateString('en-CA')
      return o
    })
  } else {
    if (this.activeConfig.weatherLocationName && !convertedPayload.locationName.includes(this.activeConfig.weatherLocationName)) {
      Log.warn(`"weatherLocationName: '${this.activeConfig.weatherLocationName}'" doesn't match with location of weather module ('${convertedPayload.locationName}')`)
    }
  }
}

if (['CX3_GLANCE_CALENDAR', 'CX3_MOVE_CALENDAR', 'CX3_SET_DATE'].includes(notification)) {
  console.warn (`[DEPRECATED]'CX3_GLANCE_CALENDAR' notification was deprecated. Use 'CX3_SET_CONFIG' instead. (README.md)`)
}
if (payload?.instanceId && payload?.instanceId !== this.activeConfig?.instanceId) return

if (notification === 'CX3_GET_CONFIG') {
  replyCurrentConfig(payload)
}

if (notification === 'CX3_SET_CONFIG') {
  this.activeConfig = this.regularizeConfig({ ...this.activeConfig, ...payload })
  this.updateAnimate()
  replyCurrentConfig(payload)
}

if (notification === 'CX3_RESET') {
  this.activeConfig = this.regularizeConfig({ ...this.originalConfig })
  this.updateAnimate()
  replyCurrentConfig(payload)
}

},

getDom: function () {
let dom = document.createElement('div')
dom.innerHTML = ""
dom.classList.add('bodice', 'CX3_' + this.activeConfig.instanceId, 'CX3')
if (this.activeConfig.fontSize) dom.style.setProperty('--fontsize', this.activeConfig.fontSize)
if (!this.library?.loaded) {
Log.warn('[CX3] Module is not prepared yet, wait a while.')
return dom
}
dom = this.draw(dom, this.activeConfig)

if (this.refreshTimer) {
  clearTimeout(this.refreshTimer)
  this.refreshTimer = null
}
this.refreshTimer = setTimeout(() => {
  clearTimeout(this.refreshTimer)
  this.refreshTimer = null
  this.updateAnimate()
}, this.activeConfig.refreshInterval)
return dom

},

updated: function (dom, options) {
if (!dom) return
dom.querySelectorAll('.title')?.forEach((e) => {
const parent = e.closest('.event')
const {offsetWidth, scrollWidth} = e
if (options.useMarquee && parent?.dataset?.noMarquee !== 'true' && offsetWidth < scrollWidth) {
const m = document.createElement('span')
m.innerHTML = e.innerHTML
e.innerHTML = ''
e.appendChild(m)
e.classList.add('marquee')
m.classList.add('marqueeText')
const length = m.offsetWidth
m.style.setProperty('--marqueeOffset', offsetWidth + 'px')
m.style.setProperty('--marqueeScroll', scrollWidth + 'px')
m.style.setProperty('--marqueeLength', length + 's')
}
})
},

draw: async function (dom, options) {
if (!this.library?.loaded) return dom
const {
isToday, isThisMonth, isThisYear, getWeekNo, renderEventAgenda,
prepareEvents, getBeginOfWeek, getEndOfWeek, displayLegend, regularizeEvents,
} = this.library

const startDayOfWeek = getBeginOfWeek(new Date(), options).getDay()

dom.innerHTML = ''
dom.style.setProperty('--maxeventlines', options.maxEventLines)
dom.style.setProperty('--eventheight', options.eventHeight)
dom.style.setProperty('--displayEndTime', (options.displayEndTime) ? 'inherit' : 'none')
dom.style.setProperty('--displayWeatherTemp', (options.displayWeatherTemp) ? 'inline-block' : 'none')

const makeCellDom = (d, seq) => {
  let tm = new Date(d.valueOf())
  let cell = document.createElement('div')
  cell.classList.add('cell')
  if (isToday(tm)) cell.classList.add('today')
  if (isThisMonth(tm)) cell.classList.add('thisMonth')
  if (isThisYear(tm)) cell.classList.add('thisYear')
  cell.classList.add(
    'year_' + tm.getFullYear(),
    'month_' + (tm.getMonth() + 1),
    'date_' + tm.getDate(),
    'weekday_' + tm.getDay()
  )
  cell.dataset.date = new Date(tm.getFullYear(), tm.getMonth(), tm.getDate()).valueOf()
  options.weekends.forEach((w, i) => {
    if (tm.getDay() === w) cell.classList.add('weekend', 'weekend_' + (i + 1))
  })
  let h = document.createElement('div')
  h.classList.add('cellHeader')

  let cwDom = document.createElement('div')
  cwDom.innerHTML = getWeekNo(tm, options)
  cwDom.classList.add('cw')
  if (tm.getDay() === startDayOfWeek) {
    cwDom.classList.add('cwFirst')
  }

  h.appendChild(cwDom)

  let forecasted = this.forecast.find((e) => {
    return (tm.toLocaleDateString('en-CA') === e.dateId)
  })

  if (forecasted && forecasted?.weatherType) {
    let weatherDom = document.createElement('div')
    weatherDom.classList.add('cellWeather')
    let icon = document.createElement('span')
    icon.classList.add('wi', 'wi-' + forecasted.weatherType)
    weatherDom.appendChild(icon)
    let maxTemp = document.createElement('span')
    maxTemp.classList.add('maxTemp', 'temperature')
    maxTemp.innerHTML = Math.round(forecasted.maxTemperature)
    weatherDom.appendChild(maxTemp)
    let minTemp = document.createElement('span')
    minTemp.classList.add('minTemp', 'temperature')
    minTemp.innerHTML = Math.round(forecasted.minTemperature)
    weatherDom.appendChild(minTemp)
    h.appendChild(weatherDom)
  }
  let dateDom = document.createElement('div')
  dateDom.classList.add('cellDate')
  let dParts = new Intl.DateTimeFormat(options.locale, options.cellDateOptions).formatToParts(tm)
  let dateHTML = dParts.reduce((prev, cur, curIndex) => {
    prev = prev + `<span class="dateParts ${cur.type} seq_${curIndex}">${cur.value}</span>`
    return prev
  }, '')
  dateDom.innerHTML = dateHTML

  h.appendChild(dateDom)

  let b = document.createElement('div')
  b.classList.add('cellBody')

  let f = document.createElement('div')
  f.classList.add('cellFooter')

  cell.appendChild(h)
  cell.appendChild(b)
  cell.appendChild(f)
  return cell
}

const rangeCalendar = (moment, options) => {
  let boc, eoc
  switch (options.mode) {
    case 'day':
      boc = new Date(moment.getFullYear(), moment.getMonth(), moment.getDate())
      eoc = new Date(boc.valueOf())
      eoc.setDate(boc.getDate() + 7 * this.weeksInView)
      eoc.setMilliseconds(-1)
      break
    case 'month':
      boc = getBeginOfWeek(new Date(moment.getFullYear(), moment.getMonth(), 1), options)
      eoc = getEndOfWeek(new Date(moment.getFullYear(), moment.getMonth() + 1, 0), options)
      break
    case 'week':
    default:
      boc = getBeginOfWeek(new Date(moment.getFullYear(), moment.getMonth(), moment.getDate() + (7 * options.weekIndex)), options)
      eoc = getEndOfWeek(new Date(boc.getFullYear(), boc.getMonth(), boc.getDate() + (7 * (options.weeksInView - 1))), options)
      break
  }
  return { boc, eoc }
}

const makeDayHeaderDom = (dom, options, range) => {
  let wm = new Date(range.boc.valueOf())
  let dayDom = document.createElement('div')
  dayDom.classList.add('headerContainer', 'weekGrid')
  for (i = 0; i < 7; i++) {
    let dm = new Date(wm.getFullYear(), wm.getMonth(), wm.getDate() + i)
    let day = (dm.getDay() + 7) % 7
    let dDom = document.createElement('div')
    dDom.classList.add('weekday', 'weekday_' + day)
    options.weekends.forEach((w, i) => {
      if (day === w) dDom.classList.add('weekend', 'weekend_' + (i + 1))
    })
    dDom.innerHTML = new Intl.DateTimeFormat(options.locale, options.headerWeekDayOptions).format(dm)
    dayDom.appendChild(dDom)
  }

  dom.appendChild(dayDom)
}

const makeWeekGridDom = (dom, options, events, range) => {
  let wm = new Date(range.boc.valueOf())
  do {
    let wDom = document.createElement('div')
    wDom.classList.add('week')
    wDom.dataset.weekNo = getWeekNo(wm, options)

    let ccDom = document.createElement('div')
    ccDom.classList.add('cellContainer', 'weekGrid')

    let ecDom = document.createElement('div')
    ecDom.classList.add('eventContainer', 'weekGrid', 'weekGridRow')

    let boundary = []

    let cm = new Date(wm.valueOf())
    for (i = 0; i < 7; i++) {
      if (i) cm = new Date(cm.getFullYear(), cm.getMonth(), cm.getDate() + 1)
      ccDom.appendChild(makeCellDom(cm, i))
      boundary.push(cm.getTime())
    }
    boundary.push(cm.setHours(23, 59, 59, 999))

    let sw = new Date(wm.valueOf())
    let ew = new Date(sw.getFullYear(), sw.getMonth(), sw.getDate() + 6, 23, 59, 59, 999)
    let eventsOfWeek = events.filter((ev) => {
      return !(ev.endDate <= sw.getTime() || ev.startDate >= ew.getTime())
    })
    for (let event of eventsOfWeek) {
      if (options.skipPassedEventToday) {
        if (event.today && event.isPassed && !event.isFullday && !event.isMultiday && !event.isCurrent) event.skip = true
      }
      if (event?.skip) continue

      let eDom = renderEventAgenda(event, options, moment)

      let startLine = 0
      if (event.startDate >= boundary.at(0)) {
        startLine = boundary.findIndex((b, idx, bounds) => {
          return (event.startDate >= b && event.startDate < bounds[idx + 1])
        })
      } else {
        eDom.classList.add('continueFromPreviousWeek')
      }

      let endLine = boundary.length - 1
      if (event.endDate <= boundary.at(-1) ) {
        endLine = boundary.findIndex((b, idx, bounds) => {
          return (event.endDate <= b && event.endDate > bounds[idx - 1])
        })
      } else {
        eDom.classList.add('continueToNextWeek')
      }

      eDom.style.gridColumnStart = startLine + 1
      eDom.style.gridColumnEnd = endLine + 1

      if (event?.noMarquee) {
        eDom.dataset.noMarquee = true
      }

      if (event?.skip) {
        eDom.dataset.skip = true
      }

      if (popoverSupported) {
        if (!eDom.id) eDom.id = eDom.dataset.calendarSeq + '_' + eDom.dataset.startDate + '_' + eDom.dataset.endDate + '_' + new Date().getTime()
        eDom.dataset.popoverble = true
        eDom.onclick = (ev) => {
          this.eventPopover(eDom)
        }
      }

      ecDom.appendChild(eDom)
    }

    let dateCells = ccDom.querySelectorAll('.cell')
    for (let i = 0; i < dateCells.length; i++) {
      let dateCell = dateCells[i]
      let dateStart = new Date(+dateCell.dataset.date)
      let dateEnd = new Date(dateStart.getFullYear(), dateStart.getMonth(), dateStart.getDate(), 23, 59, 59, 999)
      let thatDayEvents = eventsOfWeek.filter((ev) => {
        return !(ev.endDate <= dateStart.valueOf() || ev.startDate > dateEnd.valueOf())
      })
      dateCell.dataset.events = thatDayEvents.length
      dateCell.dataset.hasEvents = (thatDayEvents.length > 0) ? 'true' : 'false'
      if (typeof options.manipulateDateCell === 'function') {
        options.manipulateDateCell(dateCell, thatDayEvents)
      }

      if (options.showMore) {
        const skipped = thatDayEvents.filter(ev => ev.skip).length
        const noskip = thatDayEvents.length - skipped
        const noskipButOverflowed = (noskip > options.maxEventLines) ? noskip - options.maxEventLines : 0
        const hidden = skipped + noskipButOverflowed
        if (hidden) {
          dateCell.classList.add('hasMore')
          dateCell.style.setProperty('--more', hidden)
        }
      }

      if (popoverSupported) {
        if (!dateCell.id) dateCell.id = dateCell.dataset.date + '_' + new Date().getTime()
        dateCell.dataset.popoverble = true
        dateCell.onclick = (ev) => {
          this.dayPopover(dateCell, thatDayEvents, config)
        }
      }
    }

    wDom.appendChild(ccDom)
    wDom.appendChild(ecDom)

    dom.appendChild(wDom)
    wm = new Date(wm.getFullYear(), wm.getMonth(), wm.getDate() + 7)
  } while(wm.valueOf() <= eoc.valueOf())
}
let moment = this.getMoment(options)
let { boc, eoc } = rangeCalendar(moment, options)
const targetEvents = prepareEvents({
  targetEvents: regularizeEvents({
    eventPool: this.eventPool,
    config: options,
  }),
  config: options,
  range: [boc, eoc],
})
makeDayHeaderDom(dom, options, { boc, eoc })
makeWeekGridDom(dom, options, targetEvents, { boc, eoc })
if (options.displayLegend) displayLegend(dom, targetEvents, options)
return dom

},

getHeader: function () {
if (this.activeConfig.mode === 'month') {
let moment = this.getMoment(this.activeConfig)
return new Intl.DateTimeFormat(this.activeConfig.locale, this.activeConfig.headerTitleOptions).format(new Date(moment.valueOf()))
}
return this.data.header
},

updateAnimate: function () {
this.updateDom(
(!animationSupported)
? this.config.animationSpeed
: {
options: {
speed: this.config.animationSpeed,
animate: {
in: this.config.animateIn,
out: this.config.animateOut
}
}
}
)
}
})

[mdefrancesco]

[eouia]

Wow, to make things simple;

1. Backup your current config and css
2. Retry with clean default config and css without 3rd party modules.
3. Then add this module only.
4. Confirm whether this module has issues or not, without interference from other module.
5. Then report that moment’s status.

Let’s talk from then.

[mdefrancesco]

thanks

so it still takes a reload to populate the calendar. not a huge deal but noteworthy

i havent configured any other modules so everything else is default or just sits on "loading"

/* MagicMirror² Config Sample
*

• By Michael Teeuw https://michaelteeuw.nl

• MIT Licensed.

• For more information on how you can configure this file

• see https://docs.magicmirror.builders/configuration/introduction.html

• and https://docs.magicmirror.builders/modules/configuration.html
  */
  let config = {
  address: "localhost", // Address to listen on, can be:
  // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
  // - another specific IPv4/6 to listen on a specific interface
  // - "0.0.0.0", "::" to listen on any interface
  // Default, when address config is left out or empty, is "localhost"
  port: 8080,
  basePath: "/", // The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
  // you must set the sub path here. basePath must end with a /
  ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
  // or add a specific IPv4 of 192.168.1.5 :
  // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
  // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
  // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

  useHttps: false, // Support HTTPS or not, default "false" will use HTTP
  httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true
  httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true

  language: "en",
  locale: "en-US",
  logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
  timeFormat: 24,
  units: "metric",
  // serverOnly: true/false/"local" ,
  // local for armv6l processors, default
  // starts serveronly and then starts chrome browser
  // false, default for all NON-armv6l devices
  // true, force serveronly mode, because you want to.. no UI on this device

  modules: [
  {
  module: "alert",
  },
  {
  module: "updatenotification",
  position: "top_bar"
  },
  {
  module: "clock",
  position: "top_left"
  },
  {
  module: "calendar",
  header: "US Holidays",
  position: "top_left",
  config: {
  calendars: [
  {
  symbol: "calendar",
  name: "us_holiday",
  url: "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics",
  color: "#FFFF00",

   	},
   {
   //symbol: "fa-calendar-o",
   name: "ellen",
   url: "https://calendar.google.com/calendar/ical/xxxxxxxxxxxxxxxxxxxxxx/basic.ics",
   color: "#90EE90",
   //class: 'ellen-calendar',
   
  
   	},
  
   {	
   //symbol: "fa-birthday-cake",
   name: "mark",
   url: "https://calendar.google.com/calendar/ical/xxxxxxxxxxxxxxxxxxxxxxxxxsic.ics",
   color: "#6AC5FE",
   },
  
  
   			{
   				symbol: "calendar-check",
   				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
   			}
   		]
   	}
   },
   
   {
  

module: "MMM-CalendarExt3",
position: "bottom_bar",
title: "",
config: {
mode: "month",
instanceId: "basicCalendar",
//locale: 'de-DE',
maxEventLines: 5,
firstDayOfWeek: 1,
calendarSet: ['us_holiday', 'ellen', 'mark'],

}
},
{
module: "compliments",
position: "lower_third"
},
{
module: "weather",
position: "top_right",
config: {
weatherProvider: "openweathermap",
type: "current",
location: "New York",
locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "YOUR_OPENWEATHER_API_KEY"
}
},
{
module: "weather",
position: "top_right",
header: "Weather Forecast",
config: {
weatherProvider: "openweathermap",
type: "forecast",
location: "New York",
locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "YOUR_OPENWEATHER_API_KEY"
}
},
{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "New York Times",
url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
}
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true
}
},
]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

[mdefrancesco]

progress
figured out how to change the symbols
**but i would like to be able to turn off symbols for specific calendars
changed the text color to match the calendar
changed all entries that say Chloe work to red
turned off week numbers
changed weekend colors
turned on legend
turned on past events

**tried to turn off times like you suggested to change 9:00 to 9
added these to custom css and had no effect

.CX3 .event.singleday .headline .time {
display: none;
}

.CX3 .customTime {
margin-right: 5px;
}

[eouia]

I was on holiday, sorry for the late return.
I re-checked your posts from the beginning again.

1. You may need reload means; you need more waitFetch before rendering. Give it 10 or 15 seconds. (by default, it is 5_000 ms, in some case, it would not be enough.)

2. Why did your custom.css have the whole content of MMM-CalendarExt3.css?? It is needless and meaningless. And it prevents your custom overriding. It would help if you appended only what you want to rewrite.

3. Test with this.

{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	title: "",
	config: {
		mode: "month",
		eventTransformer: (event) => {
			if (event.fullDayEvent) return event
			let time = new Date(+event.startDate)
			let timeFormat = (time.getMinutes() === 0) ? { hour: 'numeric', hour12: true } : { hour: 'numeric', minute: '2-digit', hour12: true }
			let timeStr = time.toLocaleTimeString(['en-US'], timeFormat)
			event.title = `<span class="customTime">${timeStr}</span>` + event.title
			return event
		}
	}
},

If work, progress from here.

[mdefrancesco]

ok, got a little closer

once we fix this is it possible to right justify the time so all the AM or PM line up?

[eouia]

So, custom time is displayed.
Let's hide original time.

Append this into your custom.css

.CX3 .event.singleday .headline .time {
  display: none;
}

.CX3 .customTime {
  margin-right: 5px;
}

[mdefrancesco]

that's awesome! but the time are not right justifying

[eouia]

What means justifying?

[mdefrancesco]

ideally i would like all of the "M's to line up

[eouia]

Of course, it is possible, but does it have the meaning? You wanted to abbreviate 01:30 to 01 for saving space, but now you want the space again?

[mdefrancesco]

hah, i see your point

since some of the times will be 9:30 i thought it would be easier to read if the times were lined up, i just like to the cleaner look of no extra 00s

[eouia]

I can't entirely agree this is useful or pretty... And I think this is my last help for this topic. You may need some more practice by your self.
Anyway,

Forget and Reset all the previous works. We need a new different approach.

/* in config of CX3 */
eventTransformer: (event) => {
	if (event.fullDayEvent) return event
	let time = new Date(+event.startDate)
	if (time.getMinutes() === 0) event.class = (event.class) ? event.class + ", full-hour" : "full-hour"
	return event;
}

/* custom.css */
.CX3 .event.singleday.full-hour .headline .time .eventTimeParts:not(.hour, .dayPeriod, .seq_3) {
  display: none;
}

.CX3 .event.singleday .headline .time {
  display: inline-block;
  width: 50px;
  text-align: right;
}

[tetron]

Here's my solution. At some point I may clean it up into a pull request.

CX3_shared.mjs

@@ -257,11 +257,26 @@ const renderEventAgenda = (event, {useSymbol, eventTimeOptions, locale, useIconi
   let startTime = document.createElement('div')
   let st = new Date(+event.startDate)
   startTime.classList.add('time', 'startTime', (st.getDate() === tm.getDate()) ? 'inDay' : 'notInDay')
-  startTime.innerHTML = new Intl.DateTimeFormat(locale, eventTimeOptions).formatToParts(st).reduce((prev, cur, curIndex, arr) => {
+  /*startTime.innerHTML = new Intl.DateTimeFormat(locale, eventTimeOptions).formatToParts(st).reduce((prev, cur, curIndex, arr) => {
     prev = prev + `${cur.value}`
     return prev
-  }, '')
-  headline.appendChild(startTime)
+  }, '')*/
+
+  let brieftime = "";
+  let hrs = st.getHours();
+  if (hrs > 12) { hrs -= 12 };
+  if (st.getMinutes() === 0) {
+    brieftime = `${hrs}`;
+  } else {
+    brieftime = `${hrs}:${st.getMinutes()}`;
+  }
+  if (st.getHours() > 11) {
+    brieftime = `${brieftime}p`;
+  } else {
+    brieftime = `${brieftime}a`;
+  }
+  startTime.innerHTML = brieftime;
+  headline.appendChild(startTime);
 
   let endTime = document.createElement('div')
   let et = new Date(+event.endDate)

[eouia]

Good job. But CX3_Shared.mjs is used in all CX3* sibling modules. So, first, check whether that appended logic will not interfere with the work of other modules. If possible, instead CX3_Shared.mjs, implementing the logic in the module's JS would be better.

[eouia]

Anyway, I think my solution (#125 (comment)) might be simpler than modifying the source directly.

[tetron]

First, thank you for MMM-CalendarExt3, three quarters of my MagicMirror's display is dedicated to calendar view and that wouldn't be possible without your code.

As it happens, separate git clone of MMM-CalendarExt3 and MMM-CalendarExt3Agenda each get their own copy of CX3_Shared, so patching just one of them to do the one thing I want was easy enough.

But this is 100% just a hack, a better solution would be to add this as a flag that specifies "brief" as an alternate time alternate format, or have a way to provide a custom time rendering function in the MagicMirror config file and inject it into renderEventAgenda method.

[eouia]

Maybe customRenderTime would be a good idea. :)

[tetron]

I don't know about the original poster, but my goal is to use as little horizontal space as possible to leave more space for the actual event summary. That might be possible with CSS but it seems much harder to figure out than a few lines of Javascript that emits the exact format I want.