文章分類/

Infragistics|Ultimate UI Angular|運用igxDatePicker對日曆的字體、背景顏色等樣式進行設定

13 次瀏覽
2023-04-14 更新

infragistics log

igxDatePicker可以透過覆寫主題來修改其外觀。

$custom-datepicker-theme: igx-calendar-theme(
  // 日曆header背景顏色
    $header-background: green,
  // 日曆header文字顏色    
    $header-text-color: red,
  // igx-calendar-picker的背景色
    $picker-background-color: yellow,
  // 日曆contents背景色
    $content-background: yellow,
  // 本日的文字顏色
    $date-current-text-color: brown,
  // 本日的背景色
    $date-current-bg-color: orange,
  // 次月、前月的箭頭部分顏色
    $picker-arrow-color: #2dabe8,
  // 選擇日期的文字顏色
    $date-selected-text-color: orange,
  // 本年度/所選年度的text顏色。
    $year-current-text-color: #2dabe8,
  // 本月份/所選月份的text顏色。
    $month-current-text-color: #2dabe8
);

:host ::ng-deep {
  @include igx-calendar($custom-datepicker-theme);
}

除了上述方法外,本文還提供其他可用的屬性,提供各位參考,詳情請參閱以下連結:

https://jp.infragistics.com/products/ignite-ui-angular/docs/sass/latest/index.html#function-igx-calendar-theme

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊