Skip to content

Instantly share code, notes, and snippets.

@eeshdarthvader

eeshdarthvader/index.html

Created August 8, 2018 16:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eeshdarthvader/11c48c1b840249dbf1f37a20c4535877 to your computer and use it in GitHub Desktop.
Save eeshdarthvader/11c48c1b840249dbf1f37a20c4535877 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin WeekCalendar // source https://jsbin.com/fuceha
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="WeekCalendar">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<strong>
<h2 id="MonthName" class="text-center bold"></h2>
</strong>
<table id="weekTable" class="table table-bordered">
<thead>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Sat</th>
<th>Sunday</th>
<tr/>
</thead>
<tbody>
<tr>
<th data-day="mon"></th>
<th data-day="tue"></th>
<th data-day="wed"></th>
<th data-day="thu"></th>
<th data-day="fri"></th>
<th data-day="sat"></th>
<th data-day="sun"></th>
</tr>
</tbody>
</table>
<button type="button" onclick="WeekCal.renderNextWeek()" class="btn btn-primary">Next Week</button>
</div>
<script id="jsbin-javascript">
var WeekCal = (function () {
var dateNow = new Date();
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var weekName = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
var tableDOM = document.getElementById('weekTable');
var tableBody = tableDOM.querySelectorAll('tbody > tr > th')
var monthEl = document.getElementById('MonthName');
var weekDays = 7;
return {
currentDayDate: function () {
return dateNow.getDate()
},
currentMonth: function (currentDateNow) {
return months.filter(function (item, index) {
return index === currentDateNow.getUTCMonth()
})[0];
},
currentDayName: function () {
return weekName[dateNow.getDay() - 1];
},
weekDaySet: function (currentDateNow) {
var currMonth = this.currentMonth(currentDateNow)
var dataSet = [];
var currentDayIndex = currentDateNow.getDay() - 1;
var k = 0;
for (var i = currentDayIndex; i < weekName.length; i++) {
dataSet.push({
'day': weekName[i],
'date': new Date(currentDateNow.getTime() + k * 86400000).getDate()
});
k++;
}
var j = currentDayIndex;
var m = currentDayIndex - 1
while (j) {
dataSet.push({
'day': weekName[j - 1],
'date': new Date(currentDateNow.getTime() + -m * 86400000).getDate()
});
j--;
m++;
}
return { dataSet, currMonth }
},
renderNextWeek: function () {
var { dataSet, currMonth } = this.weekDaySet(new Date(Date.now() + parseInt(weekDays) * 86400000))
weekDays = weekDays + 7
this.renderTable(dataSet, currMonth)
},
renderTable: function (dateSet, currMonth) {
tableBody.forEach(function (item, index) {
var dataAtt = tableBody[index].getAttribute('data-day')
console.log('dataAtt', dataAtt)
var dateObj = dateSet.filter((i) => {
return i.day === dataAtt
})
console.log('dateObj', dateObj[0].date)
tableBody[index].innerHTML = dateObj[0].date
})
monthEl.innerHTML = currMonth;
},
renderTodayDate: function (currMonth) {
}
}
})();
// alert(JSON.stringify(WeekCal.weekDaySet()))
const { dataSet, currMonth } = WeekCal.weekDaySet(new Date());
WeekCal.renderTodayDate(currMonth);
WeekCal.renderTable(dataSet, currMonth);
</script>
<script id="jsbin-source-javascript" type="text/javascript">var WeekCal = (function () {
var dateNow = new Date();
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var weekName = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
var tableDOM = document.getElementById('weekTable');
var tableBody = tableDOM.querySelectorAll('tbody > tr > th')
var monthEl = document.getElementById('MonthName');
var weekDays = 7;
return {
currentDayDate: function () {
return dateNow.getDate()
},
currentMonth: function (currentDateNow) {
return months.filter(function (item, index) {
return index === currentDateNow.getUTCMonth()
})[0];
},
currentDayName: function () {
return weekName[dateNow.getDay() - 1];
},
weekDaySet: function (currentDateNow) {
var currMonth = this.currentMonth(currentDateNow)
var dataSet = [];
var currentDayIndex = currentDateNow.getDay() - 1;
var k = 0;
for (var i = currentDayIndex; i < weekName.length; i++) {
dataSet.push({
'day': weekName[i],
'date': new Date(currentDateNow.getTime() + k * 86400000).getDate()
});
k++;
}
var j = currentDayIndex;
var m = currentDayIndex - 1
while (j) {
dataSet.push({
'day': weekName[j - 1],
'date': new Date(currentDateNow.getTime() + -m * 86400000).getDate()
});
j--;
m++;
}
return { dataSet, currMonth }
},
renderNextWeek: function () {
var { dataSet, currMonth } = this.weekDaySet(new Date(Date.now() + parseInt(weekDays) * 86400000))
weekDays = weekDays + 7
this.renderTable(dataSet, currMonth)
},
renderTable: function (dateSet, currMonth) {
tableBody.forEach(function (item, index) {
var dataAtt = tableBody[index].getAttribute('data-day')
console.log('dataAtt', dataAtt)
var dateObj = dateSet.filter((i) => {
return i.day === dataAtt
})
console.log('dateObj', dateObj[0].date)
tableBody[index].innerHTML = dateObj[0].date
})
monthEl.innerHTML = currMonth;
},
renderTodayDate: function (currMonth) {
}
}
})();
// alert(JSON.stringify(WeekCal.weekDaySet()))
const { dataSet, currMonth } = WeekCal.weekDaySet(new Date());
WeekCal.renderTodayDate(currMonth);
WeekCal.renderTable(dataSet, currMonth);</script></body>
</html>
Raw
jsbin.fuceha.js
var WeekCal = (function () {
var dateNow = new Date();
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var weekName = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
var tableDOM = document.getElementById('weekTable');
var tableBody = tableDOM.querySelectorAll('tbody > tr > th')
var monthEl = document.getElementById('MonthName');
var weekDays = 7;
return {
currentDayDate: function () {
return dateNow.getDate()
},
currentMonth: function (currentDateNow) {
return months.filter(function (item, index) {
return index === currentDateNow.getUTCMonth()
})[0];
},
currentDayName: function () {
return weekName[dateNow.getDay() - 1];
},
weekDaySet: function (currentDateNow) {
var currMonth = this.currentMonth(currentDateNow)
var dataSet = [];
var currentDayIndex = currentDateNow.getDay() - 1;
var k = 0;
for (var i = currentDayIndex; i < weekName.length; i++) {
dataSet.push({
'day': weekName[i],
'date': new Date(currentDateNow.getTime() + k * 86400000).getDate()
});
k++;
}
var j = currentDayIndex;
var m = currentDayIndex - 1
while (j) {
dataSet.push({
'day': weekName[j - 1],
'date': new Date(currentDateNow.getTime() + -m * 86400000).getDate()
});
j--;
m++;
}
return { dataSet, currMonth }
},
renderNextWeek: function () {
var { dataSet, currMonth } = this.weekDaySet(new Date(Date.now() + parseInt(weekDays) * 86400000))
weekDays = weekDays + 7
this.renderTable(dataSet, currMonth)
},
renderTable: function (dateSet, currMonth) {
tableBody.forEach(function (item, index) {
var dataAtt = tableBody[index].getAttribute('data-day')
console.log('dataAtt', dataAtt)
var dateObj = dateSet.filter((i) => {
return i.day === dataAtt
})
console.log('dateObj', dateObj[0].date)
tableBody[index].innerHTML = dateObj[0].date
})
monthEl.innerHTML = currMonth;
},
renderTodayDate: function (currMonth) {
}
}
})();
// alert(JSON.stringify(WeekCal.weekDaySet()))
const { dataSet, currMonth } = WeekCal.weekDaySet(new Date());
WeekCal.renderTodayDate(currMonth);
WeekCal.renderTable(dataSet, currMonth);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment