Week View Table Header

by Joe Saad

HTML

<div id="app">
  <table>
    <thead>
      <tr>
        <th @click="back()">⬅</th>
        <th v-for="date in dates">
          {{date}}
        </th>
        <th @click="next()">➡︎</th>
      </tr>
    </thead>
  </table>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Date.prototype.addDays = function(days) {
    this.setDate(this.getDate() + parseInt(days));
    return this;
};


new Vue({
  el: "#app",
  data: {
  startDate: null,
dates: []
  },
  methods: {
  	populateDaysArr(d){
    console.log('d: ',new Date(d))
        for(let i=0; i<7; i++ ){
      let newDate = new Date(d.getTime()+(i*24*60*60*1000));
    	this.dates.push(newDate.toISOString().substring(0,10))
    }
    console.log(this.dates)
    },
    back(){
    let beginningDate = new Date(this.dates[0]);
    this.dates = []
    console.log(beginningDate)
    console.log('startDate: ',this.startDate)
    this.populateDaysArr(beginningDate.addDays(-7))
		},
    next(){
    let beginningDate = new Date(this.dates[0]);
    this.dates = []
    console.log(beginningDate)
    console.log('startDate: ',this.startDate)
    this.populateDaysArr(beginningDate.addDays(7))

    }
  }, 
  created(){
		//this.startDate ? this.startDate : this.$set(this.startDate, new Date());
  	const d = this.startDate ? this.startDate : new Date();
    
		this.populateDaysArr(d)
    console.log(this.dates)
  }
})