FullCalendar js - 在全天单元格中添加代码html II [英] FullCalendar js - To add code html in all day cells II

问题描述

昨天，我发表了一个问题，但必要条件已经改变：

在eventRender i中有一个评论的代码，关于图标，也许它可能是一个线索。

谢谢，

解决方案

您可以使用 eventRender 事件将图标添加到dom中，并使用事件文本浮动图标集：

  eventRender：function（event，element）{
 element.find（'。fc-event-inner'）。before（$（< （< ul class = \fc-icons -\\>< / < img src = \  -  \/>< / li>+< li>< img src = < / ul>））; 
}，
  

和一点造型：

  .fc-event {
 top：10px; 
背景：透明; 
 border：0px solid＃3a87ad; 
颜色：＃000; 
} 
 .fc-event-icons {
 float：left; 
 margin-right：5px; 
} 
 .fc-event-inner {
 width：20px; 
} 
  

结果：

Yesterday, i published one question, but the requisites have changed: DOM manipulation for fullCalendar js.

Now, the icons must be events. You can not add icons with the library "awesome"

From this example (code js)

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [];

    var currDate = new Date(new Date().getFullYear(), 0, 1);
    while (currDate.getYear() == 115) {
        currDate.setDate(currDate.getDate() + 1);
        var myDate = new Date(currDate);
        events_array.push({
            title: '2\n3\n1\n1\n1',
            start: myDate           
        })        
    }       

    $("#calendar").fullCalendar({   
        header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        selectable: false,
        monthNames:
            ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        dayNamesShort:
            ['D', 'L', 'M', 'M', 'J', 'V', 'S'],        
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        eventRender: function(event, element) {
            /*element.find(".fc-time").after($("<span class=\"fc-event-icons\"></span>").html("<ul class=\"fc-icons\">"
            + "<li><img src=\"../img/ico_calen_min_1.png\" /></li>"
            + "<li><img src=\"../img/ico_calen_min_2.png\" /></li>"
            + "<li><img src=\"../img/ico_calen_min_3.png\" /></li>"
            + "<li><img src=\"../img/ico_calen_min_4.png\" /></li>"
            + "<li><img src=\"../img/ico_calen_min_5.png\" /></li>"
            + "</ul>"));

            When activing this code, the event not is visible. i know that i must not to use the  ".fc-time" class. But i have tested with others and nothing (fc-event-container). 

            */
        },
        eventClick: function(event, element) {
            alert("Clic Event");
        },
        events: events_array
    });
});:

From this example (code css)

.fc-event {
    top: 10px;
    margin-left: 20px;
    width: auto !important;
    background: transparent;
    border: 0px solid #3a87ad;
    color: #000;
}



.fc-time{
   display: none;
}

In short, I need two events in all cells of the day on all calendar, of this form:

In eventRender i have a commented code, about the icons, perhaps it may be a clue.

Thanks,

解决方案

You can add you icons to the dom using eventRender event and float the icon set with the event text:

eventRender: function (event, element) {
    element.find('.fc-event-inner').before($("<div class=\"fc-event-icons\"></div>").html("<ul class=\"fc-icons\">" + "<li><img src=\"--\" /></li>" + "<li><img src=\--\" /></li>" + "</ul>"));
},

and a little styling:

.fc-event {
    top: 10px;
    background: transparent;
    border: 0px solid #3a87ad;
    color: #000;
}
.fc-event-icons {
    float: left;
    margin-right: 5px;
}
.fc-event-inner {
    width: 20px;
}

Result:

Demo: http://jsfiddle.net/dcx5unzd/4/

这篇关于FullCalendar js - 在全天单元格中添加代码html II的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！