MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Introducing MMM-BirthdayCalendarCountdown – Your MagicMirror Birthday Countdown Module!

    Scheduled Pinned Locked Moved Utilities
    6 Posts 4 Posters 949 Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      mmmallday
      last edited by

      Hi everyone,

      I’m excited to announce my new MagicMirror module, MMM-BirthdayCalendarCountdown! This module listens for calendar events (via the "CALENDAR_EVENTS" notification) and filters them based on a configurable keyword (defaulting to "birthday"). It then displays upcoming birthday events on your MagicMirror along with a live countdown timer for events that occur within a configurable window (default is 7 days).

      Features

      • Customizable Keyword Filtering:
        Easily filter calendar events for birthdays (or any other event type by changing the search keyword).

      • Live Countdown:
        Watch as the countdown for each upcoming birthday updates in real time.

      • Clean, Stylish Display:
        Comes with a dedicated CSS file for a neat and modern look.

      • Configurable Options:
        Adjust the update interval, countdown window, maximum events displayed, and search keyword to suit your needs.

      How It Works

      The module listens for the "CALENDAR_EVENTS" notification from your calendar module. It filters events based on the title, then sorts and displays the upcoming birthdays. If an event is within the specified countdown window, a live countdown (days, hours, minutes, seconds) is shown right below the event details.

      Installation & Setup

      1. Clone or Download the Repository:
        Clone the repository into your MagicMirror modules directory:

        cd ~/MagicMirror/modules
        git clone https://github.com/wlans/MMM-BirthdayCalendarCountdown.git
        
      2. Configure the Module:
        Add the following entry to your config/config.js file:

        {
          module: "MMM-BirthdayCalendarCountdown",
          position: "top_left",  // or any other region you prefer
          config: {
            updateInterval: 1000,       // Refresh display every second
            countdownStartDays: 7,      // Show countdown for events within 7 days
            maxDisplay: 5,              // Display up to 5 upcoming events
            searchKeyword: "birthday"   // Change this keyword to filter different event types
          }
        },
        
      3. Ensure You Have a Calendar Module:
        Make sure your MagicMirror setup includes a calendar module that sends out the "CALENDAR_EVENTS" notification with the proper event format (each event must include at least a title and startDate).

      4. Customize the Look:
        The module comes with a CSS file (MMM-BirthdayCalendarCountdown.css) to provide styling. Feel free to tweak it to match your mirror’s theme.

      Demo

      Check out the GitHub repository for further documentation:
      https://github.com/wlans/MMM-BirthdayCalendarCountdown

      Feedback & Contributions

      I’d love to hear your feedback or see improvements from the community. If you run into any issues, have ideas for new features, or just want to say hi, please open an issue or a pull request on GitHub!

      Happy mirroring!

      Cheers,
      wlans

      1 Reply Last reply Reply Quote 1
      • B Offline
        bicolorbore586
        last edited by

        Do you have any screenshots??

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          mmmallday @bicolorbore586
          last edited by

          @bicolorbore586

          All I have so far

          be2e0465-4f2c-4fbe-a666-2955afcc094d-image.png

          M 1 Reply Last reply Reply Quote 1
          • M Offline
            mmmallday @mmmallday
            last edited by

            @mmmallday
            1b42408c-7db9-4d84-9a76-9dae237fa0f7-image.png

            More

            1 Reply Last reply Reply Quote 1
            • P Offline
              p1lspeda
              last edited by

              Hi,
              I came across this module and I like the idea.
              I have two instances of this module running.
              Only difference are the Keywords.

              this is my config

              {
                module: "MMM-BirthdayCalendarCountdown",
                position: "top_left",  // Choose your preferred position (e.g., top_left, top_right, etc.)
                config: {
                  updateInterval: 1000,       // Refresh every second for live countdown updates
                  countdownStartDays: 7,      // Show countdown if the birthday is within 7 days
                  upcomingWindowDays: 90,     // Only display birthdays within the next 30 days
                  maxDisplay: 5,              // Maximum number of birthdays to display
                  searchKeyword: "Birthday"   // Keyword to filter calendar events (case-insensitive)
                }
              },
              
              {
                module: "MMM-BirthdayCalendarCountdown",
                position: "top_left",  // Choose your preferred position (e.g., top_left, top_right, etc.)
                config: {
                  updateInterval: 1000,       // Refresh every second for live countdown updates
                  countdownStartDays: 7,      // Show countdown if the birthday is within 7 days
                  upcomingWindowDays: 90,     // Only display birthdays within the next 30 days
                  maxDisplay: 5,              // Maximum number of birthdays to display
                  searchKeyword: "Flight"   // Keyword to filter calendar events (case-insensitive)
                }
              },
              

              Unfortunately no Events are shown (there a multiple “Birthday” and “Flight” within the upcoming 90 days).
              Considering that I also use MMM-CalendarExt3 which also listens to CALENDAR_EVENTS (and this module works flawlessly), I guess there is some bug/issue.

              What info do I need to supply in order to help with solving the issue ?

              Thanks

              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @p1lspeda
                last edited by

                @p1lspeda as this module is done all in browser, can you look at the browser log

                ctrl-shift-i on the MagicMirror screen keyboard
                Select the console tab
                Add countd to the filter field

                This filter will limit messages only from this module
                Can you show us what messages there are

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy