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

Calendar: Change format of relative times/dates

Scheduled Pinned Locked Moved Troubleshooting
calendar
7 Posts 2 Posters 1.3k 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 Oct 3, 2020, 12:34 PM

    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 Oct 3, 2020, 12:52 PM Reply Quote 0
    • S Offline
      sdetweil @cokelid
      last edited by Oct 3, 2020, 12:52 PM

      @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 Oct 3, 2020, 1:47 PM Reply Quote 0
      • C Offline
        cokelid @sdetweil
        last edited by Oct 3, 2020, 1:47 PM

        @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 Oct 3, 2020, 1:54 PM Reply Quote 0
        • S Offline
          sdetweil @cokelid
          last edited by Oct 3, 2020, 1:54 PM

          @cokelid one left. timeFormat

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          S 1 Reply Last reply Oct 3, 2020, 1:58 PM Reply Quote 0
          • S Offline
            sdetweil @sdetweil
            last edited by Oct 3, 2020, 1:58 PM

            @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 Oct 3, 2020, 5:33 PM

              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 Oct 3, 2020, 5:56 PM Reply Quote 0
              • S Offline
                sdetweil @cokelid
                last edited by Oct 3, 2020, 5:56 PM

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