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.7k 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 sdetweil

      @frits-erasmus this is because you have timeFormat:“relative” (relative to today)

      you need timeFormat:“absolute”

      then the dateFormat: string will be used

      from the doc

      timeFormat	Display event times as absolute dates, or relative time, or using absolute date headers with times for each event next to it
      
      Possible values: absolute or relative or dateheaders
      Default value: relative  <-------
      

      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 Hi Sam,
        I must be doing something wrong and I cannot figure out how to resolve this.
        Below my code and screenshot of results

         {
                                module: "calendar",
                                header: "Daphne school program",
                                position: "top_left",
                                config: {
        
                                        maximumEntries: 15,
                                        maximumNumberOfDays: 5,
                                        maxTitleLength: 65,
                                        fade: false,
                                        colored: true,
                                        wrapEvents: true,
                                        format: "absolute",
                                        dateFormat: "Do MMMM hh:mm",
        
                                        calendars: [
                                                {
                                                        fetchInterval: 7 * 24 * 60 * 60 * 1000,
                                                        symbol: "calendar   ",
                                                        color: "#B4B4B4",
                                                        url: 
        

        70b51c1d-59c2-4eb2-886e-c15f7ff24d9b-image.png

        Could you please kindly help with some pointers?

        Also I am studying the following to do the right thing, but it appears you quoted from another source - Do you mind providing that for me:

        MagicMirror² Documentation

        and

        String + Format

        Thank you in advance
        Frits

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