完整日历- Rails -为事件添加自定义CSS类

Full Calendar - Rails - Adding Custom CSS Classes to Events

本文关键字：自定义 添加 CSS 事件 日历 Rails      更新时间：2023-09-26

我在日历上显示约会。我想添加一个类到事件中，这样我就可以根据约会的状态改变它们的背景颜色。

<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>
相关文章：