FullCalendarでイベントテンプレートを動的に変更する方法はありますか?
更新新しいイベントhtmlを指定し(たとえば、eventRenderコールバックで)、FullCalendarを作成してイベントレンダリングに使用することです。このようなもの:
eventRender: function(event, element, view) {
var template = '<div class="customEvent"></div>';
return $.parse(template);
}
上記のサンプルを試しましたが、機能しませんでした。
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'
},
]
});
クラスなどのイベントに関するメタ情報を追加し、それに応じてスタイルを設定できます。
events: [{
title: 'Blue Event',
start: '2014-06-01',
description: 'Lorem ipsum lorem ipsum',
class: 'blue main'
}]
そしてCSS:
.fc-event.blue {}
.fc-event.main {}
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>
FullCalendarのバージョンv4では、引数が変更されました( https://fullcalendar.io/docs/eventRender )
eventRender: function(info) {
var node = document.createElement('div');
node.append(document.createTextNode(info.event.title));
return node;
}
イベントがレンダリングされないようにする場合falseを返す
eventRender: function(info) {
return false;
}
EventRender(callback)関数を使用して、イベントテンプレートを変更します。イベントにヒントを追加する方法は次のとおりです。
eventRender: function(event, element, view) {
element.qtip({
content: event.description
});
}
この機能を使用すると、完全に新しいイベントテンプレートの追加など、表示されるイベントの詳細を完全にカスタマイズできます。詳細については、ドキュメントを確認してください: http://fullcalendar.io/docs/event_rendering/eventRender/
このような新しい情報を追加できます
eventRender: function( event, element, view ) {
element.find('.fc-title').append('<span class="yourCSS"></span> ');
}