曜日と週と見出しを使用してカスタムカレンダーを作成する

Question

私は瞬間を使ってスケジュールコンポーネントを作成し、反応します。カスタムカレンダーを作成しました。週の日を通常のカレンダーのように上に固定するにはどうすればいいですか？だから私は日付オブジェクト9月を渡す場合、私はすべての日付を各日付の上に見出しの正しい曜日でレンダリングしたいと思います。私はここでフィドルを作りました。

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

これは私が曜日、日付番号に対応し、これは私が欲しいものである

を持っているものです。月曜、火曜は、結婚.....

Answer 1

は、私は、このカレンダーを作成したヘッダーとしてテーブルを使用して、それを手に入れた、とcaffeinescriptが提供する回答に基づいて瞬間

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

Answer 2

を使用して週と日を変換します年の境界線の周りでも動作します。上記のすべての答えに

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()}; 
      } 
     ) 
    ); 
} 

Answer 3

ベース：

 let calendar = []; 

     const startDay = this.date.clone().startOf('month').startOf('week'); 
     const endDay = this.date.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()) 
      }) 
     }