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

FontAwesome

Asked by Eduardo Luis
13 days 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]
13 days 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
13 days ago.

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

Comment posted by Eduardo Luis
13 days 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
11 days ago.

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

Any help?!
thank you!

New Reply
This reply is
Your name (optional):