[英]Full Calendar - Rails - Adding Custom CSS Classes to Events
I'm showing Appointments on a calendar. 我在日历上显示约会。 I'm looking to add a class to the event so that I can change their background colour based on the status of the Appointment.
我正在向事件添加一个类,以便可以根据约会的状态更改其背景颜色。
<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>
Here's the events path (JSON) 这是事件路径(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
You can add styles to specific events through an eventRender callback. 您可以通过eventRender回调向特定事件添加样式。 The event has already rendered, so you'll need to alter the style / add a class to the element directly.
该事件已经呈现,因此您需要更改样式/直接向该元素添加一个类。
$('#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.