2016-09-23 46 views
0

我一直在尋找一些代碼來使用圖像作爲fullcalendar中的事件的背景(fullcalendar jQuery),但我所能找到的只是爲所述事件添加圖標的代碼。在fullcalendar中顯示圖像作爲背景

我希望做這樣的事情:

event with image background

更新:2016年9月23日下午8時15分EST:

我一直在試圖用:

eventRender: function(event, element) { 
$(element).find(".fc-day").css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat"); 
$(element).find(".fc-day").css("background-size","contain"); 
    } 
}); 

沒有成功,到目前爲止,我將繼續尋找找我錯過了什麼。

更新:2016-09-24 2:00 pm EST

進展:

dayRender: function (date, cell) { 
     cell.css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat center"); 
     cell.css("background-size","contain") 
    }, 
    eventRender: function(event, element) { 
     $(element).css("opacity", "0.75"); 
    } 
}); 

現在我只需要找到一種方法,我在評論規定已經改變特定事件的背景和不透明性事件將被存儲在一個MySQL數據庫(事件沒有圖片不應該有背景或不透明)。

+0

你有CSS的知識? – madalinivascu

+0

我這樣做,我不是專家,但我認爲事件的背景「加載」是在javascript/AJAX代碼中完成的。我會看看CSS部分。 –

+0

Re:updated @ 815EST with eventRender **元素**不是日容器,而是錨標籤。您可能能夠使用dayRender https://fullcalendar.io/docs/display/dayRender/與日期做到這一點? – smcd

回答

1

你可以用CSS做它作爲@madalin ivascu提到

https://jsfiddle.net/j49qtcge/

#calendar td.fc-day { 
    background: url('https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg') no-repeat; 
    background-size: contain; // cover? 
} 
#calendar a.fc-event { 
    opacity: 0.75; 
} 

使用比 '月' 等觀點可能需要不同的CSS雖然

+0

非常感謝你的回答,這肯定會對我有很大的幫助。我將進一步測試,因爲我將在鏈接到MySQL日曆的數據庫中獲取圖片。我找到了以下內容:https://fullcalendar.io/docs/event_rendering/eventRender/,它將根據事件幫助渲染圖片。我會讓你全部貼上代碼 –