如何在fullcalendar中更改背景颜色

Question

我该如何在完整日历中更改背景颜色？

我该如何更改 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

- Serhii Danovskyi

---

请返回翻译后的文本：https://stackoverflow.com/a/25174750/1675954在Java中，您可以使用以下代码将字符串转换为日期：String dateStr = "2014-07-15T06:51:01.000Z"; DateFormat df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"); df.setTimeZone(TimeZone.getTimeZone("UTC")); Date date = df.parse(dateStr);这将把字符串“2014-07-15T06:51:01.000Z”转换为一个日期对象。https://stackoverflow.com/a/36771891/1675954在Java 8中，您可以使用以下代码将字符串转换为日期：String dateStr = "2016-08-16T15:23:01Z"; Instant instant = Instant.parse(dateStr); Date date = Date.from(instant);这将把字符串“2016-08-16T15:23:01Z”转换为一个日期对象。 - Rachel Gallen

@RachelGallen，我认为OP想要更改营业时间区域内空白插槽的背景颜色。经过尝试CSS，我不确定是否可能做到这一点。然而，如果事件代表不可用时间，则任何被突出显示为白色的时间都是可用的，因此我也不确定是否有必要。将其设置为绿色可能会更好，但我认为当前的区分已经非常明显了。 - ADyson

@ADyson 是的，我想要更改落在 businessHours 区域内的空槽的背景颜色。 - Serhii Danovskyi

@SerhiiDanovskyi 我曾经看到过的一种解决方案是用一系列背景事件来替换businessHours选项，这些事件覆盖了日历的相同区域。由于这些是具有颜色属性的事件，您可以按照正常方式轻松地更改它们的背景颜色。 - ADyson

https://codepen.io/anon/pen/byzmzN 工作 - Serhii Danovskyi

Answer 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
            }
        ]
    });

});

- Serhii Danovskyi