如何设置 ionic2-calendar 的 CSS 样式？

Question

我正在使用 Ionic 5.0.0、Angular 8 并使用ionic2-calendar插件开发应用程序。虽然插件演示工作正常，但我似乎无法修改日历的样式。该文档列出了似乎用于每个元素的几个类，但是将它们添加到我自己的 scss 文件中并添加 !important （或不添加）并没有真正起作用。我尝试将它们添加到全局 scss 以及主应用程序之一。除此之外，我尝试使用浏览器检查器来检查哪个 css 选择器实际上是在为有问题的元素设置样式，但属性选择器似乎是随机的。例如当天是：.monthview-current[_ngcontent-ljn-c3]而且重装之后就是.monthview-current[_ngcontent-igq-c4]很明显，该方法也不起作用...我也尝试添加 td.monthview-current，但也没有用...这些是我在网上查找此插件时发现的建议和示例代码并查看插件文件。如果有人有任何想法，我将非常感激。编辑：我找到了一种改变它的方法，但只能通过插件的源文件，我必须假设这不是正确的方法......有 JSON 文件，JS 文件，我必须手动改变所有这些。

Answer 1

如果样式存在于角度组件的文件中，由于视图封装，它将不会被应用。您需要在全局样式表中指定样式，并且在大多数情况下您需要添加important到样式中。

为了进一步阐述，

-src

  -assets

    -calendar.css (add styles here)

  -app

    -my-calendar

      -my-calendar.page.html

      -my-calendar.page.ts

      -my-calendar.page.css (and not here)

一些常用的自定义项：（assets/calendar.css）

将样式应用于所选日期：

.monthview-selected{

    font-weight: bold;

    background-color: #F1F1F1 !important;

    color: #333 !important;

}

将样式应用于有事件的日期：

.monthview-primary-with-event, .calendar-event-inner{

    background-color: #1a92d0!important;

}

禁用日历中的所有边框：

td, th {

    border: 0 !important;

  }

应用样式后的最终日历：

HTML

<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"

    (onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)"

    (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"

    (onTimeSelected)="onTimeSelected($event)" step="30" (showEventDetail)="true" formatDayHeader="EEEEE"

    allDayLabel="All Day" startHour="9" endHour="20">

  </calendar>

Answer 2

我遇到了同样的问题，并且解决方案与其他答案中所述的封装有关。

样式不适用于子组件

尝试更新您的组件：

@Component({

  ...

  encapsulation: ViewEncapsulation.None // <------

})

export class xxComponent{

然后，您可以根据子类应用样式，例如。

.scss：

.monthview-container {

  ...;

}

Answer 3

尽管我不确定其原因，但在我的情况下，解决方案似乎是使用全局样式表（括号中没有任何属性选择器）而不是模块特定的样式表。这并不理想，但我猜它有效！

Answer 4

::ng-deep {

.monthview-selected {

    background-color: blue !important;

    color: white !important;

    border-radius: 50%;

}

}