creating a custom calendar with moment using days/weeks and headings
16,840
Solution 1
Got it using a table as headers, and converted weeks and days using moment
const startWeek = moment().startOf('month').week();
const endWeek = moment().endOf('month').week();
let calendar = []
for(var week = startWeek; week<endWeek;week++){
calendar.push({
week:week,
days:Array(7).fill(0).map((n, i) => moment().week(week).startOf('week').clone().add(n + i, 'day'))
})
}
Solution 2
Base on all the answers above:
const calendar = [];
const today = moment();
const startDay = today.clone().startOf('month').startOf('week');
const endDay = today.clone().endOf('month').endOf('week');
let date = startDay.clone().subtract(1, 'day');
while (date.isBefore(endDay, 'day'))
calendar.push({
days: Array(7).fill(0).map(() => date.add(1, 'day').clone())
});
Solution 3
Based on the answer provided by caffeinescript I created this calendar that would also work around year boundaries.
const startDay = moment().clone().startOf('month').startOf('week');
const endDay = moment().clone().endOf('month').endOf('week');
var calendar = [];
var index = startDay.clone();
while (index.isBefore(endDay, 'day')) {
calendar.push(
new Array(7).fill(0).map(
function(n, i) {
return {date: index.add(1, 'day').date()};
}
)
);
}
Solution 4
Simplified version
function weekDays(month, year) {
const endDate = moment().date(0).month(month).year(year);
return Array(endDate.date()).fill(0).map((_, i) => moment().date(i + 1).month(month).year(year))
.map((day) => ({ day, week: day.week() }))
.filter(({ week }, i, arr) => arr.findIndex((info) => info.week === week) === i)
.map(({ day, week }) => ({ week, days: Array(7).fill(0).map((_, i) => moment(day).week(week).startOf('week').add(i, 'day')) }));
}
Author by
caffeinescript
Updated on July 13, 2022Comments
-
caffeinescript almost 2 years
I am creating a schedule component using moment and react. I have created a custom calendar. How do place the days of the weeks fixed at the top like a normal calendar? So if i pass the date object september, i want to render all the dates with the correct day of the week heading above each date. I have created a fiddle here.
https://jsfiddle.net/4dbwLg6b/
var dates = ['Thu Sep 01 2016 00:00:00 GMT+0800 (CST)', 'Fri Sep 02 2016 00:00:00 GMT+0800 (CST)', 'Sat Sep 03 2016 00:00:00 GMT+0800 (CST)', 'Sun Sep 04 2016 00:00:00 GMT+0800 (CST)', 'Mon Sep 05 2016 00:00:00 GMT+0800 (CST)', 'Tue Sep 06 2016 00:00:00 GMT+0800 (CST)', 'Wed Sep 07 2016 00:00:00 GMT+0800 (CST)', 'Thu Sep 08 2016 00:00:00 GMT+0800 (CST)', 'Fri Sep 09 2016 00:00:00 GMT+0800 (CST)', 'Sat Sep 10 2016 00:00:00 GMT+0800 (CST)', 'Sun Sep 11 2016 00:00:00 GMT+0800 (CST)', 'Mon Sep 12 2016 00:00:00 GMT+0800 (CST)', 'Tue Sep 13 2016 00:00:00 GMT+0800 (CST)',' Wed Sep 14 2016 00:00:00 GMT+0800 (CST)',' Thu Sep 15 2016 00:00:00 GMT+0800 (CST)', 'Fri Sep 16 2016 00:00:00 GMT+0800 (CST)', 'Sat Sep 17 2016 00:00:00 GMT+0800 (CST)', 'Sun Sep 18 2016 00:00:00 GMT+0800 (CST)', 'Mon Sep 19 2016 00:00:00 GMT+0800 (CST)',' Tue Sep 20 2016 00:00:00 GMT+0800 (CST)', 'Wed Sep 21 2016 00:00:00 GMT+0800 (CST)', 'Thu Sep 22 2016 00:00:00 GMT+0800 (CST)', 'Fri Sep 23 2016 00:00:00 GMT+0800 (CST)', 'Sat Sep 24 2016 00:00:00 GMT+0800 (CST)', 'Sun Sep 25 2016 00:00:00 GMT+0800 (CST)', 'Mon Sep 26 2016 00:00:00 GMT+0800 (CST)', 'Tue Sep 27 2016 00:00:00 GMT+0800 (CST)', 'Wed Sep 28 2016 00:00:00 GMT+0800 (CST)', 'Thu Sep 29 2016 00:00:00 GMT+0800 (CST)', 'Fri Sep 30 2016 00:00:00 GMT+0800 (CST)'] var Hello = React.createClass({ render: function() { return <div className="container"> {dates.map(function(day){ return( <div className="calendarDay"> {moment(day).format('D').toString()} </div> ) })} </div>; } }); ReactDOM.render( <Hello name="World" />, document.getElementById('container') );
this is what i want, days of week corresponding to date number. mon,tues,wed.....