search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

FontAwesome

Asked by Eduardo Luis
1 year 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: "<b>XPTO1</b> &bull; <small>15:30 - 17:15</small><br>Treatment1", icon: "fa fa-user",

resource: "1698"
},{
start: "2021-09-14T11:30:00",
end: "2021-09-14T12:15:00",
text: "<b>XPTY</b> &bull; <small>11:30 - 12:15</small><br>Treatment1", icon: "fa fa-user",

Answer posted by Dan Letecky [DayPilot]
1 year 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
1 year ago.

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

Comment posted by Eduardo Luis
1 year 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
1 year ago.

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

Any help?!
thank you!

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