Displaying font awesome icons in the title of a calendar event

Wappler General
1

Hi,
I’m trying to build a calendar using the Full Calendar widget. I would like to show an icon the left of the event title to signify the type of event that is being shown. I really need some direction on how to do that.

Many thanks in advance,

Alex

2

Are you using the built-in Wapper version of Full Calendar or are you manually using the plug-in? I am using it manually as i am using parts of Full Calendar not available in Wapper (mainly the Timeline Resource module)

I have icons displaying in my version but i am doing it it manually via JS files etc

3

Using the built-in Wappler version, you can create an icon, but it will be the same icon for all events. There is no ID or CLASS that can be used as a distinct selector.

Have FA 5 included in the project and add the following CSS:

.fc-title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    padding: 0 8px;
    text-decoration: inherit;
    content: "\f017";
}

I am curious to know what @Philip_J has done. Sounds like a much better solution.

4

It’s been a while since i wrote the code, but looking at it now I use one of ‘Event Render Hooks’, eventContent

https://fullcalendar.io/docs/event-render-hooks

I basically insert HTML code for the element that bootstrap/Font Awesome uses for its icons inside the wrapper for each event.

For my app, it’s a toggle ability for the user to switch between icons, names or empty when being when using the resource timeline view.

The icon is different for each Event type and is just stored in the DB and retrieved in the query that gets all the event/resource data.

Any extra bits of data can be associated to an event or resource using the extendedProps property of an event object

https://fullcalendar.io/docs/event-object

1 Like
5

Hi Philip,
Thanks for the response. I’m using Wappler’s built-in version of he full calendar. I should have said in my request that I’m not a programmer, so I wouldn’t know how to use a plugin or JS files. (I can barely spell JS. )

6

Neither was I before i started using Wappler :slight_smile:

We'll i can't help with the in-built version unfortunatly... but if it is something you want/need to do.. You can do it, but will need a bit of time to understand Full Calendar and other basic JS stuff.

Or perhaps someone else who's done it with the built-in version will have a solution.

7

Thx Ben,
but having the events display the same icon would defeat the purpose of putting one. The idea is to use different icons to differentiate different type of events.
Why cannot I pass the string in angle brackets "i dmx-bind:class= “fal fa-xxxx” etc as part of the title? The calendar renders the string and not the font awesome icon! I tried putting it in the INNER HTML but doesn’t even show…

8

The problem is that Wappler have produced their own JS to make the widget function in Wappler. If they added a module that allowed the CLASS to filter through to the HTML then you could use that class selector for the CSS.

image
image355×542 13.8 KB

Maybe worthwhile asking @George to add to the JS.