JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/timrwood/moment/1.7.2/moment.js"></script>
JavaScript
var dateApril = new Date("2018-04-01");
// year and month are variables
year = 2018
month = 5 // August (0 indexed)
startDate = moment.utc([year, month])
document.write("<br/>inputDate : " + dateApril + "<br/>")
console.log("inputDate : ", startDate.format("dddd, MMMM Do YYYY, h:mm:ss a"));
// Get the first and last day of the month
firstDay = moment(startDate).startOf('month')
endDay = moment(startDate).endOf('month')
// Create a range for the month we can iterate through
monthRange = moment.range(firstDay, endDay);
// Get all the weeks during the current month
weeks = []
for (let mday of monthRange.by('days')) {
if (weeks.indexOf(mday.week()) === -1) {
weeks.push(mday.week());
}
}
// Create a range for each week
calendar = []
for (let index = 0; index < weeks.length; index++) {
var weeknumber = weeks[index];
firstWeekDay = moment().year(year).month(month).week(weeknumber).day(0);
lastWeekDay = moment().year(year).month(month).week(weeknumber).day(6);
if (month == 11 && (weeks.length -1) == index) {
firstWeekDay = moment().year(year).month(month).week(weeks[index - 1]).day(0);
firstWeekDay.add(7, "day");
lastWeekDay = moment().year(year).month(month).week(weeks[index - 1]).day(6);
lastWeekDay.add(6, "day");
}
// console.log("First day of week", firstWeekDay, weeknumber);
// console.log("Last day of week", lastWeekDay, weeknumber);
if (firstWeekDay.isBefore(firstDay)) {
firstWeekDay = firstDay;
}
if (lastWeekDay.isAfter(endDay)) {
lastWeekDay = endDay;
}
document.write("<br>week number: " + index + " day: " + firstWeekDay.format("DD-MM-YYYY") + " to " + lastWeekDay.format("DD-MM-YYYY"))
weekRange = moment.range(firstWeekDay, lastWeekDay)
calendar.push(weekRange)
}