Mon Jul 03 2017
Before we continue to Part 2 of this series, upon reflecting on the code from Part 1, I realized there was a use-case not supported by the current state model. Many calendars like to display the day numbers for days that aren’t in the current month. Most of the time they are in a lighter colored font, but they are still there and some users may find that bit of context useful.
To support this feature, we need to refactor our code a little bit. First, we’ll add three new computed properties to make life a little easier down the road.
isLeapYear: Calculating the leap year is going to happen more often now, so we can use this computed property to cache it for us.
nextMonthComps: We now need to know a little bit about the month immediately before and after the current month. This information is simple to calculate. Note that we are referencing our _daysInMonth constant array and the newly created isLeapYear computed property.
With these new computed properties we can now simplify some of our previous code a bit:
The modifications for the
daysInMonth computed property and
movePreviousMonth methods aren’t too drastic, but they do make things a little more terse and intuitive at a glance.
Now let’s review the changes made to the weeks computed property to support displaying days not in the current month.
We won’t walk through this line-by-line, but here are some highlights:
So now we are able to get more context about the days in the surrounding months even if they lie in the same weeks as the current month.
Before, we used a function defined outside of the Vue component instance to produce the labels for our month and weekday names. Now we simply just preassign title cased labels in different lengths (label_n). If they need to be altered, we can simply call
toLowerCase() on the labels.
So that’s all the changes we need to get ready for Part 2. I’m really excited for the next tutorial, but until then here’s the Codepen if you’d like to review the modified code.
Read the next post: Part 2: Using