[英]Full Calendar - Rails - Adding Custom CSS Classes to Events
我在日歷上顯示約會。 我正在向事件添加一個類,以便可以根據約會的狀態更改其背景顏色。
<script>
$(document).ready(function(){
var user_id = '<%= params[:id] %>';
var eventsPath = "/users/" + user_id + "/appointments.json";
$('#calendar').fullCalendar({
editable: false,
handleWindowResize: true,
displayEventEnd: false,
firstDay: 1,
allDaySlot: false,
columnFormat: 'ddd',
scrollTime: '12:00:00',
eventBackgroundColor: '#505B75',
eventBorderColor: '#505B75',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
height: 650,
slotDuration: "00:15:00",
slotEventOverlap: false,
loading: function(bool){
if (bool)
$('#loading').show();
else
$('#loading').hide();
},
events: eventsPath,
allDay: false,
});
});
</script>
這是事件路徑(JSON)
json.array! User.find(params[:user_id]).appointments do |appointment|
json.extract! appointment, :id, :business_title
json.title appointment.business_title
json.start appointment.starts_at
json.className 'boobs'
json.end appointment.starts_at + 30.minutes
json.url appointment_url(appointment, format: :html)
end
您可以通過eventRender回調向特定事件添加樣式。 該事件已經呈現,因此您需要更改樣式/直接向該元素添加一個類。
$('#calendar').fullCalendar({
...
eventRender: eventRenderCallback,
...
});
function eventRenderCallback(event, element){
element.addClass(event.className);
}
<style>
.myClass{
background-color:red !important;
}
</style>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.