完整日历- Rails -为事件添加自定义CSS类
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>
相关文章:
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- Meteor-添加用户自定义字段的方法不起作用
- jQuery工具验证器自定义效果-添加&消除影响
- 添加自定义标记以自动完成
- 微笑时间轴小部件添加自定义字段
- 在验证器中添加自定义规则以检查<ul>具有元素
- 在log4javascript中添加自定义日志级别
- WooCommerce的“添加到购物车”按钮旁边的自定义按钮基于产品类型
- 向动态生成的DOM添加Angular自定义指令
- 向ASP控件添加自定义事件
- 将自定义按钮添加到现有网站
- 在“添加自定义按钮”旁边添加自定义按钮;添加到CART”;WooCommerce的按钮
- 在标记mapbox.js上添加自定义图标
- WooCommerce-根据自定义字段添加费用
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 如何自定义添加此照片共享工具
- 自定义“添加此按钮”
- 自定义添加此按钮图标图形
- jgrid自定义添加新表单
- 在jqGrid中自定义“添加/编辑”对话框