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.

    Calendar: Change format of relative times/dates

    Scheduled Pinned Locked Moved Troubleshooting
    calendar
    7 Posts 2 Posters 1.7k 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.
    • C Offline
      cokelid
      last edited by

      I’d like to change the relative time format for Calendar entries from (e.g.) “Monday at 07:00” to “Mon 07:00” or similar. I’m using the standard “calendar” module.
      I’m using a small screen (Raspberry Pi touch screen) with MagicMirror and so have very limited screen real estate. As shown below, the “Monday at 07:00” takes up a good chunk of space, so I’d like to make the column as compact as possible…
      I’ve fiddled with various config entries but can find nothing that controls the “Monday at” part of the text.
      Any ideas?

      20089a38-aa0e-4055-9867-4ac0e9ffc3d1-image.png

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @cokelid
        last edited by

        @cokelid there are 4 time formatting options

        		timeFormat: "relative",
        		dateFormat: "MMM Do",
        		dateEndFormat: "LT",
        		fullDayEventDateFormat: "MMM Do",
        

        and here are the meanings
        https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        C 1 Reply Last reply Reply Quote 0
        • C Offline
          cokelid @sdetweil
          last edited by

          @sdetweil said in Calendar: Change format of relative times/dates:

          dateFormat: “MMM Do”,
          dateEndFormat: “LT”,
          fullDayEventDateFormat: “MMM Do”,

          Thanks @sdetweil, I appreciate the speedy response! I have given that a go but they don’t affect the “Monday at 07:00” at all?

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @cokelid
            last edited by

            @cokelid one left. timeFormat

            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

              @cokelid there are two hard coded moment() formats

              fromNow()
              and
              calendar()

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • C Offline
                cokelid
                last edited by

                Thanks @sdetweil!
                So it’s the call to moment.calendar() as you suggested. I changed calendar.js (line 339) to pass in a customised format:

                calFormat = {
                	sameDay: 'LT',
                	nextDay: 'ddd[,] LT',
                	nextWeek: 'ddd[,] LT',
                	lastDay: '[Yesterday]',
                	lastWeek: '[Last] ddd',
                	sameElse: 'DD/MM/YYYY'
                };
                timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").calendar(null, calFormat));			
                

                Presumably I could easily pull that format in from this.config?

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @cokelid
                  last edited by

                  @cokelid yes, same as the others

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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