For those who need a little more help:
I use the google chrome web browser to inspect web pages.
-Once your page is open (previewing your bubble page) in chrome right click and choose inspect.
-On the right hand side you should see an inspector choose the first icon (image below)
-Once this is selected you will be able to get the code similar to what Jared supplied above by hovering over each element or clicking on them in your page.
-Now that we know what element we want to change, inside of the bubble editor select the </>HTML button, then add this to your page. In the popup for this element in the Appearance tab add your modified code such as:
<style>
button.fc-timeGridDay-button.fc-button {
background-color: pink;
font-size: 20px
}
</style>
Im getting there with the CSS (been at it all day and cant figure out how to change the style of the button hover, selected button or toolbar (month in the middle), any more tips?
I know you know but, it is a pain in the ass. That’s why I made the header optional in my plugin. You can take away the FullCalendar header and create your own with native bubble elements to truly give you control over the look.
Changing the color on hover requires a different CSS selector .
Jared’s plugin is excellent for my use case where people available for services are in columns in the day view with their appointments within their columns. If they have the day off then they are removed from the day view. That and some other features that I found invaluable for my app.
Great job
Wish I had a better answer from a product perspective. We are definitely aware that the Full Calender plugin is missing some basic options, but don’t unfortunately aren’t able to prioritize to this plugin yet with current projects. This is definitely on our list though!
The pesky previous, next and today buttons have me stumped along with the shadow that appears around all buttons when selected.
If someone knows the correct .selector or code for this that would be great!
Below is the code (with comments) I used and a snapshot to help others that may need this and I’ll update it, if when I figure out the rest (maybe I should make a different thread / post for this?..)
@jared.gibb
What all can and does your plugin do specifically involving calendars?
Maybe bubble (@nick.carroll) could purchase some plugins that are on the market to ease our pain if current projects make these ones lower priority? I get that they would have to be complete and developer friendly systems (and not work arounds or just ok plugins).
I would be looking for repeating events functionality. We want to build a calendar where users are able to enter their dance events (parties, classes, workshops) and are able to select if the event is repeating. Often times dance classes or parties are repeating every week so I do not want to force people to add a new event object each for each week of the month. But rather have to set the event once in their dashboard and allow them to span that event over a period of time.
I posted a thread about the functionality and other issues I have currently with the FullCalendar plugin.
But to repeat:
Would you know how to edit the label of the calendar entries so that we can display it in the following way:
[Hour] [isRepeatingEvent ? showArrows : doNotShowArrows] [ Rest of the title]
Right now the label cuts the hour in the middle, does not allow adding icons and is showing almost whole title.
In case anyone is still wondering round trying to customise the top bar buttons of this plugin like I was. Here is the CSS I used by adding a bubble HTML </> element to the page.
