Glass-style horizontal daily calendar strip for MagicMirror bottom_bar. Pulls ICS feeds plus optional events from Calendar/MyAgenda and weather from MMM-AmbientWeather + weather.gov to keep a concise, day-by-day view.
- ICS fetch/parse with RRULE expansion via
node_helper, plus optional data from MagicMirror Calendar, MMM-MyAgenda, and MMM-AmbientWeather notifications. - Horizontal day row with configurable
daysToShowandstartDayOffset, with busy bar, marquee overflow, and per-day visibility toggles. - Icon mapping per keyword/calendar using Font Awesome, Boxicons, Iconoir SVGs, or Iconify.
- Themes: light/dark/auto/autoSun (switches by sunrise/sunset hours), with today highlighting and optional past-day dimming.
- Optional per-date or rule-based backgrounds to personalize day chips.
- Weather row: AmbientWeather realtime for today and weather.gov forecast for upcoming days (lat/long).
Replace these placeholders with your captures (suggested paths in docs/media/):
- MagicMirror.
- Optional data sources:
- MagicMirror default Calendar module broadcasting
CALENDAR_EVENTS. - MMM-MyAgenda broadcasting
MYAGENDA_EVENTS. - MMM-AmbientWeather broadcasting
AMBIENT_WEATHER_DATA.
- MagicMirror default Calendar module broadcasting
- Node.js dependencies are installed locally via
npm install.
cd ~/MagicMirror/modules
git clone https://github.com/hearter20176/MMM-GlassDailyCalendar.git
cd MMM-GlassDailyCalendar
npm installAdd to config/config.js:
{
module: "MMM-GlassDailyCalendar",
position: "bottom_bar",
config: {
header: "Today & Next",
locale: "en",
// Layout
daysToShow: 5,
startDayOffset: 0,
highlightToday: true,
dimPastDays: true,
marqueeEvents: false, // scroll long titles instead of truncate
marqueeThreshold: 26,
maxEventsPerDay: 4,
showOverflowIndicator: true,
// Sources (toggle per module)
useCalendarModule: false,
useMyAgenda: true,
useAmbientWeather: true,
icalSources: [
{ url: "https://example.com/holidays.ics", name: "Holidays", color: "#38bdf8" }
],
// Weather.gov forecast (future days)
weatherGov: {
enabled: true,
latitude: 40.0,
longitude: -105.0
},
// Visuals
theme: "autoSun", // "dark" | "light" | "auto" | "autoSun"
sunriseHour: 7,
sunsetHour: 19,
eventIcons: {
"birthday": { type: "fa", icon: "fa-solid fa-cake-candles" },
"flight": { type: "box", icon: "bx bx-plane-alt" },
"office": { type: "iconoir", icon: "briefcase" },
"run": { type: "iconify", icon: "mdi:run" }
},
calendarVisibility: { "Holidays": true },
dayBackgrounds: { "2025-12-25": "/modules/MMM-GlassDailyCalendar/img/christmas.jpg" },
dayBackgroundRules: [
{ calendar: "holiday", keyword: "snow", image: "/modules/MMM-GlassDailyCalendar/img/winter.jpg" }
],
// Intervals
updateInterval: 10 * 60 * 1000,
animationSpeed: 400
}
}- Data:
useCalendarModule,useMyAgenda,useAmbientWeather,icalSources[](url, name, color). - Layout:
daysToShow,startDayOffset,maxEventsPerDay,showOverflowIndicator,marqueeEvents,marqueeThreshold. - Theme:
theme,sunriseHour,sunsetHour,highlightToday,dimPastDays. - Icons/backgrounds:
eventIconsmap,calendarVisibility,dayBackgrounds,dayBackgroundRules. - Weather:
weatherGov.enabled,latitude,longitude(required for weather.gov forecast when enabled).
- Listens for
CALENDAR_EVENTS,MYAGENDA_EVENTS, andAMBIENT_WEATHER_DATAwhen the correspondinguse*flags aretrue. Ensure those modules are configured to broadcast their payloads. - ICS feeds are pulled server-side via
node_helperwith RRULE expansion;rangeStart/rangeEndare derived fromdaysToShowandstartDayOffset.
- Optimized for
bottom_barwith a single wide glass card and horizontal day chips. - Busy bar mixes all-day and timed events; overflow indicator shows when
maxEventsPerDayis exceeded. - Weather.gov responses require valid US lat/long; AmbientWeather provides the current conditions row.
MIT
