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

      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