See the Pen Forebruary by Katy DeCorah (@katydecorah) on CodePen

A few days ago I saw Forebruary by Ilya Birman; a calendar that doesn’t need replacing! Naturally, I needed to figure this out, CodePen style.

I wrote the HTML in Haml. My main goal was to generate the numbers on the calendar efficiently. It took a some research, but I figured out how to use case statements. There could be a better way to increment the numbers in each row, but I haven’t arrived at it yet.

Once I had everything styled, I tackled the position of the frame. The frame slides to show the entire month. The last two columns, highlighted in red, are the weekends. I knew I needed to find out today’s date (to understand the current month) and which day of the week the first day of the month starts. I found JavaScript to find the first day of the month for any given month or the current month.

Next, I needed the value for the first day of the month. August starts on a Thursday, or day of the week number 4 (remember, the week starts on Monday). Now I know that, for any month that begins on a Thursday it will have the same starting position. I just needed to absolutely position the frame for each day of the week. I found the position by manually adjusting the numbers. I created if statements to compare the values to move the frame.

Next month the frame should automatically slide to capture September.

---