Plantilla de evento dinámico en FullCalendar

Esta es la respuesta más exacta que te podemos dar, sin embargo obsérvala detenidamente y analiza si se adapta a tu trabajo.

Solución:

Puede agregar metainformación sobre el evento, como clases, y estilo en consecuencia:

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

Y el CSS:

.fc-event.blue 
.fc-event.main 

Sobre eventRender inserta las clases con

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

Y agregue más contenido como:

if (event.description) 
    element.find('.fc-event-inner')
        .append("
" + event.description + "
");

$(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("
" + event.description) + "
";
                           
            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;

La función de devolución de llamada eventRender puede modificar el elemento, devuelve un nuevo elemento DOM que se usará para renderizar en su lugaro puede volver false, lo que evitará que el evento se procese en absoluto.

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

Ejemplo aquí: 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 $('
' + event.title + '
');
    ,

    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'
        ,
    ]
);

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador