vue-simple-calendar
vue-simple-calendar copied to clipboard
Feat/improved year view
@richardtallent Hi! Sorry for coming out of the blue with this kind of big PR, let me introduce this to you.
We started using your library for our company's nuxt app a month ago and have been loving it so far. The only thing that we thought needed some refinement is the year view, which is a bit messy with no month separation. So, since it will be something that our users will likely use I settled on trying to develop a solution starting from your latest release. Let me break down for you the main reworks that I did:
- The displayed weeks are now grouped by month. The view iterates on the available months and weeks within it narrowed down by the current period
- A heading is added between months when in the year view
- When in the year view the weeks that cross over from a month to another are duplicated in both months. The cells/days not belonging to the month are completely disabled
- Items and selections that cross over a month's end only consider the active day cells
- I updated the logic about computing the week numbers given the reactors
This should be it. I Extensively tested all the features/implications that I mentioned and it all looks good to me, so I am pretty confident about starting using it. I am aware of the fact that the solution I am proposing might be a bit rough and imperfect given the little time I had to study your codebase and I would love to hear your feedback on my and refine it with you if you see fit, hoping you would appreciate it.
To wrap this up: our company will start using this new feature from my fork starting next week. We would be really glad if you were to add this to your repo with the timing you see fit so that we can go back to using the original package from npm instead of my fork.
I just got back from a trip and won't have time to fully digest this for a bit. Since it would be a breaking change, I'd like to mull it over and test more.
Some things I noticed when I tried it:
- Only works in single-year mode. For multi-week, multi-month, and multi-year modes, the headers don't appear.
- Should likely have a named slot for easier configurability.
- In its present form, this can't be disabled. This is the sort of thing that would be great for some users and not for others.
I just released v7.1.0, which adds the ability to put the month name into the Day cell on the 1st unless you're in single-month mode. I'm hoping this improvement will be workable for use cases like yours where there are month crossovers that could otherwise be confusing. Doesn't have all of the advantages of a header, but it's a change with much smaller surface area.
Thanks for the feedback, I really appreciate it. All the points that you raised make perfect sense. I will try to provide with a solution to all the points with some new commits when I will manage to do so.
About lowering the areas of impact of this change I was thinking that maybe it could be beneficial to split the components in separate ones for week, month and year views, so that the former ones can remain as is and the reworks will only be focused on the latter, what would you think about this approach?
There could be some advantage to splitting out a single-week component, which could then be reused in the overall view. Might have some impact on styling or drag/drop, but worthy of exploration. And yes, it might simplify the code needed to duplicate weeks where there is a month boundary and add headings between them.
I would not want to maintain separate components for week/month/year views -- I still think the current approach of a single component that can flexibly handle any combination of a count and a week/month/year unit is best.