@nutui/nutui-react 3.0.20 → 3.1.0-beta.2

package/dist/es/packages/calendar/style-jrkf/style.css

@@ -37,20 +37,20 @@
   color: var(--nutui-color-title);
   font-size: var(--nutui-calendar-title-font-size, var(--nutui-font-h2));
   font-weight: var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold));
-  line-height: 50px;
+  line-height: scale-px(50px);
 }
 .nut-calendar-sub-title {
-  padding: 7px 0;
-  line-height: 22px;
+  padding: scale-px(7px) 0;
+  line-height: scale-px(22px);
   font-size: var(--nutui-calendar-sub-title-font-size, var(--nutui-font-text));
 }
 .nut-calendar-weeks {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  height: 36px;
-  border-radius: 0px 0px 12px 12px;
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
+  height: scale-px(36px);
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
+  box-shadow: 0 scale-px(4px) scale-px(10px) 0 rgba(0, 0, 0, 0.06);
 }
 .nut-calendar-week-item:first-of-type, .nut-calendar-week-item:last-of-type {
   color: var(--nutui-color-primary, #ff6666);
@@ -69,11 +69,11 @@
   box-sizing: border-box;
 }
 .nut-calendar-pannel .calendar-loading-tip {
-  height: 50px;
-  line-height: 50px;
+  height: scale-px(50px);
+  line-height: scale-px(50px);
   text-align: center;
   position: absolute;
-  top: -50px;
+  top: scale-px(-50px);
   left: 0;
   right: 0;
   font-size: var(--nutui-font-text-small);
@@ -85,9 +85,9 @@
   text-align: center;
 }
 .nut-calendar-month-title {
-  height: 23px;
-  line-height: 23px;
-  margin: 8px 0;
+  height: scale-px(23px);
+  line-height: scale-px(23px);
+  margin: scale-px(8px) 0;
 }
 .nut-calendar-days {
   overflow: hidden;
@@ -102,27 +102,35 @@
   width: var(--nutui-calendar-day-width, 14.28%);
   height: var(--nutui-calendar-day-height, 60px);
   font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold));
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
+}
+.nut-calendar-day-day, .nut-calendar-day-info-curr {
+  color: var(--nutui-color-title);
 }
 .nut-calendar-day:nth-child(7n+0), .nut-calendar-day:nth-child(7n+1) {
   color: var(--nutui-color-primary, #ff6666);
 }
+.nut-calendar-day:nth-child(7n+0) .nut-calendar-day-day,
+.nut-calendar-day:nth-child(7n+0) .nut-calendar-day-info-curr, .nut-calendar-day:nth-child(7n+1) .nut-calendar-day-day,
+.nut-calendar-day:nth-child(7n+1) .nut-calendar-day-info-curr {
+  color: var(--nutui-color-primary, #ff6666);
+}
 .nut-calendar-day-info, .nut-calendar-day-info-curr {
   position: absolute;
-  bottom: 5px;
+  bottom: scale-px(5px);
   width: 100%;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(14px);
 }
 .nut-calendar-day-info-top {
   position: absolute;
   width: 100%;
-  top: 5px;
+  top: scale-px(5px);
 }
 .nut-calendar-day-info-bottom {
   position: absolute;
   width: 100%;
-  bottom: 5px;
+  bottom: scale-px(5px);
 }
 .nut-calendar-day-active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff6666));
@@ -130,21 +138,27 @@
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
 .nut-calendar-day-active.active-start {
-  border-radius: 0px;
+  border-radius: 0;
   border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
   border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
 .nut-calendar-day-active.active-end {
-  border-radius: 0px;
+  border-radius: 0;
   border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
   border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
-.nut-calendar-day-active .nut-calendar-day-info {
+.nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-info {
+  color: var(--nutui-color-text-dark);
+}
+.nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-day, .nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-info-curr {
   color: var(--nutui-color-text-dark);
 }
 .nut-calendar-day-disabled {
   color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled)) !important;
 }
+.nut-calendar-day-disabled.nut-calendar-day-disabled .nut-calendar-day-day, .nut-calendar-day-disabled.nut-calendar-day-disabled .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled));
+}
 .nut-calendar-day-disabled .nut-calendar-day-info-curr {
   display: none;
 }
@@ -152,10 +166,16 @@
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light, #ffe5e5));
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff6666));
 }
+.nut-calendar-day-choose.nut-calendar-day-choose .nut-calendar-day-day, .nut-calendar-day-choose.nut-calendar-day-choose .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff6666));
+}
 .nut-calendar-day-choose-disabled {
   background-color: var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, 0.09));
   color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled)) !important;
 }
+.nut-calendar-day-choose-disabled.nut-calendar-day-choose-disabled .nut-calendar-day-day, .nut-calendar-day-choose-disabled.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled));
+}
 .nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
   display: none;
 }
@@ -166,9 +186,9 @@
   background-color: #ffffff;
 }
 .nut-calendar-footer .calendar-confirm-btn {
-  height: 40px;
-  line-height: 40px;
-  margin: 6px 16px;
+  height: scale-px(40px);
+  line-height: scale-px(40px);
+  margin: scale-px(6px) scale-px(16px);
   text-align: center;
   border-radius: var(--nutui-radius-base);
   background: var(--nutui-color-primary, #ff6666);
@@ -177,7 +197,7 @@
 }
 
 .nut-calendar-popup .nut-popup-title-right {
-  top: 7px !important;
+  top: scale-px(7px) !important;
 }
 
 [dir=rtl] .nut-calendar-day,

package/dist/es/packages/calendarcard/calendarcard.js

@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useCallback, useEffect, useState, useRef } from "react";
+import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import classNames from "classnames";
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
 import { ComponentDefaults } from "../../utils/typings";
@@ -11,12 +11,13 @@ import { useConfig } from "../configprovider";
 import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'single',
-    firstDayOfWeek: 0
+    firstDayOfWeek: 0,
+    weekdays: []
 });
 var prefixCls = 'nut-calendarcard';
 export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, type = _$_object_spread.type, title = _$_object_spread.title, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
+    var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, type = _$_object_spread.type, title = _$_object_spread.title, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, weekdays = _$_object_spread.weekdays, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
     var onPageChangeRef = useRef(onPageChange);
     // 当前月份信息
     var _useState = _sliced_to_array(useState(function() {
@@ -367,15 +368,20 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             }
         }, /*#__PURE__*/ React.createElement(DoubleRight, null))));
     };
-    var _useState2 = _sliced_to_array(useState(function() {
-        var weekdays = locale.calendaritem.weekdays.map(function(day, index) {
+    var weekHeader = useMemo(function() {
+        var weekdaysList = weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays;
+        var weekdaysData = weekdaysList.map(function(day, index) {
             return {
                 name: day,
                 key: index
             };
         });
-        return _to_consumable_array(weekdays.slice(firstDayOfWeek, 7)).concat(_to_consumable_array(weekdays.slice(0, firstDayOfWeek)));
-    }), 1), weekHeader = _useState2[0];
+        return _to_consumable_array(weekdaysData.slice(firstDayOfWeek, 7)).concat(_to_consumable_array(weekdaysData.slice(0, firstDayOfWeek)));
+    }, [
+        weekdays,
+        firstDayOfWeek,
+        locale.calendaritem.weekdays
+    ]);
     var renderContent = function() {
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(prefixCls, "-content")

package/dist/es/packages/calendarcard/style/calendarcard.scss

@@ -1,6 +1,6 @@
 .nut-calendarcard {
   background: $color-background-overlay;
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: $calendar-base-font-size;
   color: $color-title;
@@ -11,25 +11,31 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: 16px;
-      line-height: 1;
+      margin: scale-px(16px);
 
       .left {
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .right {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
 
+  &-icon {
+    width: scale-px(18px);
+    height: scale-px(18px);
+    display: block;
+  }
+
   &-days {
     display: flex;
     flex-direction: row;
@@ -44,11 +50,18 @@
     flex-direction: column;
     position: relative;
     width: $calendar-day-width;
-    height: 48px;
+    height: scale-px(48px);
     cursor: pointer;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
     text-align: center;
 
+    // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
+    &-top,
+    &-inner,
+    &-bottom {
+      color: $color-title;
+    }
+
     &.header {
       cursor: auto;
     }
@@ -59,13 +72,19 @@
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 12px;
-      font-size: 12px;
-      line-height: 12px;
+      height: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: scale-px(12px);
     }
 
     &.weekend {
       color: $calendar-choose-color;
+
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     &.active {
@@ -132,12 +151,12 @@
     &-right {
       .left {
         margin-left: 0;
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
 
       .right {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .nut-icon-ArrowLeft,

package/dist/es/packages/calendarcard/style/style.css

@@ -1,12 +1,22 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
 .nut-calendarcard {
   background: var(--nutui-color-background-overlay, #ffffff);
-  border-radius: 12px;
+  border-radius: calc(12px * var(--nut-scale-f, 1));
   overflow: hidden;
-  font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-calendarcard-header {
@@ -15,19 +25,24 @@
   align-items: center;
   justify-content: space-between;
   font-weight: normal;
+  line-height: var(--nutui-line-height-l, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-calendarcard-header-left, .nut-calendarcard-header-right {
   display: flex;
   flex-direction: row;
   cursor: pointer;
-  margin: 16px;
-  line-height: 1;
+  margin: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left {
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right {
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
+}
+.nut-calendarcard-icon {
+  width: calc(18px * var(--nut-scale-f, 1));
+  height: calc(18px * var(--nut-scale-f, 1));
+  display: block;
 }
 .nut-calendarcard-days {
   display: flex;
@@ -42,11 +57,14 @@
   flex-direction: column;
   position: relative;
   width: var(--nutui-calendar-day-width, 14.28%);
-  height: 48px;
+  height: calc(48px * var(--nut-scale-f, 1));
   cursor: pointer;
-  margin-bottom: 4px;
+  margin-bottom: calc(4px * var(--nut-scale-f, 1));
   text-align: center;
 }
+.nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom {
+  color: var(--nutui-color-title, #1a1a1a);
+}
 .nut-calendarcard-day.header {
   cursor: auto;
 }
@@ -55,16 +73,21 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 12px;
-  font-size: 12px;
-  line-height: 12px;
+  height: calc(12px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: calc(12px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-day.weekend {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
 }
+.nut-calendarcard-day.weekend .nut-calendarcard-day-top,
+.nut-calendarcard-day.weekend .nut-calendarcard-day-inner,
+.nut-calendarcard-day.weekend .nut-calendarcard-day-bottom {
+  color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
+}
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.active .nut-calendarcard-day-top,
 .nut-calendarcard-day.active .nut-calendarcard-day-inner,
@@ -82,12 +105,12 @@
   color: #ffffff;
 }
 .nut-calendarcard-day.start {
-  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.end {
-  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.mid {
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
@@ -117,13 +140,13 @@
 .nut-rtl .nut-calendarcard-header-left .left,
 .nut-rtl .nut-calendarcard-header-right .left {
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-calendarcard-header-left .right, [dir=rtl] .nut-calendarcard-header-right .right,
 .nut-rtl .nut-calendarcard-header-left .right,
 .nut-rtl .nut-calendarcard-header-right .right {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowLeft,
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowRight,
@@ -145,11 +168,11 @@
 }
 [dir=rtl] .nut-calendarcard-day.start,
 .nut-rtl .nut-calendarcard-day.start {
-  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-calendarcard-day.end,
 .nut-rtl .nut-calendarcard-day.end {
-  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }

package/dist/es/packages/calendarcard/style-jmapp/calendarcard.scss

@@ -1,6 +1,6 @@
 .nut-calendarcard {
   background: $color-background-overlay;
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: $calendar-base-font-size;
   color: $color-title;
@@ -11,25 +11,31 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: 16px;
-      line-height: 1;
+      margin: scale-px(16px);
 
       .left {
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .right {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
 
+  &-icon {
+    width: scale-px(18px);
+    height: scale-px(18px);
+    display: block;
+  }
+
   &-days {
     display: flex;
     flex-direction: row;
@@ -44,11 +50,18 @@
     flex-direction: column;
     position: relative;
     width: $calendar-day-width;
-    height: 48px;
+    height: scale-px(48px);
     cursor: pointer;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
     text-align: center;
 
+    // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
+    &-top,
+    &-inner,
+    &-bottom {
+      color: $color-title;
+    }
+
     &.header {
       cursor: auto;
     }
@@ -59,13 +72,19 @@
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 12px;
-      font-size: 12px;
-      line-height: 12px;
+      height: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: scale-px(12px);
     }
 
     &.weekend {
       color: $calendar-choose-color;
+
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     &.active {
@@ -132,12 +151,12 @@
     &-right {
       .left {
         margin-left: 0;
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
 
       .right {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .nut-icon-ArrowLeft,

package/dist/es/packages/calendarcard/style-jmapp/style.css

@@ -4,7 +4,7 @@
 /* #endif */
 .nut-calendarcard {
   background: var(--nutui-color-surface-2);
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-text-large));
   color: var(--nutui-color-title);
@@ -15,19 +15,24 @@
   align-items: center;
   justify-content: space-between;
   font-weight: normal;
+  line-height: var(--nutui-line-height-l, var(--nutui-font-text-large));
 }
 .nut-calendarcard-header-left, .nut-calendarcard-header-right {
   display: flex;
   flex-direction: row;
   cursor: pointer;
-  margin: 16px;
-  line-height: 1;
+  margin: scale-px(16px);
 }
 .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left {
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }
 .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right {
-  margin-right: 8px;
+  margin-right: scale-px(8px);
+}
+.nut-calendarcard-icon {
+  width: scale-px(18px);
+  height: scale-px(18px);
+  display: block;
 }
 .nut-calendarcard-days {
   display: flex;
@@ -42,11 +47,14 @@
   flex-direction: column;
   position: relative;
   width: var(--nutui-calendar-day-width, 14.28%);
-  height: 48px;
+  height: scale-px(48px);
   cursor: pointer;
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
   text-align: center;
 }
+.nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom {
+  color: var(--nutui-color-title);
+}
 .nut-calendarcard-day.header {
   cursor: auto;
 }
@@ -55,13 +63,18 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 12px;
-  font-size: 12px;
-  line-height: 12px;
+  height: scale-px(12px);
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(12px);
 }
 .nut-calendarcard-day.weekend {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary));
 }
+.nut-calendarcard-day.weekend .nut-calendarcard-day-top,
+.nut-calendarcard-day.weekend .nut-calendarcard-day-inner,
+.nut-calendarcard-day.weekend .nut-calendarcard-day-bottom {
+  color: var(--nutui-calendar-choose-color, var(--nutui-color-primary));
+}
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary));
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
@@ -117,13 +130,13 @@
 .nut-rtl .nut-calendarcard-header-left .left,
 .nut-rtl .nut-calendarcard-header-right .left {
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: scale-px(8px);
 }
 [dir=rtl] .nut-calendarcard-header-left .right, [dir=rtl] .nut-calendarcard-header-right .right,
 .nut-rtl .nut-calendarcard-header-left .right,
 .nut-rtl .nut-calendarcard-header-right .right {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowLeft,
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowRight,