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

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 Mar 8, 2019, 7:46 PM

    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 Mar 8, 2019, 8:34 PM Reply Quote 0
    • S Offline
      sdetweil @bolish
      last edited by Mar 8, 2019, 8:34 PM

      @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 Mar 9, 2019, 9:27 AM Mar 9, 2019, 9:25 AM

        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 Mar 10, 2019, 1:20 AM Mar 9, 2019, 1:32 PM

          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 Mar 11, 2019, 7:41 PM

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