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 @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
                      • 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
                        • 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