Skip to content

Calendar module: Vertical alignment with wrapping #3053

@MikeBishop

Description

@MikeBishop

Platform: MM2 running on Raspberry Pi 4, Bullseye

Node Version: 16.19.0

MagicMirror² Version: 2.22.0

Description: When calendar events are long enough to wrap, the event name does not have the same vertical alignment as the icon and the time string.
image

Steps to Reproduce: Add an event with a long name and/or using relative time, enable icons for calendar events

Expected Results: Consistent vertical alignment between elements, regardless of whether that's top-aligned or centered.

Actual Results: Icon is top-aligned, event name is center-aligned.

Configuration:

var config = {
	address: "0.0.0.0", // 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, is "localhost"
	port: 8080,
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1",
		"192.168.0.0/16"], // 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"],

	language: "en",
	timeFormat: 12,
	modules: [
		{
			module: "alert",
		},
		// {
		// 	module: "updatenotification",
		// 	position: "top_bar"
		// },
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: 'calendar_monthly',
			position: 'top_right',
			config: {}
		},
		{
			module: 'uptimerobot',
			position: 'top_center',
			config: {
				api_key: "XXXXXXXXX",
				useIcons: true,
				useColors: true
			}
		},
		{
			module: 'calendar',
			position: 'top_left',
			config: {
				calendars: [
					{
						url: 'webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics',
						symbol: 'flag',
						color: '#e42217'
					},
					{
						url: 'XXXXXXXXX',
						symbol: 'user-friends',
						color: '#fff380'
					},
					{
						url: 'XXXXXXXXX',
						symbol: 'chalkboard-user',
						color: '#047832'
					},
					{
						url: 'XXXXXXXXX',
						symbol: 'globe',
						color: '#f93'
					}
				],
				fadePoint: 0.4,
				hideTime: true,
				showTimeToday: true,
				maximumNumberOfDays: 90,
				maximumEntries: 8,
				displaySymbol: true,
				colored: true,
				coloredSymbolOnly: true,
				wrapEvents: true,
				timeFormat: "relative",
				nextDaysRelative: true,
				hideOngoing: false,
				getRelative: 0
			}
		},
		{
			module: 'MMM-WeatherOrNot',
			position: 'bottom_bar',
			config: {
				location: 'XXXXX',
				locationCode: 'XXXXXXXXX',
				languages: 'en',
				tempUnits: 'F',
				days: '7',
				icons: 'Climacons Animated',
				theme: 'weather_one'
			}
		},
		{
			module: 'MMM-Dad-Jokes',
			position: 'top_bar',
			config: {
				updateInterval: 185001,
				filters: [
					'damn',
					'Hans free',
					'Zimbabwe'
				]
			}
		},
		{
			module: 'MMM-Wallpaper',
			position: 'fullscreen_below',
			config: {
				source: [
					'bing',
					'/r/EarthPorn',
					'/r/spaceporn',
					'/r/WaterPorn',
					'/r/AnimalPorn',
					'/r/NaturePorn',
					'/r/NatureIsFuckingLit',
					'/r/ITookAPicture',
					'/r/ArchitecturalRevival',
					'/r/naturepics',
					'/r/ruralporn',
					'/r/telephotolandscapes',
				],
				maximumEntries: 20,
				filter: 'none',
				nsfw: false
			},
			header: ''
		},
		{
			module: 'MMM-Remote-Control',
			config: {
				customCommand: {
					monitorOnCommand: 'vcgencmd display_power 1',
					monitorOffCommand: 'vcgencmd display_power 0',
					monitorStatusCommand: 'vcgencmd display_power -1 | grep -q ' +
						'"display_power=1" && echo "true" || echo ' +
						'"false"'
				},
				pm2ProcessName: "MagicMirror",
				apiKey: "XXXXXXXXX"
			}
		},
		{
			module: 'MMM-Powerwall',
			position: 'lower_third',
			config: {
				powerwallIP: 'XXXXXXXXX',
				powerwallPassword: 'XXXXXXXXX',
				teslaAPIUsername: 'XXXXXXXXX',
				teslaAPIPassword: 'XXXXXXXXX',
				home: [
					XXXXXXXXX,
					-XXXXXXXXX
				],
				twcManagerIP: 'XXXXXXXXX',
				teslamate: {
					url: "mqtt://XXXXXXXXX"
				},
				debug: true
			}
		},
		{
			module: 'MMM-WatchDog'
		}
	]

};

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

Additional Notes: The second emoji that appears in the screenshot is part of the event name.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions