Add FullCalendar integration with sample events and styling #2363
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
Some random thoughts:
headerToolbar: {
start: 'title',
center: 'dayGridMonth,timeGridWeek,timeGridDay',
end: 'today prev,next'
},This will look like that:
BootstrapTheme.prototype.classes = {
root: 'fc-theme-bootstrap5',
tableCellShaded: 'fc-theme-bootstrap5-shaded',
buttonGroup: 'btn-group',
button: 'btn btn-primary btn-icon', // for Tabler
buttonActive: 'active',
popover: 'popover',
popoverHeader: 'popover-header',
popoverContent: 'popover-body',
};
// change the next settings to use Tabler icons!
BootstrapTheme.prototype.baseIconClass = '';
BootstrapTheme.prototype.iconOverridePrefix = '';
BootstrapTheme.prototype.iconClasses = {
close: '',
prev: '',
next: '',
prevYear: '',
nextYear: '',
};
// and then later when creating the calendar instance
themeSystem: 'bootstrap5',
|
| @@ -42,6 +42,7 @@ | |||
| "dropzone": "^6.0.0-beta.2", | |||
| "flatpickr": "^4.6.13", | |||
| "fslightbox": "^3.5.1", | |||
| "fullcalendar": "^6.1.17", | |||
There was a problem hiding this comment.
not sure about the difference, but I use @fullcalendar
There was a problem hiding this comment.
Looks ok in desktop/large screen view. Have seen Kevin's comments, agree mostly with what he's said. I'm not that bothered by the actual day-grid inside the calendar not having rounded corners, but probably wouldn't be bothered if they were either 🙂 🤷♂️
I'm a big believer in mobile-first design, so most of the time for example I think that making things responsive whenever possible is a good idea.
Have checked this demo in mobile view, and while it's not broken, maybe it's not quite as good as it could be? See below:
The day-grid ends up being sized so that it shows half of the month at a time. This may just be a matter of personal taste, but I wonder whether it should instead stretch out to fill the entire remaining page height? this would be done by adding contentHeight: 'auto', into the FullCalendar config object, which would result in this:
(We could always just go with one or the other, or even have demos of both, and make a note on the page that aspect ratio controlled content sizing and 'auto' content sizing are controlled by one of the FullCalendar sizing options, contentHeight).
Also, (and this is probably less of an immediate issue): full responsive view support for FullCalendar is still a WIP (fullcalendar/fullcalendar#3187) so worth just keeping in mind I guess 🙂
|
It would be a good idea to include a month/week/day switch. I agree that it should look better in the mobile view. I think that I don't see any more issues. |
|
I’ll create next PR with this upgrades, because I had problems on mobile devices and I need more time to do it, but I want to release next version today |