antoniandre / vue-cal-v4

A Vue.js full calendar, no dependency, no BS. :metal:
https://antoniandre.github.io/vue-cal-v4/
MIT License
1.25k stars 237 forks source link

Display more week-rows on month view #46

Open witpok opened 5 years ago

witpok commented 5 years ago

Hi, Do you think you could add an option to render additional rows on month view? Right now there is a fixed number of six rows, as month always starts in the first row, but can end in 4th, 5th or 6th row. It would be best to have options for prefix-weeks and suffix-weeks, like: suffixWeeks: 3 - renders additional three weeks of next coming month, prefixWeeks: 2 - renders additional two rows of previous month. Please let me know what you think. Thanks! edit: I know I can change number of days in code below to add suffix weeks, but still there has to be a way to add prefix weeks too: (index.vue, line 770) cells = Array.apply(null, Array(56)).map((cell, i) => {

antoniandre commented 5 years ago

Hi @witpok, I understand your request and sounds reasonable, I will have a look to see if I can do something fast enough, if not I will still put it in the todo queue! 😝 Will let you know.

antoniandre commented 5 years ago

Hi @witpok, actually after looking closer, I am curious why you would want to display more rows spreading on 2 months?

After trying something, this looks confusing to me, and what would be the title of the view if starting date and ending date are arbitrary?

screen shot 2019-02-08 at 11 03 39 am

If you are looking for a bigger view of all your events on let's say 2 months, we would rather have a 2 month display option, that will be clearer and we can add a matching title.

If it's not what you are looking for please give me a screenshot of an example!

witpok commented 5 years ago

Thanks for response. I have a design guidelines on a project I'm working on, please look below: obraz I need to fill whole mobile screen with the calendar view, so instead of spreading cells in their height, there are added rows for previous and next months. For now I have forked vue-cal and added cellCount prop, so on Month view I can change 42 cell array to 63, but this solves the problem only partially, as it adds cells only for the next month, not the previous. Looking forward your better solution :)

antoniandre commented 5 years ago

Hi @witpok, so as it is not logical to have more day cells of other months than the selected one, I suggest we have a 2 month view, we would have enough cells for your case and we can have a logical title like "February - March 2019". Does that suit you?

witpok commented 5 years ago

Hi @antoniandre, What about having 3 month view? Past, present and future one? Having two-months also suits my needs, so it would be great to have that. Just a question regarding future plans - have you thought about a use-case, where your lib could be used as a date picker (btw. I can see that recently added demo with new sync option works like that, nice!) but like in a flight-scheduling tool? I mean - so you can select start and end date, which can occur on separate months, but this would require loading several months dynamically, lazy-load style, so you can browse them back and forth without losing original context. Just an idea, curious what you think about that.

antoniandre commented 5 years ago

Perfect, 3 months is actually better, we could have a season view. Just keep in mind that the view won't change as you pick a date close to the view threshold.

Regarding day range selection, I will add this later, after the events drag and drop, events creation and a few requested features. I will put it in my todo list.