calendar.js

// Assuming <WeekRow />, <DateRow /> and <DateText /> contain styling that we want

const getDateSet = (start: moment.Moment) => {
  const result = []
  const numberOfDatesNeeded = 35 // 5 rows, 7 days for each row. Simply ignore 28-days February with 1st Feb on Monday.
  for (let i = 0; i < numberOfDatesNeeded; i++) {
    result.push(moment(start).add(i, 'day'))
  }
  return result
}

const Calendar = () => {
  const today = moment.utc()
  // This need to be replace by current month instead
  const dateSet = getDateSet(today.startOf('month').startOf('week'))
  const dateChunks = _.chunk(dateSet, 7)
  const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  const weekTexts = weekDays.map(w => <TextWeek key={w}>{w}</TextWeek>)
  const dateRows = dateChunks.map((dates, index) => (
    <DateRow key={index}>
      {dates.map(date => (
        <DateText>{date.date()}</DateText>
      ))}
    </DateRow>
  ))
  return (
    <View>
      <WeekRow>{weekTexts}</WeekRow>
      {dateRows}
    </View>
  )
}

export default Calendar

🤔 Why 35 is being used on L:5 kub?

🤔 Why 35 is being used on L:5 kub?

Calendar have 5 rows and each rows have 7 days.

PS. edge cases here is any year that have 28-days February and 1st Feb start is on Monday, but I will just live with that.

Let's add comment here.