전체 달력 제목에 글꼴 멋진 아이콘 추가

전체 달력 제목에 글꼴 멋진 아이콘 추가

워드프레스, 가공할 양식 및 전체 캘린더를 사용하여 맞춤형 캘린더 솔루션을 만들고 있습니다.

캘린더의 각 제목 앞에 폰트 멋진 아이콘을 추가하고 싶은 것 이외에는 모두 동작하고 있습니다.

아래 코드와 같이 제목에 html을 추가하면 최종 결과가 아닌 코드만 출력됩니다.

$('#calendar').fullCalendar({
    events: [
        {
            title  : '<i class="fa fa-asterisk"></i>event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09T12:30:00',
            allDay : false // will make the time show
        }
    ]
});

누가 나를 올바른 방향으로 인도해 줄 수 있나요?:-)

안부 전해요

매트

eventRender 함수 내에서 제목 선두에 있는 글꼴-awesome 아이콘을 변경할 수 있습니다.

키 아이콘이 있는 옵션을 하나 추가했습니다.아이콘이 정의되어 있으면 eventRender 함수에 폰트썸 아이콘이 추가됩니다.

다음의 예를 확인해 주세요.

$('#calendar').fullCalendar({
  events: [
    {
        title  : 'event1',
        start  : '2015-10-01',
        icon : "asterisk" // Add here your icon name
    },
    {
        title  : 'event2',
        start  : '2015-10-05',
        end    : '2015-10-07'
    },
    {
        title  : 'event3',
        start  : '2015-10-09T12:30:00',
        allDay : false // will make the time show
    }
],
eventRender: function(event, element) {
     if(event.icon){          
        element.find(".fc-title").prepend("<i class='fa fa-"+event.icon+"'></i>");
     }
  }        
})

풀 캘린더 V4를 사용하는 경우 내 렌더는 다음과 같습니다.

$ICON을 플레이스 홀더로 하는 json 타이틀:

{
  start: date
  title: '$ICON custom_name'
  img: 'fontawesome-icon-name'
}

eventRender: function(info) {
  info.el.innerHTML = info.el.innerHTML.replace('$ICON', "<em class='far fa-"+info.event.extendedProps.img+"'></em>");
}

편집: 풀캘린더 5.x.x에서는 접근법이 조금 달라서 아이콘만 전면에 추가하므로 $ICON 플레이스홀더가 필요 없습니다.

eventContent: function (args, createElement) {
  const icon = args.event._def.extendedProps.img;
  const text = "<em class='far fa-" + icon + "'></em> " + args.event._def.title;
  return {
    html: text
  };
},

치어스 하네즈

Calendar 4.4에서도 같은 문제가 발생.저는 S의 코드를 사용하려고 했습니다.팝픽

eventRender: function (info) {
  let icon = info.event.extendedProps.icon;
  let title = $(info.el).first('.fc-title-wrap');
  if (icon !== undefined) {
    title.prepend("<i class='" + info.event.extendedProps.icon + "'></i>");
  }
}

동작합니다만, 약간의 문제가 있습니다.fc-title-wrap 에서는, 「시간」이 삭제됩니다.

여기서 클래스 '.fc-title'을 가리키는 다른 답변이 표시되지만 FullCalendar 4.4의 목록 표시에는 해당되지 않습니다.

다음 코드를 사용했는데 월 뷰, 위크 뷰, 데이 뷰 및 리스트 뷰에서 사용할 수 있었습니다.

보시는 바와 같이 제가 여기서 찾은 몇 가지 답변에 기초하고 있습니다.도움이 됐으면 좋겠다.

 eventRender: function (info) {            
        let icon = info.event.extendedProps.icon;
        // this works for Month, Week and Day views
        let title = $(info.el).find('.fc-title');
        // and this is for List view
        let title_list = $(info.el).find('.fc-list-item-title a');
  
        if (icon) {
            var micon = "<i class='" + icon + "'></i>&nbsp";
            title.prepend(micon);
            title_list.prepend(micon);
        } 
  }


        

Full Calendar 4.3.1에서도 같은 문제가 발생.도움이 됐으면 좋겠다.

eventRender: function (info) {
    let icon = info.event.extendedProps.icon;
    let title = $(info.el).first('.fc-title-wrap');
    if (icon !== undefined) {
        title.prepend("<i class='" + info.event.extendedProps.icon + "'></i>");
    }
}

css 콘텐츠로 풀달력의 제목에 글꼴의 멋진 아이콘을 추가할 수 있습니다(: Pseudo-element 앞).

.fc-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f274";
  display: inline-block;
  padding-right: 3px;
  font-weight: 900;
}

현재 요건에 따라 css 콘텐츠를 추가합니다.fa-calendar-check아이콘 콘텐츠가 사용됩니다.변경할 수 있습니다.font-family로.Font Awesome 5 Brands또는Font Awesome 5 Free

텍스트를 아이콘으로 바꾸려면 아래 코드를 사용할 수 있습니다.

eventRender: function(event, element) {
   element.find(".fc-title").html(function () { return $(this).html().replace("Rs", "<i class='fa fa-inr'></i>")});
}

언급URL : https://stackoverflow.com/questions/33285716/add-font-awesome-icon-to-full-calendar-title