Forum Academy Marketplace Showcase Pricing Features

[Plugin Update] Full Calendar

@jared.gibb Thank you my friend!
@sdharssi

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>

Then preview again :slight_smile:
A resource for for CSS https://www.w3schools.com/css/css3_buttons.asp

I appreciate the help!

1 Like

You got this! It’s easy after that to figure out the rest.

1 Like

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?

Its painful going through all of this… but I can’t quit :grin:

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 :+1:

1 Like

Thanks @mrunge we’ve probably exchanged something like 500 messages now. you’ve provided a lot of invaluable feedback and suggestions.

Something like that. Thanks for your patience and excellent support.

1 Like

Love seeing the community help out like this :slight_smile:

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!

1 Like

Im almost there with no code :wink:

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

<style>

/* Middle Banner Text (month, day, year */

h2.fc-toolbar-title{

color: #A6A7A8;

font-size: 20px;

}

/* calendar day numbers */

a.fc-daygrid-day-number{

font-size: 20px;

color: #A6A7A8;

}

/* Days of the week (mon, the, wed) */

a.fc-col-header-cell-cushion{

font-size: 20px;

color: #78BEEB;

}

/* Event Text */

div.fc-event-title.fc-sticky{

font-size: 15px;

}

/* selected / active state */

button.fc-dayGridMonth-button.fc-button.fc-button-primary.fc-button-active{

background-color: pink;

border: 2px solid #FFFFFF;

padding: 10px 24px;

background-color: #FFdd55;

text-transform: uppercase;

box-shadow: 0;

}

button.fc-timeGridWeek-button.fc-button.fc-button-primary.fc-button-active{

background-color: pink;

border: 2px solid #FFFFFF;

padding: 10px 24px;

background-color: #FFdd55;

text-transform: uppercase;

box-shadow: 0;

}

button.fc-timeGridDay-button.fc-button.fc-button-primary.fc-button-active{

background-color: pink;

border: 2px solid #FFFFFF;

padding: 10px 24px;

background-color: #FFdd55;

text-transform: uppercase;

box-shadow: 0;

}

/* Hover state */

button.fc-dayGridMonth-button.fc-button.fc-button-primary:hover{

background-color: #FFdd55;

border: 2px solid #FFFFFF;

}

button.fc-timeGridWeek-button.fc-button.fc-button-primary:hover{

background-color: #FFdd55;

border: 2px solid #FFFFFF;

}

button.fc-timeGridDay-button.fc-button.fc-button-primary:hover{

background-color: #FFdd55;

border: 2px solid #FFFFFF;

}

/* default color when button is not selected */

button.fc-dayGridMonth-button.fc-button{

border: 2px solid #FFFFFF;

padding: 10px 24px;

background-color: #78BEEB;

text-transform: uppercase;

}

button.fc-timeGridWeek-button.fc-button{

border: 2px solid #FFFFFF;

padding: 10px 24px;

background-color: #78BEEB;

text-transform: uppercase;

}

button.fc-timeGridDay-button.fc-button{

border: 2px solid #FFFFFF;

padding: 10px 24px;

background-color: #78BEEB;

text-transform: uppercase;

}

/* Arrows (previous month, next month and today button */

button.fc-prev-button.fc-button.fc-button-primary{

border: 2px solid #FFFFFF;

background-color: #78BEEB;

}

button.fc-next-button.fc-button.fc-button-primary{

border: 2px solid #FFFFFF;

background-color: #78BEEB;

{

button.fc-today-button.fc-button.fc-button-primary{

border: 2px solid #FFFFFF;

background-color: #78BEEB;

{

</style>
1 Like

@jared.gibb
What all can and does your plugin do specifically involving calendars?

Maybe bubble (@nickc) 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).

Just my 2 cents…

This is awsome!
Amazing work. Thanks for sharing.

Your welcome!
I’m all about sharing, please pay it forward and I’ll continue to do the same.

Hopefully someone else can help us with those other pesky buttons and shadow boxes.

1 Like
  • Replace the header if you want with all bubble components
  • resource scheduling
  • oauth with google
  • offline google cal access
  • crud with google calendar
  • a few date/time pickers
    — one for time only. One optimized for mobile devices.
  • dynamic time slot creation
  • time slot filtering
  • creates repeating events like nobody’s business!
  • schedule coordination
    — enter two people’s availability plus booked times and get a list of times those two people can meet.
  • probably other stuff I’m forgetting to mention
  • lots of options and more added regularly until all the FullCalendar 4 options exist or I get bored and nobody asks

Btw, your calendar looks nice. Do you intend to not hide all the events that skew the calendar dimensions by default?

Hmmm… I’m not sure I haven’t thought that far yet lol. To hide them what would you suggest (repeating group)?

Also I appreciate you sharing your plugins capabilities :wink:
I’d like to learn more about the:

creates repeating events like nobody’s business

1 Like

Good post on that pesky outline (focus):
https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

Hey Jared,

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:

  1. Would you know how to edit the label of the calendar entries so that we can display it in the following way:
    Screenshot 2021-09-14 at 13.30.20

[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.
Screenshot 2021-09-14 at 13.31.23

I was trying to add PM to P on the calendar following:

How can I change the my event times to AM/PM, am/pm, etc.?

You can modify this in the Settings tab of your application editor, under Language. In the “Time Format” field for the Full Calendar plugin, the expression for {“agenda”:“h:mmt{ - h:mmt}”,"":“h(:mm)t”} would display your times as 7p-8p, for example. Adding two ts instead of one will result in 7pm-8pm.

Hey nickc,

From instructions in the docs I should add another “T” to ts. so the end object would look like this:

{"agenda":"h:mmtt{ - h:mmtt}","":"h(:mm)tt"}

Or am I missing sth?

It doesn’t seem to add the M to P.