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.

    Default Calendar // Help in tweaking the dateheaders mode

    Scheduled Pinned Locked Moved Development
    7 Posts 2 Posters 1.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.
    • B Offline
      bolish
      last edited by bolish

      Hi,

      When I’m in dateheaders mode, the fulldayevents are always displayed on the start date.

      I would like it to be displayed starting today’s date even if the fulldayevent started days before.

      i.e : I’ve a fulldayevent which started on March 6th and finishes tomorrow.
      In the dateheaders view, event is displayed on March 6th date. Which I don’t want.
      What I would like is to see it in today’s + tomorrow’s header.

      I’ve already tried to modify calendar.js line 258 in several ways but don’t manage to get it done. (maybe it’s even not the right line to modify…)

      Would appreciate if someone could help me in this! Thanks already.

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

        @bolish

        well , it should be one of these two lines, and u might want to make it configurable

        /* line 302 */								timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").format(this.config.fullDayEventDateFormat));
        							}
        						} else {
        							// show future time relative, start of day to start of day
        /* line 306 */							timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").from(moment().format("YYYYMMDD")));
        

        and the value should be

        moment(now, "x")
        

        instead of

        moment(event.startDate, "x")
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • B Offline
          bolish
          last edited by

          Thanks @sdetweil
          I will try that.
          Nevertheless, it seems strange … because from my understading, everything which is between line 264 and 364 seems to be linked to “not dateheaders” format.

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

            @bolish Ok, headers mode is really primative

            it gets the calendar entry as a string
            and puts that out…

            starting on line 159

            	for (var e in events) {
            			var event = events[e];
            			var dateAsString = moment(event.startDate, "x").format(this.config.dateFormat);
            			if(this.config.timeFormat === "dateheaders"){
            				if(lastSeenDate !== dateAsString){
            					var dateRow = document.createElement("tr");
            					dateRow.className = "normal";
            					var dateCell = document.createElement("td");
            
            					dateCell.colSpan = "3";
            					dateCell.innerHTML = dateAsString;    --------------
            					dateRow.appendChild(dateCell);
            					wrapper.appendChild(dateRow);
            

            in the area u were looking, it only does that formatting if NOT a full date event

            			if(this.config.timeFormat === "dateheaders"){  if YES
            
            				if (event.fullDayEvent) {
            					titleWrapper.colSpan = "2";
            					titleWrapper.align = "left";
                                                    // just fixup the style info, data posted above
            				}else{
                                                    // NOT fullday event
            					var timeClass = this.timeClassForUrl(event.url);
            					var timeWrapper = document.createElement("td");
            					timeWrapper.className = "time light " + timeClass;
            					timeWrapper.align = "left";
            					timeWrapper.style.paddingLeft = "2px";
            					timeWrapper.innerHTML = moment(event.startDate, "x").format("LT"); //only NOT fullday
            					eventWrapper.appendChild(timeWrapper);
            					titleWrapper.align = "right";
            				}
            

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • B Offline
              bolish
              last edited by bolish

              hi Sam @sdetweil

              I’ve tried following but I believe this is not the way to do it.
              It seems I can’t figure out how the dateheaders mode is working…

              I “only” want that fulldayevents which started earlier than today stops to be displayed in earlier dates and only starts today…

              		for (var e in events) {
              			var event = events[e];
              			var dateAsString = moment(event.startDate, "x").format(this.config.dateFormat);
              			var dateAsString2 = moment(now, "x").format(this.config.dateFormat);
              			if(this.config.timeFormat === "dateheaders"){
              				if(lastSeenDate !== dateAsString){
              					var dateRow = document.createElement("tr");
              					dateRow.className = "normal";
              					var dateCell = document.createElement("td");
              
              					dateCell.colSpan = "3";
              						if (event.fullDayEvent) {
              							dateCell.innerHTML = dateAsString2;
              							} else {
              							date.Cell.innerHTML = dateAsString;
              							}
              					dateRow.appendChild(dateCell);
              					wrapper.appendChild(dateRow);
              
              					if (e >= startFade) {			//fading
              						currentFadeStep = e - startFade;
              						dateRow.style.opacity = 1 - (1 / fadeSteps * currentFadeStep);
              					}
              
              					lastSeenDate = dateAsString;
              				}
              			}
              

              Don’t you think that it’s maybe something to be added in line 449?

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

                ok, I added an event, and debugged… the change is right there at the top of the loop, line 159

                	for (var e in events) {
                			var event = events[e];
                			var dateAsString = moment(event.startDate, "x").format(this.config.dateFormat);
                			if(this.config.timeFormat === "dateheaders"){
                				if(lastSeenDate !== dateAsString){
                					var dateRow = document.createElement("tr");
                					dateRow.className = "normal";
                					var dateCell = document.createElement("td");
                
                					dateCell.colSpan = "3";
                					dateCell.innerHTML = dateAsString;    < --------------
                					dateRow.appendChild(dateCell);
                					wrapper.appendChild(dateRow);
                

                I moved the

                   var now = new Date()
                

                from line 272
                and have this (edited to add space behind the < )

                    for (var e in events) {
                      var event = events[e];
                      var dateAsString = moment(event.startDate, "x").format(this.config.dateFormat);
                      var now = new Date();
                      if(this.config.timeFormat === "dateheaders"){
                        if(lastSeenDate !== dateAsString){
                          var dateRow = document.createElement("tr");
                          dateRow.className = "normal";
                          var dateCell = document.createElement("td");
                
                          dateCell.colSpan = "3";
                          if(event.startDate< now){            
                            Log.log("calendar, event start before today, end after today "+dateAsString)
                            dateAsString= moment(now, "x").format(this.config.dateFormat);
                          }          
                          dateCell.innerHTML = dateAsString;
                          dateRow.appendChild(dateCell);
                          wrapper.appendChild(dateRow);
                
                          if (e >= startFade) {			//fading
                            currentFadeStep = e - startFade;
                            dateRow.style.opacity = 1 - (1 / fadeSteps * currentFadeStep);
                          }
                
                          lastSeenDate = dateAsString;
                        }
                      }
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • B Offline
                  bolish
                  last edited by

                  @sdetweil
                  Thanks for your support, works fine!

                  Last thing :

                  i.e : we are on March 11th.
                  fulldayevent starts on March 9th and finishes on 13th
                  Thanks to you, the event only starts to show on 11th.
                  Unfortunatly, it “only” shows on 11th. not on 12 and 13th.

                  Looking at how the dateheaders part is written, I believe it’s impossible, correct? (as the event display date is only based on one dateasstring…)

                  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