Динамический шаблон событий в FullCalendar

Есть ли способ динамически изменить шаблон события в FullCalendar?



Обновление. Что я хочу, так это указать новый событийный html (например, в eventRender callback) и сделать FullCalendar, чтобы использовать его для рендеринга событий. Что-то вроде этого: 



eventRender: function(event, element, view) {

  var template = '<div class="customEvent"></div>';

  return $.parse(template);

}


Попробовал пример выше - не получилось.

805   4  
Без рубрики

4 ответов:

Функция обратного вызова eventRender может изменять элемент, возвращать совершенно новый элемент DOM, который будет использоваться для рендеринга вместо, или она может возвращать false, что вообще предотвратит рендеринг события.

Http://fullcalendar.io/docs/event_rendering/eventRender/

Пример здесь: http://jsfiddle.net/3E8nk/506/ 

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-06-12',
    editable: true,
    eventRender: function(event, element, view) {
        return $('<div>' + event.title + '</div>');
    },

    events: [
        {
            title: 'All Day Event',
            start: '2014-06-01'
        },
        {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-09T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-16T16:00:00'
        },
        {
            title: 'Meeting',
            start: '2014-06-12T10:30:00',
            end: '2014-06-12T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2014-06-12T12:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-06-28'
        },
    ]
});
8  
2014-10-06 17:50:08

Вы можете добавить метаинформацию о событии, например классы, и стиль соответственно: 

events: [{
    title: 'Blue Event',
    start: '2014-06-01',
    description: 'Lorem ipsum lorem ipsum',
    class: 'blue main'
}]

И CSS: 

.fc-event.blue {}
.fc-event.main {}

On eventRender вставить классы с 

eventRender: function (event, element) {
    element.addClass(event.class)
}

И добавьте больше контента, например: 

if (event.description) {
    element.find('.fc-event-inner')
        .append("<div class='desc'>" + event.description + "</div>");
}


$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: { left: '', center: '', right: '' },
        defaultDate: '2014-06-12',
        eventRender: function (event, element) {
            if (event.description) {
                element.find('.fc-event-inner')
                    .append("<div class='desc'>" + event.description) + "</div>";
            }               
            element.addClass(event.class)
        },
        events: [{
            title: 'Blue Event',
            start: '2014-06-01',
            description: 'Lorem ipsum lorem ipsum',
            class: 'blue main'
        }, {
            title: 'More Blue',
            start: '2014-06-01',
            description: 'More lorem ipsum',
            class: 'blue main'
        }, {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10',
            class: 'red main'
        }, {
            title: 'Meeting',
            start: '2014-06-12T10:30:00',
            end: '2014-06-12T12:30:00',
            class: 'blue main'
        }, {
            title: 'Lunch',
            start: '2014-06-12T12:00:00',
            class: 'blue main'
        }, {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00',
            class: 'red main'
        }, ],
    });
});
body {
    background-color: #eaefb5;
    font-family: sans-serif;
}
.fc-event-time, .fc-event-title {
    padding: 0 1px;
    float: left;
    clear: none;
    margin-right: 10px;
}
.fc-event.main {
    border: 5px solid #bbb;
    margin: 5px;
    padding: 3px
}
.fc-event.red {
    background-color: #f85032;
}
.fc-event.red .fc-event-title {
    font-family: Tahoma;
    font-size: 1.2em
}
.fc-event.blue {
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0);
}
.fc-event.blue .fc-event-title {
    font-size: 2em;
    color: #EEE;
    text-shadow: 2px 2px 4px #300000;
}
.fc-event.blue .desc {
    font-size:.8em;
    float:left;
    clear:both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.css">
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.min.js"></script>

<div id="calendar"></div>
13  
2014-10-06 13:47:23

Используйте функцию eventRender (обратный вызов) для изменения шаблона события. Вот как вы можете добавить подсказку к событию: 

eventRender: function(event, element, view) { 
   element.qtip({
      content: event.description
   });
}

С помощью этой функции вы можете полностью настроить любую деталь отображаемого события, включая добавление полного нового шаблона события. Для получения более подробной информации ознакомьтесь с документацией: http://fullcalendar.io/docs/event_rendering/eventRender/

1  
2014-09-29 15:56:40

Вы можете добавить новую информацию следующим образом 

eventRender: function( event, element, view ) {
       element.find('.fc-title').append('<span class="yourCSS"></span> '); 
}
0  
2017-03-31 18:39:04

Comments

    Ничего не найдено.
Click here to cancel reply.