如何更改全日历的背景颜色

时间:2019-06-03 11:34:56

标签: jquery css fullcalendar fullcalendar-3

如何更改完整日历中的背景颜色?

如何更改businessHours中可用时间的背景颜色?

所有可用的必须为绿色,不可用的(事件)必须为红色。

$(function() {
  $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    eventColor: 'green',
    allDaySlot: false,
    events: [{
      title: 'Teste2',
      start: new Date(2019, 5, 6, 11, 00),
      allDay: false,
      backgroundColor: 'red'
    }],
    businessHours: [ // specify an array instead
      { 
        dow: [ 3,4 ],
        start: '10:00', // 10am
        end: '16:00' // 4pm
      },
      {
        dow: [ 3,4 ], 
        start: '18:00', // 10am
        end: '20:00', // 4p
      }
    ]
  });
});

https://codepen.io/anon/pen/rgPKZm

赞这个 enter image description here

1 个答案:

答案 0 :(得分:1)

找到解决方法

    $(function() {

  $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    allDaySlot: false,
    selectable: true,
      select: function(startDate, endDate) {
      alert('selected ' + startDate.format() + ' to ' + endDate.format());
    },
    events: [
{
  title: 'Teste2',
  start: new Date(2019, 5, 6, 11, 00),
  allDay: false,
  backgroundColor: 'red'
},
    {
    dow: [ 3,4 ],
    start: '10:00', // 10am
    end: '16:00' ,// 4pm
    rendering: 'background'
  },  {
    dow: [ 3,4 ], 
    start: '18:00', // 10am
    end: '20:00', // 4pm
     rendering: 'background'
  }],
    businessHours: [ // specify an array instead
  {
    dow: [ 3,4 ],
    start: '10:00', // 10am
    end: '16:00' // 4pm
  },
       {
    dow: [ 3,4 ], 
    start: '18:00', // 10am
    end: '20:00', // 4pm
  }
]
  });

});

https://codepen.io/anon/pen/byzmzN

我使用后台事件