使用天/周和标题创建带有时刻的自定义日历

Question

我正在使用时刻和反应创建计划组件。我创建了一个自定义日历。如何像普通日历一样将星期几固定在顶部？因此，如果我通过日期对象 september，我想在每个日期上方显示正确的星期几标题的所有日期。我在这里创建了一个小提琴。

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

根据以上所有答案：

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

Answer 2

使用表格作为标题，并使用 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'))
  })
}

Answer 3

根据 caffeinescript 提供的答案，我创建了这个日历，它也可以在年份范围内工作。

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 4

简化版

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

Answer 5

@d0whc3r 的回答似乎是最准确的。我做了一些修改

从 2000 年到 2100 年，我已经运行了 100 个日历年的单元测试

亲爱的读者，如果你是 2100 年，请运行单元测试直到 2200 年。

index.js

function weekDays(month, year) {
    const endDate = moment.utc().year(year).month(month).endOf('month');

    return Array(endDate.date()).fill(0).map((_, i) => moment.utc().year(year).month(month).date(i + 1))
        .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.utc(day).week(week).startOf('week').add(i, 'day'))
        }));

}

index.test.js

let testAll = (month, year) => {
        const monthYear = moment().year(year).month(month)
        const firstDay = monthYear.startOf('month');
        const endDay = moment().year(year).month(month).endOf("month");
        const calendar = weekDays(month, year);

        describe("testing calendar", () => {
            it('check if first date is in first week / should be true', () => {
                expect(calendar[0]["days"].filter((day) => day.date() === firstDay.date())[0].format("YYYY-MM-DD") === firstDay.format("YYYY-MM-DD")).toBe(true);
            });

           it('check if end date is in end week / should be true', () => {
                expect(calendar[calendar.length - 1]["days"].filter((day) => day.date() === endDay.date())[0].format("YYYY-MM-DD") === endDay.format("YYYY-MM-DD")).toBe(true);
            });
        });

    }
    for (let y=2000; y < 2100; y++){
        for (let m = 0; m <= 11; m++) {
            testAll(m, y)
            console.log(m)
        }
    }

P.S：我不是 javascript 专家，这是我的第一个单元测试