title: CSS grid, Day.js : How do I create a calendar that shows the current week's dates?
body: <p>Within a react component, I'd like to create a grid calendar showing showing the current week's dates. So for this week for example, it would need to look something like this:</p>
  <pre><code>Monday          | Tuesday         |Wednesday       |        
  October 5th 2020| October 6th 2020|October 7th 2020|
  </code></pre>
  <p>I've had a play around with day.js to try and solve this, but it's proven tricky. Here's my attempt in codesanbox:</p>
  <p><a href="https://codesandbox.io/s/sleepy-rgb-me4s3?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/sleepy-rgb-me4s3?file=/src/App.js</a></p>
  <p>Any suggestions on how to approach this? I'm not sure how to set the beginning of each grid to the monday of a given week - once I've done that, I can figure out the logic to do the other days.</p>
  <p>Here's the code:</p>
  <p><code> Grid component</code></p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import dayjs from 'dayjs'
  
  export default App = () =&gt; {
  
    let now = dayjs()
    let currentDay = (now.format(&quot;dddd, MMMM D YYYY&quot;))
  
    let d = now.add('1', 'day')
    let nextDay = (d.format(&quot;dddd, MMMM D YYYY&quot;))
    
    return(
      &lt;div className = 'grid-container'&gt;
        &lt;div className = 'grid-item'&gt;{currentDay}&lt;/div&gt;
        &lt;div className = 'grid-item'&gt;{nextDay}&lt;/div&gt;
        &lt;div className = 'grid-item'&gt;&lt;/div&gt;
        &lt;div className = 'grid-item'&gt;&lt;/div&gt;
        &lt;div className = 'grid-item'&gt;&lt;/div&gt;
        &lt;div className = 'grid-item'&gt;&lt;/div&gt;
        &lt;div className = 'grid-item'&gt;&lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  </code></pre>
  <p><code>styles.css</code></p>
  <pre><code>.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-row-gap:1px;
    grid-template-columns: 100px 100px 100px;
    grid-column-gap: 1px;
  }
  
  .grid-item {
    background-color: blue;
    color:white;
  }
  </code></pre>