8000 Add FullCalendar integration with sample events and styling by codecalm · Pull Request #2363 · tabler/tabler · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Add FullCalendar integration with sample events and styling #2363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
May 16, 2025
Merged

Add FullCalendar integration with sample events and styling #2363

merged 2 commits into from
May 16, 2025

Conversation

codecalm
Copy link
Member

localhost_3000_fullcalendar html
localhost_3000_fullcalendar html_theme=dark

@vercel Vercel
Copy link
vercel bot commented May 11, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
tabler ✅ Ready (Inspect) Visit Preview May 15, 2025 9:56pm
tabler-docs ✅ Ready (Inspect) Visit Preview May 15, 2025 9:56pm

@changeset-bot changeset-bot
Copy link
changeset-bot bot commented May 11, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 767a167

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@kevinpapst
Copy link
Collaborator
kevinpapst commented May 12, 2025 •
edited
Loading

Some random thoughts:

  1. Great to have an example page for FullCalendar, makes people aware of that fantastic product

  2. Add buttons to switch to weekly or at least the daily view (different projects, different needs). In v5 I could use this config:

            headerToolbar: {
                start: 'title',
                center: 'dayGridMonth,timeGridWeek,timeGridDay',
                end: 'today prev,next'
            },

This will look like that:
Bildschirmfoto 2025-05-12 um 15 09 35

  1. You can use the Bootstrap5 theme and change the buttons, so they follow the theme (see my screenshot above). My code from v5 should work in v6 as well, see https://fullcalendar.io/docs/theming :
        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',
  1. The outer radius does not follow the dynamic border radius settings, see screenshot below (not that I care, just noticed)

image

kevinpapst
kevinpapst reviewed May 12, 2025
View reviewed changes
preview/package.json
@@ -42,6 +42,7 @@
"dropzone": "^6.0.0-beta.2",
"flatpickr": "^4.6.13",
"fslightbox": "^3.5.1",
"fullcalendar": "^6.1.17",
Copy link 8000
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure about the difference, but I use @fullcalendar

ethancrawford
ethancrawford reviewed May 12, 2025
View reviewed changes
Copy link
Collaborator
@ethancrawford ethancrawford left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
image

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:
image

(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 🙂

@BG-Software-BG
Copy link
Member

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 contentHeight: 'auto' is a better approach than the current sized calendar (with a scrollbar). Maybe the day view should be the default one on mobile?

I don't see any more issues.

@codecalm codecalm changed the title feat: add FullCalendar integration with sample events and styling Add FullCalendar integration with sample events and styling May 15, 2025
@codecalm codecalm merged commit f769abd into dev May 16, 2025
5 checks passed
@codecalm codecalm deleted the dev-fullcalendar branch May 16, 2025 20:27
@codecalm
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kevinpapst kevinpapst kevinpapst left review comments

@ethancrawford ethancrawford ethancrawford left review comments

@BG-Software-BG BG-Software-BG Awaiting requested review from BG-Software-BG

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@codecalm @kevinpapst @BG-Software-BG @ethancrawford
0