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

      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