Question

我已经使用这个日历https://github.com/mattlewis92/angular-calendar已经有一段时间了，我尝试了一下它的风格，但只有这样我才能用css来影响它，将它添加到核心css文件中（angular- calendar.css）在节点模块中..我不认为这是正确的方法，但这是唯一的方法吗？

顺便说一下。本地化不在周视图上工作，它仍然显示为＆＃34; 2017年第45周＆＃34;。 Any1修好了吗？

Answer 1

从图书馆文档中

每个组件都不包含任何组件样式，以便更轻松地覆盖它们（否则您必须在您自定义的每个规则上使用！important）。因此，您需要从node_modules / angular-calendar / dist / css / angular-calendar.css中单独导入CSS文件。

所以（我猜测没有测试），在你的组件中你可以使用

@Component({
  selector: 'app-my-commponent',
  templateUrl: './my.component.html',
  styleUrls: [
    'node_modules/angular-calendar/dist/css/angular-calendar.css', 
    './my.component.css'
  ]
})

将你的风格设为最后应该意味着它们会覆盖库样式。

Answer 2

对于造型，@ duhaime的评论为我工作..

本地化问题我这样解决了：

UPDATE purchase
SET purchase.color = dress.color
FROM dress INNER JOIN purchase ON dress.ID = purchase.dressID;

所以我在我使用日历的组件上面添加了这个自定义类，并将它放在这样的提供程序中。为了您自己的需要，只需执行相同的操作并自定义返回的字符串＆gt;＆gt; export class CustomDateFormatter extends CalendarDateFormatter { public weekViewTitle({ date, locale }: DateFormatterParams): string { const year: string = new Intl.DateTimeFormat(locale, { year: 'numeric' }).format(date); const weekNumber: number = getISOWeek(date); return `Sedmica ${weekNumber} od ${year}`; } } @Component({ selector: 'rokovnik', providers: [NotesService, { provide: CalendarDateFormatter, useClass: CustomDateFormatter } ], templateUrl: './rokovnik.component.html', styleUrls: ['./rokovnik.component.scss'] })`＆lt;＆lt; ..它应该可以正常工作。

Angular-Calendar（mattlewis92）自定义样式

2 个答案: