Hello all, just have a couple fine tuning questions for you. Both seem easy but I can’t seem to figure out why it’s not working. FWIW my MM has been running great for months now, finally doing some tweaking.

So I’ve got MMM-Calendarext3 setup to only show 1 calendar, it’s my family google account. The last 2 things I would like to accomplish are having the text for long events scroll with useMarquee: true and then also to have the eventTransformer search for a name in the event title and change the color according to that.

For some reason, I can’t get either of these to work. Config.js below. If I understand correctly, I shouldn’t need to add anything to custom.css correct? With the config file below, my calendar does not load at all, just get blank screen stating please create a config file, if I hash out the transformer stuff then it loads but never scrolls (marquee). Any advice from ya’ll smart folks?

{
                               module: "MMM-CalendarExt3",
                               position: "bottom_bar",
                               title: "",
                               config: {
                                 mode: "",
                                 weekIndex: 0,
                                 weeksInView: 5,
                                 instanceId: "basicCalendar",
                                 locale: 'en-EN',
                                 maxEventLines: 5,
                                 fontSize: '26px',
                                 firstDayOfWeek: 0,
                                 refreshInterval: 120000,
                                 animationSpeed: 0,
                                 useMarquee: true,
                                 useSymbol: false,
                                 useWeather: true,
                                 displayWeatherTemp: true,
                                 calendarSet: ['us_holiday','family'],
                               weatherPayload: (payload) => {
         if (Array.isArray(payload?.forecastArray)) {
           payload.forecastArray = payload.forecastArray.map((f) => {
             f.maxTemperature = Math.round(f.maxTemperature * 9 / 5 + 32)
             f.minTemperature = Math.round(f.minTemperature * 9 / 5 + 32)
             return f
           })
         }
         return payload
       }
                       eventTransformer: (ev) => {
                        if (ev.title.search('Allie') > -1) ev.color = 'blue'
                        return ev
                       }
                       }
                       },
       

@MMRIZE Awesome! Thank you for that. Works just like you said. I did have to put the Weather forecast module below the MMM-Calendarext3 module or else the calendar would not load. Might be something obvious to some but I’m teaching myself as I go.

I’ve got this calendar set up almost perfect for my family. Just a couple minor things I would like to modify but am having no luck so far. Wondering if any of you can help. I’m sure I’m missing something easy here, but I would like to remove the little circle icon to the left of the calendar entry. I changed useSymbol to false but it still shows.

Second, how the heck do you get the weather forecast/temp icons up next to the date? I chose useweather-true, displayweathertemp - true, I’ve tried a few of the other weather related fields but no luck. Any help with these would be appreciated.

Also, I’ve tried a couple times now on this post and another, and cannot upload a pic no matter how small. Also wouldn’t accept my Imgur link. Not sure what I’ve done wrong there but I’ll post a pic when I can.

 {
                        module: "MMM-CalendarExt3",
                        position: "bottom_bar",
                        title: "",
                        config: {
                          mode: "",
                          weekIndex: 0,
                          weeksInView: 4,
                          instanceId: "basicCalendar",
                          locale: 'en-EN',
                          maxEventLines: 5,
                          firstDayOfWeek: 0,
                          refreshInterval: 120000,
                          animationSpeed: 0,
                          useSymbol: false,
                          useWeather: true,
                          displayWeatherTemp: true,
                          calendarSet: ['us_holiday','family'],
                }
                },
                {
                        module: "calendar",
                        position: "",
                        config: {
                          broadcastPastEvents: true,
                          calendars: [
                                {
                                  url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                  name: "us_holiday",
                                  color: "#6699ff"
                                }
                                        ]
                                }
                },
                {
                        module: "calendar",
                        position: "",
                        maximumNumberOfDays: 60,
                        config: {
                          animationSpeed: 0,
                          fetchInterval: 100000,
                          broadcastPastEvents: true,
                          useSymbol: false,
                          calendars: [
                                {
                                  url: "https://calendar.google.com/calendar/ical/*****,                                 
				  name: "family",
                                  color: "yellow",
                                        user: '***@gmail.com',
                                        pass: '***',
                                        method: 'basic'
                                }
                                        ]
                                }
                },

.MMM-CalendarExt3 {
        margin-bottom: 0px;
        width: 100%;
        height: 575px;
        font-size: 16px;
}
.CX3 .cw {
        display:none
}

.CX3 .event.singleday {
  border-left:4px solid var(--calendarColor);
}

.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}
![screenshot.jpg](error) 

@BKeyport said in Looking for some help with positioning modules:

@bobbylx Here’s an example of the base to do it, put in your custom.css, with the modules you’d like to display, then use the module’s own CSS as a template in custom.css to work it further.

/* adjust modules to display side by side */
.MMM-ValuesByNotification, .MMM-OpenWeatherForecast {
	display: inline-flex;
	margin-right: 5px;
	margin-left: 5px;
}

Awesome! This was exactly what I needed, appreciate the help.

Hello all, new guy here. So I’ve read lots of guides and scoured the forums and have a good working MM now. I’m trying to upload a pic but I think my work preventing it, I’ll try from my phone after I post this. I have the clock and weather both in the top bar, side by side. Then below the clock/weather, I have a calendar MMM-CalendarExt3 in the Bottom bar, which makes it take up about 80% of the page. I’m really happy with how it looks, but now I would like to add a module or two to the empty area to the right of my clock and weather.

My custom css is below. As you can see, I found some helpful information and use the relative position for weather and clock, then in the config they are both assigned top bar. When I try adding a MMM-Moon module I can’t seem to figure out how to tweak the relative position so that it is in line with the other modules. I’ve tried copying the info for weather, but changing the top and left values, but all that does is move the moon module low on the screen, and for some reason my weather module overlaps the clock (didn’t change its values).

Anyway, if someone could give me some advise on how to line up those 3 modules across the top, then my calendar below that would be great. The css below is currently working perfect. I also included my config if that helps.

body {
	background-Image: url("background.jpg");
	background-color: #cccccc;
	background-size: 1920;
	position: absolute;
	margin: 0px;
	height: 100%;
	width: 100%;

}

.wi.dimmed.wi-sunset {
color: orange;
}
.wi.dimmed.wi-sunrise {
color: yellow;
}
.wi-day-sunny {
color: yellow;
}
.wi-day-cloudy {
color: yellow;
}
.wi-rain {
color: grey;
}
.wi-thunderstorm {
color: grey;
}
.wi-snow {
color: white;
}
.wi-fog {
color: white;
}
.wi-night-clear {
color: white;
}
.wi-night-cloudy {
color: grey;
}
.wi-night-showers {
color: blue;
}
.wi-night-rain {
color: blue;
}
.wi-thunderstorm {
color: yelow;
}
.wi-night-snow {
color: white;
}
.wi-night-alt-cloudy-windy {
color: grey;
}
.clock {
	position: relative;
	top: 0px;
	height: 100px;
	width: 300px;
}
.weather {
	position: relative;
	top: -125px;
	left: 310px;
	height: 100px;
	width: 300px;
}
.MMM-CalendarExt3 {
	width: 100%;
	height: 575px;
}
/* MMM-CalendarExt3 */
.CX3 .cw {
	display:none;
}

----------------------------------------------------------------------------------------

language: "en",
locale: "en-US",
logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
timeFormat: 12,
units: "imperial",

modules: [
	{
		module: "alert",
	},
	{ 
		disabled: true,
		module: "updatenotification",
		position: "top_bar"
	},
	{
		module: "clock",
		position: "top_bar"
	},
	{
		disabled: true,
		module: 'MMM-Moon',
		position: 'top_bar',
		config: {
			lat: 35.651,
			lon: 78.833,
			timezone: "America/New_York"
			}
	},
		{
		module: "weather",
		position: "top_bar",
		config: {
			weatherProvider: "openweathermap",
			type: "current",
			location: "Holly Springs",
			locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
			
		}
	},
	{
		disabled: true,
		module: "weather",
		position: "top_right",
		header: "Weather Forecast",
		config: {
			weatherProvider: "openweathermap",
			type: "forecast",
			location: "Holly Springs",
			locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
			apiKey: "cbbb4aab37f038db12caadaece805ecf"
		}
	},
	{
		module: "MMM-CalendarExt3",
		position: "bottom_bar",
		title: "",
		config: {
		  mode: "",
		  weekIndex: 0,
		  weeksInView: 4,
		  instanceId: "basicCalendar",
		  locale: 'en-EN',
		  maxEventLines: 5,
		  firstDayOfWeek: 0,
		  calendarSet: ['us_holiday','family']
			}
	},
	{
		module: "calendar",
		position: "",
		config: {
		  broadcastPastEvents: true,
		  calendars: [
			{
			  url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
			  name: "us_holiday",
			  color: "red"
			}
				]
			}
	},
	{
		module: "calendar",
		position: "",
		maximumNumberOfDays: 60,
		config: {
		  broadcastPastEvents: true,
		  calendars: [
			{
			  url: "https://calendar.google.com/calendar/ical/***************/basic.ics",
			  name: "family",
				user: '*-*',
				pass: '*-*',
				method: 'basic'
			}
				]
			}
	},
]

};