search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.4k stars 862 forks source link

Grid taking up too much space #688

Open doutatsu opened 4 years ago

doutatsu commented 4 years ago

I've been wondering, what is the reason for making a bigger grid than needed? Is it to avoid the calendar height changing, as you move between months, with more or less days? Or is it something else? I bet if you do a smooth transition of height, while changing months, it'll look fine

image

nathanreyes commented 4 years ago

At one time early on in this project it did hide rows for blank weeks. There were a lot of complaints that UIs were shifting around too much as users would navigate months...say if you had the calendar displaying attributes in your sidebar...everything underneath it would also be shifting up and down.

I think there is actually a hidden setting that allows for configuring this. Maybe there could be an collapse-weeks prop or something that would be false by default?

doutatsu commented 4 years ago

Right, as I thought. Was curious if it was intentional or not. I'll look into it, I think it could be a nice option, provided a nice transition is applied as well. With latest TailwindCSS utils, shouldn't be a hard thing to do

nathanreyes commented 4 years ago

Just a heads up if you are inspecting the code...2.0 it no longer uses the Tailwind lib or classes directly in the plugin. It just uses PostCSS with CSS variables that are mapped to Tailwind "values". It saved on a lot of the package size to remove it.

doutatsu commented 4 years ago

Interesting. Wouldn't the latest tailwind version, with out of the box purging, still keep the package size small? Or am I missing something 🤔

nathanreyes commented 4 years ago

That's initially what I thought, but I was still having to whitelist a lot of classes to support the different colors. Now, I'm simply referencing css variables. I think this is ultimately what trimmed down the size, but I didn't have a lot of time to dig too much into it.

This is the PR I have open right now for adding a trim-weeks prop. I can't figure out how to animate the height transition. Feel free to take a look. I don't actually think it looks that bad without it though, so I may just leave it at that. https://github.com/nathanreyes/v-calendar/pull/690/files

doutatsu commented 4 years ago

I can't figure out how to animate the height transition. Feel free to take a look

I've done it before with one library, if you don't mind a dependancy, could try using that. Otherwise, could try and do CSS myself, although there is some CSS or JS math that will have to happen. Will take a look