Question

我使用https://github.com/HsuanXyz/ion2-calendar生成离子日历。我无法使用dateconfig的cssClass对日期进行颜色更改。

以下是我使用

的代码

`daysConfig（）{

let _daysConfig = [
  {
    date:new Date(2018,0,1),
    subTitle:'New Year\'s',
    marked:false,
    cssClass: 'my-cal'
  },
  {
    date:new Date(2017,1,14),
    subTitle:'Valentine\'s',
    disable:true
  },
  {
    date:new Date(2017,3,1),
    subTitle:'April Fools',
    marked:true
  },
  {
    date:new Date(2017,3,7),
    subTitle:'World Health',
    marked:true
  },
  {
    date:new Date(2017,4,31),
    subTitle:'No-Smoking',
    marked:true
  },
  {
    date:new Date(2017,5,1),
    subTitle:'Children\'s',
    marked:true
  }
];

_daysConfig.push(...this.days);

this.calendarCtrl.openCalendar({
  from: new Date(2017,0,1),
  to  : new Date(2018,11.1),
  daysConfig:_daysConfig
})
  .then( (res:any) => { console.log(res) })
  .catch( () => {} )

}`

css课程 .my-cal { color: yellow }

Answer 1

cssClass仅添加到包含文本的<p>元素所在的按钮中。

因此，要正确更改颜色，必须首先引用<p>元素，然后为其指定颜色。

示例

.ts

cssClass: 'my-cal'

.scss

.my-cal {

 p {

   color: green;

 }

}

Answer 2

经过近5小时的长时间RnD可以解决此问题。

请找到以下离子性溶液

在global.scss中定义以下类

.my-cal {
    background-color: red !important;
}

请记住不要在其他任何地方定义此类。

现在在您的天配置中使用此配置，如下所示：

let _daysConfig: DayConfig[] = [];
    for (let i = 0; i < 31; i++) {
      _daysConfig.push({
        date: new Date(2020, 4, i + 1),
        marked: false,
        subTitle: `$${i + 1}`,
        cssClass: 'my-cal'
      })
    }

希望它将对某人有所帮助：）

Answer 3

解决方案之一是将该代码添加到您的全局scss / css样式

ion-calendar { .my-cal{ background-color: #6E6B6B !important; p{ color: white !important; } }}

稍后将“ my-cal”课程添加到所需的日期。

离子2日历cssClass不工作

3 个答案: