• 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 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.
  • F Offline
    frits.erasmus
    last edited by May 14, 2024, 4:49 PM

    I would like to show the date and time of an event in the format
    DD MM YYYY hh:mm

    I have tried the options in
    link text
    I just cannot get it right.

    Any help will be appreciated

    Frits

    d3c8b043-fd43-47d0-8ddf-03c58ccd9b28-image.png

    S 1 Reply Last reply May 14, 2024, 4:56 PM Reply Quote 0
    • S Away
      sdetweil @frits.erasmus
      last edited by sdetweil May 14, 2024, 4:59 PM May 14, 2024, 4:56 PM

      @frits-erasmus this is because you have timeFormat:“relative” (relative to today)

      you need timeFormat:“absolute”

      then the dateFormat: string will be used

      from the doc

      timeFormat	Display event times as absolute dates, or relative time, or using absolute date headers with times for each event next to it
      
      Possible values: absolute or relative or dateheaders
      Default value: relative  <-------
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      F 1 Reply Last reply May 15, 2024, 9:13 AM Reply Quote 0
      • F Offline
        frits.erasmus @sdetweil
        last edited by May 15, 2024, 9:13 AM

        @sdetweil Hi Sam,
        I must be doing something wrong and I cannot figure out how to resolve this.
        Below my code and screenshot of results

         {
                                module: "calendar",
                                header: "Daphne school program",
                                position: "top_left",
                                config: {
        
                                        maximumEntries: 15,
                                        maximumNumberOfDays: 5,
                                        maxTitleLength: 65,
                                        fade: false,
                                        colored: true,
                                        wrapEvents: true,
                                        format: "absolute",
                                        dateFormat: "Do MMMM hh:mm",
        
                                        calendars: [
                                                {
                                                        fetchInterval: 7 * 24 * 60 * 60 * 1000,
                                                        symbol: "calendar   ",
                                                        color: "#B4B4B4",
                                                        url: 
        

        70b51c1d-59c2-4eb2-886e-c15f7ff24d9b-image.png

        Could you please kindly help with some pointers?

        Also I am studying the following to do the right thing, but it appears you quoted from another source - Do you mind providing that for me:

        MagicMirror² Documentation

        and

        String + Format

        Thank you in advance
        Frits

        S 1 Reply Last reply May 15, 2024, 10:13 AM Reply Quote 0
        • S Away
          sdetweil @frits.erasmus
          last edited by May 15, 2024, 10:13 AM

          @frits-erasmus said in Date display for Calendar entries to be DD MM YYYY hh:mm - currently is "In 3 days"/"In 15 hours":

          format: “absolute”,

          but it’s timeFormat

          yes, the calendar doc is here
          https://docs.magicmirror.builders/modules/calendar.html#using-the-module

          the upper/first part is settings for ALL calendars
          the lower/second part is settings for a particular calendar. { url:…}

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          F 2 Replies Last reply May 15, 2024, 12:21 PM Reply Quote 0
          • F Offline
            frits.erasmus @sdetweil
            last edited by May 15, 2024, 12:21 PM

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