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.

    Date display for Calendar entries to be DD MM YYYY hh:mm - currently is "In 3 days"/"In 15 hours"

    Scheduled Pinned Locked Moved Utilities
    12 Posts 2 Posters 2.4k Views 2 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.
    • S Offline
      sdetweil @frits.erasmus
      last edited by

      @frits-erasmus said in Date display for Calendar entries to be DD MM YYYY hh:mm - currently is "In 3 days"/"In 15 hours":

      format: “absolute”,

      but it’s timeFormat

      yes, the calendar doc is here
      https://docs.magicmirror.builders/modules/calendar.html#using-the-module

      the upper/first part is settings for ALL calendars
      the lower/second part is settings for a particular calendar. { url:…}

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      F 2 Replies Last reply Reply Quote 0
      • F Offline
        frits.erasmus @sdetweil
        last edited by

        @sdetweil

        Thank you Sam for that but I still do not get it to do what I want.
        I might be too thick.

        To make sure I understand you correct?
        White = upper part
        Yellow = lower part

        4997a36a-be0e-44ee-a2f7-c3b754ea2cc9-image.png

        I have now tried the : format: “absolute” setting in the second part and as I understand in the manual set the date and time to show 15 May 14:25 .

        Just to make sure I also commented out the two format and dateFormat lines in the upper part

        What am I doing wrong then?

        1 Reply Last reply Reply Quote 0
        • F Offline
          frits.erasmus @sdetweil
          last edited by

          @sdetweil

          Okay, I also changed format to timeFormat

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @frits.erasmus
            last edited by sdetweil

            @frits-erasmus can u chat text me the config for the calendar module…

            i did this

                  {
                    module: "calendar",
                    classes:"page1",
                    header: "US Holidays",
                    position: "top_left",
                    config: {
                      timeFormat: "absolute",
                      dateFormat:"MMM, HH:mm",
                      fullDayEventDateFormat: "MMM DD",
                      colored:true,
                      hidePrivate: true,
                      fetchInterval: 120000,
                      broadcastPastEvents: false,
                      calendars: [
                        {
                          fetchInterval: 604800000,
                          symbol: "calendar-check",
                          color: "pink",
                          url: "http://localhost:8090/modules/default/calendar/test_time_width.ics",
            
                        },
                        {
                          url: "https://www.google.com/calendar/ical/en.usa%23holiday@group.v.calendar.google.com/public/basic.ics",
                          color:"green"
                        }
                      ]
                    },
            

            and got this
            Screenshot at 2024-05-15 08-15-37.png

            note that dateFormat andfullDayEventDateFormat: “MMM DD” are different settings… (one has a time, the other doesn’t) (oops no time shown, see next post)

            extra spaces cause problems too … symbol:"calendar ", is NOT correct

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              @frits-erasmus I also changed the test cal to have time and used other properties to force absolute

                    {
                      module: "calendar",
                      classes:"page1",
                      header: "US Holidays",
                      position: "top_left",
                      config: {
                        timeFormat: "absolute",
                        dateFormat:"MMM, HH:mm",
                        fullDayEventDateFormat: "MMM DD",
                        colored:true,
                        urgency: 0,
                        getRelative: 0,
                        hidePrivate: true,
                        fetchInterval: 120000,
                        broadcastPastEvents: false,
                        calendars: [
                          {
                            fetchInterval: 604800000,
                            symbol: "calendar-check",
                            color: "pink",
                            url: "http://localhost:8090/modules/default/calendar/test_time_width.ics",
                            //url: "https://calendar.google.com/calendar/ical/brigidspina%40gmail.com/private-065de47caae525540e8b162d9af31b3f/basic.ics"
                          },
                          {
                            url: "https://www.google.com/calendar/ical/en.usa%23holiday@group.v.calendar.google.com/public/basic.ics",
                            color:"green"
                          }
                        ]
                      },
              }
              

              Screenshot at 2024-05-15 08-22-44.png

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              F 1 Reply Last reply Reply Quote 0
              • F Offline
                frits.erasmus @sdetweil
                last edited by

                @sdetweil

                My Code

                                {
                                        module: "calendar",
                                        header: "Daphne school program",
                                        position: "top_left",
                                        config: {
                
                                                timeFormat: "absolute",
                                                dateFormat: "DD MMMM HH:mm",
                                                colored: true,
                                                timeFormat: "absolute",
                                                maximumEntries: 15,
                                                maximumNumberOfDays: 5,
                                                maxTitleLength: 65,
                                                fade: false,
                                                wrapEvents: true,
                                                pastDaysCount: 1,
                                                fetchInterval: 5 * 60 * 1000,
                
                                                calendars: [
                                                        {
                                                                symbol: "calendar   ",
                                                                color: "#37CBFF",
                                                                url: "https://teneo.instructure.com/feeds/calendars/user_.ics"
                                                        },
                                                       {
                                                                symbol: "fa-solid fa-pen-clip",
                                                                color: "#F22E66",
                                                                url: "https://calendar.google.com/calendar/ical//basic.ics"
                                                        }
                                                ]
                                        }
                                },
                
                

                Yes - I deleted a few characters from the URLs

                MMM display

                7b1f0625-8818-46d7-8ecd-a3a72cdddd21-image.png

                I double-checked everything and cannot find the error

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @frits.erasmus
                  last edited by

                  @frits-erasmus notice the getRelative in mine

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  F 1 Reply Last reply Reply Quote 0
                  • F Offline
                    frits.erasmus @sdetweil
                    last edited by

                    @sdetweil
                    Thank you very much SAM - I really appreciate your help.

                    My understanding was that I needed to use one of the options:
                    the options timeFormat:“absolute”, urgency:0, getRelative:0,

                    Now, with hindsight, it makes sense that I should have all.

                    Thank you - you have taught me a lot. - now for me to tackle the next one.

                    My calendar:

                    8b39c846-b238-4e5d-b91c-cbc72f4f3c84-image.png

                    I am going to try and fade the events that are in the past …Is that even possible? …Have to search

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @frits.erasmus
                      last edited by

                      @frits-erasmusthe default calendar does not display events from the past, ever.

                      other add on modules that display a wall calendar view will do that.

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 2 / 2
                      • 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