CODEWITHSUNDEEP
javascriptjqueryloopsiterationmomentjs
Michał Tkaczyk
Michał Tkaczyk

Reputation: 736

Two loops iterating through dates

I've tried to create some kind of calendar, which is generated by javascript (jQuery + moment.js). The start date is start of iso week code of the project, and the finish date is end of iso week code of the project. I'm trying to iterate two times through dates, beginning from start date, ending on finish date.

Problem is that after the first iteration, second one is not executed, and I don't know why. Any ideas?

$(function(){
				var startAt = moment(("2017-02-15 00:00:00").substring(0,10), "YYYYMMDD");
        var finishAt = moment(("2017-12-28 00:00:00").substring(0,10), "YYYYMMDD");
        
        var startAtWeekCode = startAt.isoWeek();
        var finishAtWeekCode = finishAt.isoWeek();
        
        var startAtYear = startAt.year();
        var finishAtYear = finishAt.year();
        
        var startAtDay = startAt.startOf('isoWeek');
        var finishAtDay = finishAt.endOf('isoWeek');
        
        var daysLength = finishAtDay.diff(startAtDay, 'days');
        
        $(".week-grid").css({
            width: daysLength*15
        });

    for(var i=startAtDay; i<finishAtDay; i.add(1, "month")){
      console.log("MONTH");
      var $monthItem = $('<div class="month"></div>');
      $monthItem.text(i.format("MMMM"));
      $monthItem.css({
        width: i.daysInMonth()*15
      });

      $(".line-calendar.project-calendar-months").append($monthItem);
    }
    
    for(var j=startAtDay; j<finishAtDay; j.add(1, "day")){
            console.log("day");
            var classSat = "";
            var classSun = "";
            var classHoli = ""; 
            
            
            if(j.day() == 6){
                classSat = " sat ";
            }
            if(j.day() == 0){
                classSun = " sun ";
            }
            $(".line-calendar.project-calendar-days").append('<div data-day-of-week="'+ j.day() +'" class="day' + classSat + classSun + classHoli + '">' + j.date() + '</div>');
        }
});
.overflow-x{
position: absolute;
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}

.month {
    color: #666;
    height: 15px;
    display: inline-block;
    float: left;
}

.day {
    width: 15px;
    height: 15px;
    line-height: 14px;
    font-size: 9px;
    font-weight: normal;
    float: left;
    color: #333;
}

.sat {
    background-color: #f9f9f9;
    color: #000;
}

.sun {
    background-color: #f4aab5;
    color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-x">
  <div class="week-grid">
  <!-- MONTHS -->
    <div class="line-calendar separator-row header noselect project-calendar-months">

    </div> 
    <!-- DAYS -->
    <div class="line-calendar separator-row  header noselect project-calendar-days">

    </div> 
  </div>
</div>

Link to JSFiddle

Upvotes: 0

Views: 153

Answers (2)

karina
karina

Reputation: 829

Because you are changing your startAtDate in first loop. When you do an assignment in javascript, you do not copy object, you just creating a new link to an object in memory. So, when you describe first loop, you say that object have now a new reference called i, and this object should be changed by this rule i.add(1, "month")), so, step by step, and startAtDate already is not less than finishAtDay -- and this is the problem, why second loop not even started

Upvotes: 1

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18409

You are assigning startAtDay to i and j as reference, both variables will have reference to the same startAtDay, that is mutated in every cycle.

You need to clone the value before mutating it: https://momentjs.com/docs/#/parsing/moment-clone/

Here is updated plunker: https://jsfiddle.net/kfwxrv3o/

Upvotes: 2

Related Questions