Добавить значок (ы) в первой строке события (fullCalendar)

Question

Для отображения определенных атрибутов события в матрице 'fullCalendar' я хотел бы добавить значки, чтобы показать их, для кнопки 'complete' (i) или символа URL, если событие содержит ссылку URL. .

Я не хочу записывать html-строку в один из элементов (fc-event-time / -title) в элементе , но определяю дополнительный элемент, например:

<a>
  <span class="fc-event-time">15:15  - 16:15<br></span>
  **<span class="fc-event-icons"> ..some definitions for icons here ..</span>**
  <span class="fc-event-title">Fri Dille</span>
</a>

Любая помощь здесь? Гюнтер

Answer 1

Ну, эта тема старая, но я не смог найти здесь, как это сделать с тегами <img>, поэтому я оставляю здесь другой способ поместить изображения в события fullcalendar:

Добавьте в свой eventObject путь к изображению. Если вы используете JavaScript, это будет что-то вроде:

events: [
    {
        title  : 'event1',
        start  : '2010-01-01',
        imageurl:'img/edit.png'
    },
    {
        title  : 'event1',
        start  : '2010-01-01'
    }]

Затем на eventRender просто поместите изображение:

eventRender: function(event, eventElement) {
    if (event.imageurl) {
        eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='12' height='12'>");
    }
},

Если вы хотите использовать одно и то же изображение на всех предметах, вам просто нужно поместить это в ваш eventRender:

eventElement.find("div.fc-content").prepend("<img src='pathtoimage.png' width='12' height='12'>");

Answer 2

Вы можете добавить событие eventRender так:

$("#YourCalendar").fullCalendar({
    eventRender: function(event, element) {
        element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("Whatever you want the content of the span to be"));
    }
});

аналогично вы можете добавить новый элемент к любому другому элементу в контейнере DIV события

Answer 3

eventRender: function (calEvent, element) {

    element.find("div.fc-content").prepend("<img src='/imagens/IconExperience/16x16/sms.png' width='16' height='16'>"); 
}

- щелчок события слушателя

eventClick: function (calEvent, jsEvent, view) {

    if (jsEvent.target.href != undefined) {
        //click on a icon in event
        "http://localhost:64686/imagens/IconExperience/16x16/whatsapp-icon.png"
        etc...
    }
    alert(jsEvent.target.href);
}

Answer 4

это работает для меня:

в полном календаре 1.5.4

eventRender: function(event, element) { 
     //this will add <span> and you can append everthing there
     element.find("div").find("span").before("<span/>").addClass("iconcon");
}

и положить в CSS

.iconcon:before{  //if icon not there then change :before with :after
  font-family: "FontAwesome";  
  content: "\f1fd\00a0";   // \00a0 is blank space
  color: #fff;
}

Answer 5

Привет! Я решил свою проблему, изменив файл fullcalendar.min.js и удалив htmlEscape в заголовке. Просто найдите слово HtmlEscape и удалите его. а в календаре событий теперь можно добавлять значки типа

Answer 6

С этим вы можете добавить текст или HTML к заголовку ваших событий в Fullcalendar

eventRender: function(event, element) {

            var icon  = 'The icon you want, HTML is possile';
                $(element).find('.fc-time').append(icon);
            }

Answer 7

Одним из возможных решений может быть:

  myUtil.goCalendar();       // build calendar with all events 

  // --- post process to add functionality to 'specific' events displayed 
  //     in the calendar matrix, eg. "completed"
  $("div.afc-completed").each(function(){
     $(this).find('span.fc-event-time').addClass("afc-event-completed");
  });

С myUtil.goCalendar (); Я строю календарь со всеми событиями. Это включает в себя добавление event.className ('afc-complete') для всех событий с этим атрибутом. После создания календаря я получаю все эти события и добавляю другой класс в 'fc-event-time'. Это не то, что я подумал в своем первом запросе, но может послужить основой для добавления большего количества HTML-кода с помощью следующего оператора CSS:

.afc-event-completed {
    color: red;
    text-decoration: line-through;
}

.. или добавить значки. Может быть, не самая лучшая процедура ... но способ решить требование.

вызов экспертов:
Любой другой / лучше / короче / быстрее.
Гюнтер