Calendar

# Calendar in Homey Dashboard - Complete Guide **URL:** \ **Category:** Dashboards\ **Tags:** homey-pro\ **Created:** [November 22, 2025, 8:51am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709 "2025-11-22T08:51:05Z")\ **Posts on this page:** 20\ **Page:** 1

**Author:** ![Martin\_Scheugenpflug](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_scheugenpflug/32/80036_2.png) [@Martin\_Scheugenpflug](https://community.homey.app/u/Martin_Scheugenpflug)\ **Post date:** [November 22, 2025, 8:51am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/1 "2025-11-22T08:51:05Z")

Hi everyone! 👋 I’d like to share a solution for displaying your iCloud calendars or Google calendars directly in the Homey Dashboard - with automatic travel time calculation, departure warnings, and a modern design! ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/8/98de19f9b4ec31984c2ce8120fd5d35075d99033.jpeg) ## 🎯 Features - ✅ Shows appointments for the next 2 days (today & tomorrow) - ✅ Automatic travel time calculation to appointments with location - ✅ 3-level warning system: Normal / ⚠ Leave soon / 🚨 Leave NOW! - ✅ Auto-update every 5 minutes with funny animations 🎪🚀 - ✅ Dark/Light Mode - ✅ Multiple calendars with colored badges ## 📋 Requirements - **HTTP Server** App ([in Homey App Store](https://homey.app/de-de/app/net.weejewel.ftpserver/HTTPFTP-Server/)) - **Public iCloud calendar URLs** ## 🔧 Installation ### 1. Install HTTP Server App Install the app and use port 8000 (default). ### 2. Get iCloud Calendar URLs For each calendar: 1. Go to [iCloud.com](https://www.icloud.com) → Calendar 2. Click the share icon 📤 3. Enable “Public Calendar” 4. Copy the URL 5. Change `webcal://` to `https://` ### 3. Customize Script **Important sections in the script:** ```javascript // CALENDAR CONFIGURATION const calendars = [ { name: "Work", url: "https://p66-caldav.icloud.com/published/2/YOUR_URL_HERE", color: "#3b82f6", class: "work" } // Add more calendars... ]; // HOME COORDINATES (for travel time calculation) const homeLat = 48.1351; // ← YOUR Latitude const homeLon = 11.5820; // ← YOUR Longitude // Find your coordinates on Google Maps! ``` ### 4. Upload File 1. Save as `calendar.html` 2. Upload to HTTP Server App 3. URL: `http://YOUR-HOMEY-IP:8000/calendar.html` ### 5. Add to Dashboard Add a Web Widget with the URL. ## 🎨 Customization **Colors:** ```javascript color: "#3b82f6" // Blue color: "#ec4899" // Pink color: "#10b981" // Green ``` **Time Range:** ```javascript tomorrow.setDate(tomorrow.getDate() + 2); // 2 = today+tomorrow, 3 = 3 days ``` **Update Interval:** ```javascript setInterval(() => loadAllCalendars(true), 5 * 60 * 1000); // 5 min ``` ## 🐛 Troubleshooting - **No appointments?** → Check calendar URLs and “public” status - **No travel times?** → Verify home coordinates - **Missing animation?** → Clear browser cache (Ctrl+F5) ## 📝 The Script Complete code ready to copy: ```html Calendar

🏃‍♂️💨

Loading appointments...

Just a moment!

📅

``` ## 💡 Quick Start 1. Install HTTP Server App 2. Make iCloud calendars public & copy URLs 3. Customize script: `calendars` array + coordinates (`homeLat`, `homeLon`) 4. Save as `calendar.html` & upload 5. Add to Dashboard Have fun! 🎉 🤖 ---

**Author:** ![DirkG](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/dirkg/32/118897_2.png) [@DirkG](https://community.homey.app/u/DirkG)\ **Post date:** [November 22, 2025, 11:03am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/2 "2025-11-22T11:03:43Z")

Great tutorial! Thx! 👍 The link to the HTTP Server App doesn’t work. ---

**Author:** ![Martin\_Scheugenpflug](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_scheugenpflug/32/80036_2.png) [@Martin\_Scheugenpflug](https://community.homey.app/u/Martin_Scheugenpflug)\ **Post date:** [November 22, 2025, 11:31am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/3 "2025-11-22T11:31:35Z")

The code shows all appointments of the day by default, even if they’re already over. For example, an appointment from 10:00-12:00 is still displayed at 2:00 PM. ### Solution With this adjustment, appointments are automatically hidden as soon as their end time has passed. ### Installation Open the `calendar.html` file and search for this line (approximately in the middle of the script): ```auto tomorrow.setDate(tomorrow.getDate()+2);const futureEvents=allEvents.filter(event=>event.startDate>=now&&event.startDate{const eventEnd=event.endDate||event.startDate;return eventEnd>=currentTime&&event.startDate **Author:** ![Martin\_Scheugenpflug](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_scheugenpflug/32/80036_2.png) [@Martin\_Scheugenpflug](https://community.homey.app/u/Martin_Scheugenpflug)\ **Post date:** [November 22, 2025, 11:31am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/4 "2025-11-22T11:31:45Z") Fixed - Thanks ---

**Author:** ![Asterix](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/asterix/32/45768_2.png) [@Asterix](https://community.homey.app/u/Asterix)\ **Post date:** [November 23, 2025, 6:51pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/5 "2025-11-23T18:51:20Z")

> [@Martin\_Scheugenpflug](#): > > ### 4. Upload File > > 1. Save as `calendar.html` > 2. Upload to HTTP Server App > 3. URL: `http://YOUR-HOMEY-IP:8000/calendar.html` Hello Martin Thank you for your tutorial. I don’t have knowledge of programming, nor am I strong in IT stuff, unfortunately! I tried, but I don’t get quite smart at point 4, what that means? Do I understand that correctly, it also needs ftp? How can I do this “2. Upload to HTTP Server App”? ---

**Author:** ![Martin\_Scheugenpflug](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_scheugenpflug/32/80036_2.png) [@Martin\_Scheugenpflug](https://community.homey.app/u/Martin_Scheugenpflug)\ **Post date:** [November 23, 2025, 7:51pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/6 "2025-11-23T19:51:22Z")

Hi there! No worries, I’ll explain step-by-step how to upload the file to your Homey. 😊 **Important First Step:** You need to create an FTP user before you can connect! * * * ## Initial Setup (Required!) 1. On your Homey, go to: **More → Apps → HTTP/FTP Server → Configure App** 2. Click to **add your first FTP user** (set username + password) 3. Note your **Homey’s IP address** shown on that page * * * ## How to Upload the Calendar File ### Using FileZilla (Recommended) **Step 1: Install FileZilla** - Download FileZilla Client (free) from: [https://filezilla-project.org/](https://filezilla-project.org/) - Install it on your computer **Step 2: Connect with FileZilla** 1. Open FileZilla 2. At the top, fill in these fields: 3. Click **“Quickconnect”** **Step 3: Upload the File** 1. On the left side (your computer): Navigate to where you saved `calendar.html` 2. On the right side (Homey): You should see the web root folder 3. Drag and drop the `calendar.html` file from left to right 4. Done! ✅ **Step 4: Access Your Calendar** - Open your browser and go to: `http://YOUR-HOMEY-IP:8000/calendar.html` - Example: `http://192.168.1.50:8000/calendar.html` * * * ## Troubleshooting **Connection Refused?** - ✅ Did you create an FTP user in the app settings first? - ✅ Are you using port **2100** (not 21)? - ✅ Is Homey and your PC on the same network? **Can’t Login?** - Double-check username and password in **More → Apps → HTTP/FTP Server → Configure App** **“Cannot GET /calendar.html”?** - The file wasn’t uploaded correctly - Check if the file is in the correct folder - Make sure the filename is exactly `calendar.html` (not `calendar.html.txt`) **Calendar doesn’t display correctly?** - Clear your browser cache (Ctrl+F5) - Check if your calendar URLs are correct and set to “public” * * * ## Pro Tip 💡 Once uploaded successfully, you can add the calendar URL as a **Web Widget** in your Homey Dashboard for easy access! Hope this helps! Let me know if you have any questions. 🚀 ---

**Author:** ![Asterix](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/asterix/32/45768_2.png) [@Asterix](https://community.homey.app/u/Asterix)\ **Post date:** [November 24, 2025, 9:40pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/7 "2025-11-24T21:40:26Z")

Hello Thank you for your detailed guide, really great 👍 But I’m not putting it down 😭 It works until point 7, then I can’t get anywhere. When I try: > [@Martin\_Scheugenpflug](#): > > Step 6: Access Your Calendar > • Open your browser and go to: [http://YOUR-HOMEY-IP:8000/kalender.html](http://YOUR-HOMEY-IP:8000/kalender.html) > • Example: [http://192.168.1.50:8000/kalender.html](http://192.168.1.50:8000/kalender.html) Is the error message: Cannot GET /calendar.html When I try: > [@Martin\_Scheugenpflug](#): > > Step 1: Open Windows Explorer > • Press Windows + E > • In the address bar at the top, type: ftp://YOUR-HOMEY-IP > • Example: ftp://192.168.1.50 > • Press Enter If the error message comes: See picture =\> this translates as the following: This folder is inaccessible. Make sure the filename is correct and that you have the necessary access permissions. Details: The server connection could not be established. I don’t know where the mistake is, I’ve tried for several hours now, but without success. What could be the cause, what could I try to find the fault? ![Fehlermeldung ftp](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/d/7/d75fad36c2b2c42b20cac1c1a67505a85a6b0a4f.png) ---

**Author:** ![Martin\_Scheugenpflug](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_scheugenpflug/32/80036_2.png) [@Martin\_Scheugenpflug](https://community.homey.app/u/Martin_Scheugenpflug)\ **Post date:** [November 29, 2025, 6:50am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/8 "2025-11-29T06:50:21Z")

Hi! Thanks for trying out my guide! 😊 **The issue:** You need to create an FTP user first before you can connect! **Setup Steps:** 1. On your Homey, go to: **More → Apps → HTTP/FTP Server → Configure App** 2. Add your first FTP user (username + password) 3. Note your Homey’s IP address shown there **Important:** The FTP server uses **port 2100** (not the standard port 21!) **Connect with FileZilla (recommended):** - Host: `YOUR-HOMEY-IP` - Username: (what you created in step 2) - Password: (what you created in step 2) - Port: `2100` - Click “Quickconnect” **Then:** 1. Navigate to the web root folder 2. Upload your `calendar.html` file 3. Access it via `http://YOUR-HOMEY-IP:8000/calendar.html` **Quick Check:** - ✅ FTP user created in app settings? - ✅ Using port **2100** (not 21)? - ✅ Homey and PC on the same network? That should solve your connection problem! Let me know if it works! 🚀 ---

**Author:** ![JeroenD](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroend/32/14297_2.png) [@JeroenD](https://community.homey.app/u/JeroenD)\ **Post date:** [November 29, 2025, 10:11am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/9 "2025-11-29T10:11:40Z")

I have it working for iCloud. Does it also work with outlook? I have only an ics link found for outlook. ---

**Author:** ![Martin\_Scheugenpflug](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_scheugenpflug/32/80036_2.png) [@Martin\_Scheugenpflug](https://community.homey.app/u/Martin_Scheugenpflug)\ **Post date:** [November 30, 2025, 7:11am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/10 "2025-11-30T07:11:41Z")

Great that you got it working with iCloud! 🎉 **Yes, Outlook works too!** The script reads the standard ICS/iCal format, which both iCloud and Outlook use. **How to add your Outlook calendar:** Simply add it to the `calendars` array in the script: javascript ```auto const calendars = [ { name: "iCloud", url: "https://p66-caldav.icloud.com/published/2/YOUR_ICLOUD_URL", color: "#3b82f6", class: "work" }, { name: "Outlook", url: "https://outlook.live.com/owa/calendar/YOUR_OUTLOOK_ICS_LINK.ics", color: "#0078d4", // Outlook blue class: "private" } ]; ``` **Tips for Outlook ICS links:** - If your link starts with `webcal://`, change it to `https://` - Make sure the calendar is shared/public in Outlook settings - The link should end with `.ics` It should work the same way as iCloud. Let me know if you run into any issues! 🚀 ---

**Author:** ![JeroenD](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroend/32/14297_2.png) [@JeroenD](https://community.homey.app/u/JeroenD)\ **Post date:** [November 30, 2025, 7:14am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/11 "2025-11-30T07:14:38Z")

Thank you! I have got it working, forget to update my post. Love the calendar in the dashboard. ---

**Author:** ![Martin\_Scheugenpflug](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_scheugenpflug/32/80036_2.png) [@Martin\_Scheugenpflug](https://community.homey.app/u/Martin_Scheugenpflug)\ **Post date:** [November 30, 2025, 7:35am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/12 "2025-11-30T07:35:44Z")

## UPDATE: Seasonal Animations, Special Days & New Layout! Hey everyone! 👋 I’ve made some major updates to the calendar widget and wanted to share them with you. Here’s what’s new: ### ✨ New Features **🎄 Seasonal Animations** - **Christmas Mode** (Dec 1-27): Falling snowflakes, snow ground with sparkles, and a Christmas tree accent - **Easter Mode** (26 days before to 2 days after): Falling Easter eggs, spring meadow with flowers, and a bunny accent - Animation intensity increases as you get closer to the holiday! **💕 Special Days Support** - **Birthdays** : Confetti animation, cake accent, special event styling - **Wedding Anniversary** : Floating rings & champagne, golden styling - **Relationship Anniversary** : Floating hearts, pink styling - **Monthly Anniversaries** : Subtle heart animation on your special day each month **🇩🇪 German Public Holidays** - Automatic calculation of all German holidays (including Easter-based ones) - Holidays appear automatically in your calendar with special badges **🎨 Design Improvements** - Cleaner, more compact event cards - Better dark/light mode support - Clickable footer for manual refresh (no more floating button) - Seasonal ground effects that don’t interfere with content **🧪 Test Mode** - Add `?testdate=2024-12-24` to URL to preview any date - Perfect for testing seasonal animations! ### 📸 Screenshots The calendar now shows seasonal decorations and highlights special days: - Christmas: Snow falling, snowy ground, 🎄 accent - Easter: Eggs & butterflies falling, flower meadow, 🐰 accent - Birthdays: Confetti, 🎂 accent - Anniversaries: Hearts/rings floating, 💕/💍 accent ### ⚙ Configuration You can customize your special dates in the `SPECIAL_DATES` object: ```auto const SPECIAL_DATES = { weddingDay: { day: 1, month: 7, year: 2017 }, // Your wedding date partner1Birthday: { day: 15, month: 3, year: 1990 }, // Partner 1 partner2Birthday: { day: 22, month: 8, year: 1992 }, // Partner 2 anniversaryDay: { day: 14, month: 2 } // Monthly anniversary date }; ``` 📋 The Updated Code on GitHub: [GitHub - Scheugma86/homey-pro-calendar-widget: Minimalistic calendar widget with seasonal animations, German public holidays and relationship-related special days (birthdays, wedding day, monthly anniversaries). // Minimalistisches Kalender-Widget mit saisonalen Animationen, deutschen Feiertagen und besonderen Beziehungstagen (Geburtstage, Hochzeitstag, monatliche Jahrestage).](https://github.com/Scheugma86/homey-pro-calendar-widget) ---

**Author:** ![Asterix](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/asterix/32/45768_2.png) [@Asterix](https://community.homey.app/u/Asterix)\ **Post date:** [December 1, 2025, 3:14pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/13 "2025-12-01T15:14:08Z")

I created an FTP user in the HTTP/FTP app: ![grafik](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/f/2f1c89bcb5c4bb9d84422e11c96f5a4b1e6e93c1.png) The upload via Filezilla also seems to work: ![grafik](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/9/39c7f5c227dcc8199c81754c32fbec188cddddea.png) > [@Martin\_Scheugenpflug](#): > > Access it via `http://YOUR-HOMEY-IP:8000/calendar.html` I assume that with this step, you mean that I have to enter this in the web browser, right? =\> Of course with my Homey IP address and port 8000 If I do this, the following error message will be sent: ![grafik](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/d/d/ddd9ed18b365070ce4c2bcbe037e68230d32285a.png) What am I doing wrong?? I would love to use the calendar on my dashboard 🙏 ---

**Author:** ![Savell\_Martin](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/savell_martin/32/148160_2.png) [@Savell\_Martin](https://community.homey.app/u/Savell_Martin)\ **Post date:** [December 19, 2025, 5:36pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/14 "2025-12-19T17:36:29Z")

I’ve got this to work and its magic! One question, how can I display multiple days like your first image? Mine is only showing the day were on, which is nice but would like tomorrow too… ---

**Author:** ![Bert\_Bertels](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bert_bertels/32/120862_2.png) [@Bert\_Bertels](https://community.homey.app/u/Bert_Bertels)\ **Post date:** [December 25, 2025, 7:31am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/15 "2025-12-25T07:31:48Z")

waar kan je dit script aanpassen? ---

**Author:** ![JeroenD](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroend/32/14297_2.png) [@JeroenD](https://community.homey.app/u/JeroenD)\ **Post date:** [December 26, 2025, 8:06pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/16 "2025-12-26T20:06:23Z")

I have ask ChatGPT to do that for me. ---

**Author:** ![RayMan69](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rayman69/32/121273_2.png) [@RayMan69](https://community.homey.app/u/RayMan69)\ **Post date:** [December 28, 2025, 10:38am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/17 "2025-12-28T10:38:42Z")

Same problem here, anybody have the answer? ---

**Author:** ![Jan\_Scheld](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jan_scheld/32/29921_2.png) [@Jan\_Scheld](https://community.homey.app/u/Jan_Scheld)\ **Post date:** [December 28, 2025, 3:21pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/18 "2025-12-28T15:21:27Z")

I had the same issue that only today was shown. I’ve discovered a second occurence of “tomorrow.setDate(tomorrow.getDate()+2);”. I’ve changed it here as well and it’s working like a charm, now. Just an idea - make the language configurable (e.g. “en-us” occurences or the texts displayed.). But it also worked out going through the script! Great job! I was looking for an Outlook/Homey integration for quite a while!!! Awesome! ---

**Author:** ![Goldunexist](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/goldunexist/32/78869_2.png) [@Goldunexist](https://community.homey.app/u/Goldunexist)\ **Post date:** [December 28, 2025, 10:11pm UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/19 "2025-12-28T22:11:44Z")

@Martin_Scheugenpflug Looks like something is not working correctly with occurrence. I have an appointment tomorrow which is a weekly occurrence and it is not showing up. ---

**Author:** ![Christer\_Havarstein](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/christer_havarstein/32/116879_2.png) [@Christer\_Havarstein](https://community.homey.app/u/Christer_Havarstein)\ **Post date:** [January 2, 2026, 8:49am UTC](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709/20 "2026-01-02T08:49:32Z")

Perfect @Martin_Scheugenpflug🙂 Is it possible to show appointments for the next X days? For instance 7 days. [Next page](https://community.homey.app/t/calendar-in-homey-dashboard-complete-guide/145709.md?page=2)