title: Calendar built with React and date-fns / behaviour different based on time zone
body: <p>I created a calendar using React and date-fns, following this tutorial - <a href="https://medium.com/@w.difulvio523/create-a-custom-hooks-calendar-in-react-e50bbba456e1" rel="nofollow noreferrer">https://medium.com/@w.difulvio523/create-a-custom-hooks-calendar-in-react-e50bbba456e1</a></p>
  <p>Then I added a functionality in <code>cell</code> function, where it creates and mapped the days in month,
  to fetch the <code>schedule</code> from the mongoDB.</p>
  <p>But the schedule renders on its actual day + 1, t.ex if the schedule is today, it will render on date tomorrow, in Europe/Berlin time zone.
  But it will render correctly in Brazil time zone.</p>
  <p>You can check it here in this codepen - <a href="https://codepen.io/luispaulopinto/pen/abNNmZa" rel="nofollow noreferrer">https://codepen.io/luispaulopinto/pen/abNNmZa</a></p>
  <p>this is how that <code>cell</code> function looks like</p>
  <pre><code>    const cells = () =&gt; {
          const monthStart = startOfMonth(currentDate) 
          const monthEnd = endOfMonth(monthStart) 
          const startDate = startOfWeek(monthStart, {weekStartsOn: 1}) 
          const endDate = endOfWeek(monthEnd)
          const dateFormat = &quot;d&quot; 
          const rows = []
          let days = []
          let day = startDate 
          let formattedDate = &quot;&quot;
  
  
          while (day &lt; endDate) {
              for (let i = 0; i &lt; 7; i++) {
                  formattedDate = format(day, dateFormat) 
                  const cloneDay = day
  
                  //here get the schdules
                  //and render in cells.
                  //if the schduels.date is same as 'day' or 'clone day', 
                  //render &lt;Link/&gt; to Exercise element with corresponding ID
              
                  // //split and reforamt the cloneDay to compare with schedule object's date
                  const formatCloneDay = day.toISOString().split('T')[0]
  
                  // console.timeLog(formatCloneDay)
  
                  const scheduleElements = exerciseScheduleArray.map(schedule =&gt; {
                      //reformat for the compare with formatCloneday
                      const formatScheduleDate = schedule.date.split('T')[0]
  
                      const hasMatchingDays = formatScheduleDate.toString() === formatCloneDay.toString()
  
                      if(hasMatchingDays) {
                          return (
                                  &lt;Link className=&quot;schedule-link&quot; to={`/exercise/${schedule.exercise}`} key={schedule._id}&gt;
                                      &lt;span&gt;{schedule.bodySection} {schedule.duration}&lt;/span&gt; 
                                  &lt;/Link&gt;
                          )
                      }
                  })
  
                  days.push( 
                      &lt;div
                          className={`column cell ${
                              !isSameMonth(day, monthStart) ? &quot;disabled&quot; : 
                              isSameDay(day, selectedDate) ? &quot;selected&quot; : &quot;&quot; }`}
                          key={day}
                          onClick={() =&gt; onClickDate(cloneDay)} 
                      &gt;
                          &lt;span className=&quot;number&quot;&gt;{formattedDate}&lt;/span&gt;
                          &lt;span className=&quot;bg&quot;&gt;{formattedDate}&lt;/span&gt; 
                          {scheduleElements}
                      &lt;/div&gt;
                  )
                  //this will increase the day value by 1 each time it iterates
                  day = addDays(day, 1)
              }
              rows.push(
                  &lt;div className=&quot;row&quot; key={day}&gt; {days} &lt;/div&gt;
              )
              //if 7 days has been pushed to the rows, delete the days
              //so it could start a new row with new days
              days = []
          }
          return &lt;div className=&quot;body&quot;&gt;{rows}&lt;/div&gt; 
      }
  
  </code></pre>
  <p>I wonder what could be causing this issue?
  And how can I get the correct result also in Europe time zone?</p>
  <p>I searched and found this thread - <a href="https://github.com/date-fns/date-fns/issues/376" rel="nofollow noreferrer">https://github.com/date-fns/date-fns/issues/376</a>
  and also tried with moment.js to see if it works correctly, but it was the same result with
  moment.js</p>
  <p>My guess now is that</p>
  <p>a. how the Date object is created, and its UTC format is resulting different behaviour based on the time zone.</p>
  <p>b. <code>day</code> value is <code>day + 1</code>, inside of the <code>if(hasMatching)</code> statement. And I wonder if this also effects how it renders the schedule element.</p>