Timeline

package.json

{
  "name": "timeline",
  "version": "0.0.2",
  "main": "timeline.js",
  "dependencies": {
    "date-fns": "^1.29.0"
  }
}

timeline.js

import {
  addWeeks,
  startOfWeek,
  endOfWeek,
  differenceInWeeks,
  isSameWeek,
  startOfMonth,
  endOfMonth,
  lastDayOfMonth,
  isWithinRange
} from 'date-fns'

const graySq = '⬜'
const blackSq = '⬛'

// Create Timeline with gray/black squares
const create = (rs, re, ws, we) => {
  let startDate = startOfMonth(rs)
  let endDate = endOfMonth(re)

  // Setup week iterations
  const workStart = startOfWeek(ws)
  const workEnd = endOfWeek(we)
  const totalWeeks = differenceInWeeks(endDate, startDate)

  let currentWeek = startDate
  let weeks = []
  for (let i = 0; i < totalWeeks; i++) {
    if (isWithinRange(currentWeek, workStart, workEnd)) {
      weeks.push(blackSq)
    } else {
      weeks.push(graySq)
    }

    // TODO fix or return months = { monthName: '⬜⬜⬛⬛', ... }
    if (
      isSameWeek(currentWeek, lastDayOfMonth(currentWeek, { weekStartsOn: 1 }))
    ) {
      weeks.push(' | ')
    }

    currentWeek = addWeeks(currentWeek, 1)
  }

  return weeks.join(' ')
}

export default create

// Usage
// yarn add gist:983eecb5fc05b07068949083ca0a0bf9
// import createTimeline from 'timeline'
// createTimeline('Sep 2018', 'Jan 2019', 'Sep 12, 2018', 'Dec 27, 2018')

yarn.lock

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


date-fns@^1.29.0:
  version "1.29.0"
  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"