FontAwesome

Asked by Eduardo Luis
2 years ago.

Hi,
I would like to put some icons in the description of Resources.
I saw here that it's possible using fontawesome, but I'm not getting it.
Nothing appears...

First, Do I have to make a link to FontAwsome CSS file, or Daypilot can "understand" font awesome withou aditional CSS files?

Code:
dp.events.list = [

{
start: "2021-09-14T15:30:00",
end: "2021-09-14T17:15:00",
text: "XPTO1 • 15:30 - 17:15 Treatment1", icon: "fa fa-user",

resource: "1698"
},{
start: "2021-09-14T11:30:00",
end: "2021-09-14T12:15:00",
text: "XPTY • 11:30 - 12:15 Treatment1", icon: "fa fa-user",

how-to javascript

Answer posted by Dan Letecky [DayPilot]
2 years ago.

You can display Font Awesome icons using active areas. That will let you specify the icon position and dimensions.

You can include the active areas in the data source (events.list) but it's better to use onBeforeEventRender event. That way you won't have to send the data from the server.

Include an icon in events (https://doc.daypilot.org/scheduler/event-icons/):

dp.onBeforeEventRender = args => {
  args.data.areas = [
    { 
      right: 0,
      top: 0,
      width: 16,
      height: 16,
      icon: "fa fa-user",
      style: "font-size: 14px"
  ];
};

Include an icon in row headers (https://doc.daypilot.org/scheduler/row-header-active-areas/):

dp.onBeforeRowHeaderRender = args => {
  args.row.areas = [
    { 
      right: 0,
      top: 0,
      width: 16,
      height: 16,
      icon: "fa fa-user",
      style: "font-size: 14px"
  ];
};

The "font-size" style will determine the icon size.

The Font Awesome CSS needs to be included in a standard way (<link> tag).

Comment posted by Eduardo Luis
2 years ago.

Literally, Awesome!!
It's working.. Thanks!
:)

Comment posted by Eduardo Luis
2 years ago.

No... not realy working.
It's appearing in all events...
I want to program a PHP variable to show that fontAwesome Icon only in some events...
If certain condition occurs, I will apeend that "fa fa-user" to the event... if not, it will not appear.

Is it possible?

Answer posted by Eduardo Luis
2 years ago.

Hi...
I had no reply from the latest comment...

Any help?!
thank you!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

FontAwesome

Products

Learn

Get Support

DayPilot Pro