Add some of the global.css styles to the core css

[jt196]

Great job on the calendar! It's working pretty well, but I had to add the styles from the global.css file to some global css on my Svelte site to get the month to display correctly (consistent line height) as well as the page height down to a sensible level.

It would be nice if these defaults were included in the core css.

[vkurko]

What exact styles did you have to add from global.css?

[jt196]

Hey dude thanks for the quick response - all the height ones for the grid etc.

Without this one:

@media (min-width: 1200px) {
    .ec.ec-day-grid {
        height: 800px;
    }
}

It displays like this:

The others help to set a height to the calendar and make it scrollable.

.ec {
    height: 640px;
}
.ec.ec-day-grid {
    height: 400px;
}
@media (min-width: 576px) {
    .ec {
        height: 700px;
    }
    .ec.ec-day-grid {
        height: 500px;
    }
}
@media (min-width: 992px) {
    .ec {
        height: 800px;
    }
    .ec.ec-day-grid {
        height: 700px;
    }
}

[vkurko]

Thank you. There is a height setting for the height of the calendar. The styles applied in the demo are unlikely to be added to the library, because firstly, they will conflict with the already mentioned setting, and secondly, they are specific enough to be used on all sites where the calendar is used.

[jt196]

I see, I started off using the code from the demo, which doesn't have any height attributes set - using the global.css.

This is a great and full-featured library @vkurko, but for less experienced devs, some demo calendars would be useful to be able to get started. I've found them super useful, for example this library. I found it's useful to have a working demo then tweak that to get the results I want.

[vkurko]

Totally agree with you. A website with easy navigation through the documentation and various examples of using the calendar are what this library is currently missing. I will take up this issue when I have enough time.

[jt196]

From a beginner (to your library) user, the docs go from 0 to 100

1. Easy set up
2. Listing the 75 or so options

It's quite a lot to parse and doesn't make for an easy initial set up. Perhaps even just an overview of what the demo calendar has (with the sizing) and why they're in there would be a useful springboard into the library for the uninitiated. I dug around the source code and copied the settings from the calendar into my Svelte project, then removed a few I didn't need.

Don't want to be ungrateful for all the work you put in but it's nice to have fresh eyes.

[vkurko]

Thanks for all your advice. I hope I can do all this in the near future. I'm sorry I can't pay attention to this right now.

[jt196]

Yeah totally appreciate that Vlad, life and all that. Well done on the lib and thanks for being so responsive.