Calendar Formatting Since Upgrading To Bootstap 5

[jmartland22]

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,

[Cheese]

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).

[jmartland22]

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?

[Cheese]

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.

[jmartland22]

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?

[Cheese]

@jmartland22

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?

[jmartland22]

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.

[Cheese]

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…?

[Teodor]

@jmartland22

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

[jmartland22]

Thanks @Cheese for your help 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,

[Teodor]

On which extensions channel are you on?

[jmartland22]

Beta on the latest version of wappler.

Thanks

[jmartland22]

Hi,
Does anybody know how to get the URL/ links on the calendar working on Appconnect2?

Unfortunately I can’t use Event Click because I need to pass a variable of the query. When I use on click of the actual event this does not work either.

Thanks,

[Cheese]

If you can relate the event id back to the record that contains your vehicle id (using a join in the query) you can use a Flow to fetch the corresponding record upon click.

Have this Server Action with the event and join to the vehicle id set to No Load on the page.

This will give you the result set for the variable you wish to pass to the URL when the Flow is activated.

Within the flow have a short wait period to allow for the retrieval (saying this App Connect II is fast) by the event id. Then within that same flow have your Browser Action. Select the binding for the vehicle id from the returned result of the Server Action (the No Load Action mentioned above) and you should be all good.