本文介绍了如何避免Fullcalendar逆背景中的累积图层颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我为特定的日期和不同的资源添加了不同的工作时间,但是反向背景层是累积的.

早晨的事件具有下午事件参数的颜色,并且与之相反.

我想要两个白人事件.

此处的示例: http://jsfiddle.net/gwpoofqk/它独立于businessHours和资源参数

events: [
        {
            start: '2018-05-02 10:00:00',
            end: '2018-05-02 11:00:00',
            color: 'blue',
            rendering: 'inverse-background'
        },
        {
            start: '2018-05-02 14:00:00',
            end: '2018-05-02 15:00:00',
            color: 'green',
            rendering: 'inverse-background'
        }
    ]
解决方案

反向背景"使用指定的颜色填充事件未占用的所有空间.这包括其他事件占用的空间.由于您的其他事件也是背景事件,因此它不是纯色,而其他逆背景颜色则通过它显示.由于日历会渲染所有这些内容,因此无法找到代表实际事件的位,并将其不透明度设置为0,这样备用背景就不会显示出来.

在不更改fullCalendar源代码的情况下使上述过程成为可能的情况下,我知道的唯一解决方法是-如文档中所述( https://fullcalendar.io/docs/v3/background-events )-为每个事件提供相同的id,以便将它们分组在一起,自动使用单一背景色.使用该组中第一个事件的颜色:

events: [
{
  id: 2,
  start: '2018-05-02 10:00:00',
  end: '2018-05-02 11:00:00',
  color: 'blue',
  rendering: 'inverse-background'
},
{
  id: 2,
  start: '2018-05-02 14:00:00',
  end: '2018-05-02 15:00:00',
  color: 'green',
  rendering: 'inverse-background'
}

有关有效的演示,请参见 http://jsfiddle.net/gwpoofqk/1//p>

I added different business hours for specific dates and different ressources, but the inverse-background layers are cumulative.

The event on the morning have color of afternoon event parameter and reciprocally.

I want to have both white events.

Example here: http://jsfiddle.net/gwpoofqk/ it's independent of businessHours and ressource parameters.

events: [
        {
            start: '2018-05-02 10:00:00',
            end: '2018-05-02 11:00:00',
            color: 'blue',
            rendering: 'inverse-background'
        },
        {
            start: '2018-05-02 14:00:00',
            end: '2018-05-02 15:00:00',
            color: 'green',
            rendering: 'inverse-background'
        }
    ]
解决方案

"inverse-background" fills in all the space not occupied by the event on which it is declared with the colour specified. This includes space occupied by other events. Since your other event is also a background event, it's not a solid colour, and the other inverse-background colour shows through it. Due to way the calendar renders all of this, it's not possible to find the bit which represents the actual event, and set its opacity to 0 so that the alternate background would not show through.

Without making alterations to the fullCalendar source code to make the above process possible, the only workaround I am aware of is - as mentioned in the documentation (https://fullcalendar.io/docs/v3/background-events) - to give each event the same id, so that they will be grouped together and automatically use a single background colour. The colour of the first event in the group is used:

events: [
{
  id: 2,
  start: '2018-05-02 10:00:00',
  end: '2018-05-02 11:00:00',
  color: 'blue',
  rendering: 'inverse-background'
},
{
  id: 2,
  start: '2018-05-02 14:00:00',
  end: '2018-05-02 15:00:00',
  color: 'green',
  rendering: 'inverse-background'
}

See http://jsfiddle.net/gwpoofqk/1/ for a working demo

这篇关于如何避免Fullcalendar逆背景中的累积图层颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-29 12:19
查看更多