Question

120

creating a custom calendar with moment using days/weeks and headings

rated 0 times [ 123] [ 3] / answers: 1 / hits: 19979 / 8 Years ago, fri, september 30, 2016, 12:00:00

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 have

this is what i want, days of week corresponding to date number. mon,tues,wed.....

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

citlalia

Add To Favorites

Follow

Total Points: 138

Total Questions: 104

Total Answers: 87

Location: Iceland

Member since Sat, Sep 17, 2022

2 Years ago

answered 8 Years ago elishaannac · Accepted Answer

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'))

  })

}