Calendar Formatting Since Upgrading To Bootstap 5

Hi,

When I have updated to Bootstrap 5 on the calendar a few things seem to have changed and no longer work properly.

The buttons have gone were you can go back and forward on the month. I can no longer click on events although if I right click and open as a new tab it does still work though. The scaling also seems to not be working.

Is there something I need to do when I change to Bootstrap 5 to update the calendar?

Thanks,

Hi @jmartland22,
The Fullcalendar package has been updated so you will need to insure that you have updated the components on the layout page (if this is Node based), save and upload. If you applied custom styling to the buttons this may have been lost due to a change in class names (changes made by Fullcalendar not Wappler).

Thanks @Cheese . I have updated and installed the node packages and redeployed but it’s still the same.

Would I have to update the layout page manually or will Wappler take care of this for me? This is what I have on the layout page do you know is this right?


We had a prompt to update components on some of our pages (Wappler 6.4.0). Checking your Fullcalendar version it matches ours (1.11). So that all seems correct.

Here is our CSS for the next and previous buttons. See if applying this to your page (or style.css) displays the buttons correctly?

.fc-prev-button {
        border: black !important;
        outline-width: 1px !important;
        border-width: 1px !important;
        outline: black !important;
        background-color: #e36414 !important;
        color: white !important;
        cursor: pointer !important;
        border-radius: 10px !important;
        font-size: 18px !important;
    }

    .fc-next-button {
        border: black !important;
        outline-width: 1px !important;
        border-width: 1px !important;
        outline: black !important;
        background-color: #e36414 !important;
        color: white !important;
        cursor: pointer !important;
        border-radius: 10px !important;
        font-size: 18px !important;
    }

We had to apply !inportant to everything after the recent update for our custom CSS to be applied. If you have custom CSS you may need to do the same?

We also stick to the Standard theme for all of our calendars and don’t use the Bootstrap 5 theme.

Thanks @Cheese

Just tried the ‘standard’ theme and it does bring back the buttons but still won’t let me click on a event to link to a new page.

I have just started a brand new project and I’m getting the same behaviour. Wondering if this maybe is a bug or has anybody got a bootstrap 5 calendar working correctly?

We’ve never used Bootstrap 5 theme so can’t comment on that side.

Regarding links have you got a Dynamic Event for Event Click set?

Screenshot from 2024-04-01 19-11-19

Thanks @Cheese .

Not sure if it’s the correct way but I have it setup on the Url which up until this update worked no problem. Will look to change it though to event click thanks for the tip.

You’re more than welcome!

Try changing the variable for VehicleID to have event.extendedProps.VehicleID and see if that works maybe? You can make this change in code view for the expression. Or failing that use the Dynamic Event for Event Click and see if that works…?

1 Like

you need to include the bootstrap icons from the frameworks menu if you want to use the Bootstrap 5 theme with the calendar.

2 Likes

Thanks @Cheese for your help :slight_smile: If I can’t get it URL fixed I will go with the ‘event click’.

Thanks @Teodor to. Adding the icons has added the bootstrap icons now gives me the forward and back arrows. Is there any reason why the URL won’t work on the updated calendar and the scaling doesn’t seem to have any effect?

I have just noticed this warning to in Chrome. Not sure if this makes any difference. I am not using anything to do with Google in the calendar.

Intermittently I am also getting

Cheers,

1 Like

On which extensions channel are you on?

Beta on the latest version of wappler.

Thanks