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.
    • F Offline
      frits.erasmus
      last edited by

      I would like to show the date and time of an event in the format
      DD MM YYYY hh:mm

      I have tried the options in
      link text
      I just cannot get it right.

      Any help will be appreciated

      Frits

      d3c8b043-fd43-47d0-8ddf-03c58ccd9b28-image.png

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