（fullcalendar）使用开始/停止时间在事件对象中传递日历背景颜色

Question

我正在使用fullcalendar，我正在寻找一种将背景颜色作为事件传递的方法 这样我的日历应用程序就可以使用彩色事件和彩色背景的组合。 我很确定图书馆不支持这一点，所以如果有人对编写功能或使用代码的经验有任何记录，那将会有所帮助。

以下问题与我的非常相似，但写得不够清楚，不知道它是否是一个骗子： Fullcalendar event cell background color

更新1

根据接受的答案，我使用以下事件规范

{
    title: '',
    start: moment().add(2,'h').toISOString(),
    end: moment().add(5,'h').toISOString(),
    color: 'rgba(63, 191, 191, 0.24)',
    textColor: 'rgba(63, 191, 191, 0)',
    editable: false,
    durationEditable: false,
    allDay: false,
    fakeEvent: true
},          
{
    title: 'WORK DAY',
    start: moment().add(1,'h').toISOString(),
       end: moment().add(3,'h').toISOString(),
       color: 'green',
    //background-color = 'blue'                     
},  

得到这个结果。下一步是尝试阻止事件重叠显示算法，以使浅蓝色看起来更像背景颜色，不像事件。

更新2

我发现这个示例应用程序可以完成我需要的工作：http://fullcalendar.io/js/fullcalendar-2.2.0/demos/background-events.html

Answer 1

你引用的那个问题并不相同。他希望改变任何有事件的日子的背景颜色，而不是事件本身。图书馆支持您要做的事情。您可以通过传入包含事件数据的color属性来设置事件的颜色。

所有示例均可在FullCalendar Event Source Object页面上找到。如该示例页面所述，您可以在事件数组中设置它：

{
    events: [
        {
            title: 'Event1',
            start: '2011-04-04'
        },
        {
            title: 'Event2',
            start: '2011-05-05'
        }
        // etc...
    ],
    eventColor: 'yellow',   // an option!
    textColor: 'black' // an option!
}

或在JSON中：

{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

现在，这些是为源中的每个事件设置背景，但您也可以按照相同的方式对每个事件执行此操作，例如：

[
    {
        "title": "Free Pizza",
        "allday": "false",
        "borderColor": "#5173DA",
        "color": "#99ABEA",
        "textColor": "#000000",
        "description": "Fake description for the Free Pizza",
        "start": "2014-11-15T16:30:28",
        "end": "2014-11-15T17:30:28",
        "url": "some url"
    },
    {
        "title": "CSS Meetup",
        "allday": "false",
        "borderColor": "#820F20",
        "color": "#A6113C",
        "textColor": "#ffffff",
        "description": "Fake description",
        "start": "2014-11-19T16:30:28",
        "end": "2014-11-19T18:30:28",
        "url": "someUrl
    }
]

您可以使用eventColor和eventTextColor（src）为日历上的所有事件设置背景，例如

$('#fullCal').fullCalendar({
    events: [...],
    eventColor: 'yellow',
    eventTextColor: 'black'
});

在进一步澄清后，您似乎希望某些时段有颜色但不是真实的＆＃34;事件。您可以使用Background Events通过向事件documentation添加rendering: 'background'在FullCalendar 2.2中执行此操作。

＆＃13;

＆＃13;

$('#fullCal').fullCalendar({
  events: [{
    title: 'Main Event 1',
    start: moment().add(-4, 'h'),
    end: moment().add(-2, 'h'),
    color: '#ff0000',
    allDay: false
  }, {
    start: moment().add(2, 'h'),
    end: moment().add(5, 'h'),
    rendering: 'background'
  }, {
    title: 'Main Event 2',
    start: moment().add(5, 'h'),
    end: moment().add(7, 'h'),
    color: '#00cc00',
    allDay: false,
    fakeEvent: false
  }],
  header: {
    left: '',
    center: 'prev title next',
    right: ''
  },
  timezone: 'local',
  defaultView: 'agendaWeek'
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.js"></script>

<div id="fullCal"></div>

＆＃13;

＆＃13;

＆＃13;