[FullCalendar]カレンダーに画像を表示する

Googleカレンダーっぽいカレンダーを作成できるjQueryのプラグイン「FullCalendar」
通常、イベント（予定）は文字でしか登録できませんが、ちょっとした工夫で、カレンダーに画像をイベントとして表示することができます。

$('#calendar').fullCalendar({
    eventRender: function(events, element) {
	if(events.img){
	    $(element.context)  //imgプロパティが存在するイベントだけtitleを画像に差し替え
		.css("border-color", "transparent")
		.css("background-color", "transparent")
		.html('<img class="photo"  src="'+events.img+'" />');
        }
    },
    events: [
	{
	    title: '通常のイベント',
	    start: new Date(y, m, 15),
	},			
	{
	    title: '画像　イベント',
	    start: new Date(y, m, 1),
	    img:"img2.jpg"					
	},
	{
	    title: '画像　イベント',
	    start: new Date(y, m, 2),
	    img:"img3.jpg"					
	}
    ]
});

$('#calendar').fullCalendar({

eventRender: function(events, element) {

if(events.img){

$(element.context) //imgプロパティが存在するイベントだけtitleを画像に差し替え

.css("border-color", "transparent")

.css("background-color", "transparent")

.html('<img class="photo" src="'+events.img+'" />');

}

events: [

{

title: '通常のイベント',

start: new Date(y, m, 15),

{

title: '画像　イベント',

start: new Date(y, m, 1),

img:"img2.jpg"

{

title: '画像　イベント',

start: new Date(y, m, 2),

img:"img3.jpg"

}

]

});

example

貼り付けた画像もイベントなので、ドラッグで移動することができます。

【追記】
Fullcalendar ver.1.6.4 では上記コードでは画像を表示できません。
下記のコードを使用してください。

$('#calendar').fullCalendar({
    eventRender: function(events, element) {
	if(events.img){
	    $(element[0])  //imgプロパティが存在するイベントだけtitleを画像に差し替え
	    .css("border-color", "transparent")
	    .css("background-color", "transparent")
	    .html('<img class="photo"  src="'+events.img+'" />');
	}
    },
    events: [
	{
	    title: '通常のイベント',
	    start: new Date(y, m, 15),
	},			
	{
	    title: '画像　イベント',
	    start: new Date(y, m, 1),
	    img:"img2.jpg"					
	},
	{
	    title: '画像　イベント',
	    start: new Date(y, m, 2),
	    img:"img3.jpg"					
	}
    ]
});

$('#calendar').fullCalendar({

eventRender: function(events, element) {

if(events.img){

$(element[0]) //imgプロパティが存在するイベントだけtitleを画像に差し替え

.css("border-color", "transparent")

.css("background-color", "transparent")

.html('<img class="photo" src="'+events.img+'" />');

}

events: [

{

title: '通常のイベント',

start: new Date(y, m, 15),

{

title: '画像　イベント',

start: new Date(y, m, 1),

img:"img2.jpg"

{

title: '画像　イベント',

start: new Date(y, m, 2),

img:"img3.jpg"

}

]

});

投稿者: shimizu