• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.1k 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 May 15, 2024, 12:32 PM

    @sdetweil

    Okay, I also changed format to timeFormat

    S 1 Reply Last reply May 15, 2024, 1:18 PM Reply Quote 0
    • S Offline
      sdetweil @frits.erasmus
      last edited by sdetweil May 15, 2024, 1:25 PM May 15, 2024, 1:18 PM

      @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 May 15, 2024, 1:25 PM Reply Quote 0
      • S Offline
        sdetweil @sdetweil
        last edited by sdetweil May 15, 2024, 1:26 PM May 15, 2024, 1:25 PM

        @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 May 15, 2024, 10:21 PM Reply Quote 0
        • F Offline
          frits.erasmus @sdetweil
          last edited by May 15, 2024, 10:21 PM

          @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 May 15, 2024, 10:55 PM Reply Quote 0
          • S Offline
            sdetweil @frits.erasmus
            last edited by May 15, 2024, 10:55 PM

            @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 May 16, 2024, 8:29 AM Reply Quote 0
            • F Offline
              frits.erasmus @sdetweil
              last edited by May 16, 2024, 8:29 AM

              @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 May 16, 2024, 11:16 AM Reply Quote 0
              • S Offline
                sdetweil @frits.erasmus
                last edited by May 16, 2024, 11:16 AM

                @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
                1 / 2
                • First post
                  10/12
                  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