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.
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.