diff --git a/src/packages/__VUE/calendar/__tests__/__snapshots__/calendar.spec.ts.snap b/src/packages/__VUE/calendar/__tests__/__snapshots__/calendar.spec.ts.snap
index 3f041bd1ad..1536a851c9 100644
--- a/src/packages/__VUE/calendar/__tests__/__snapshots__/calendar.spec.ts.snap
+++ b/src/packages/__VUE/calendar/__tests__/__snapshots__/calendar.spec.ts.snap
@@ -8,13 +8,13 @@ exports[`should render slot correctly 1`] = `
- 日
+ 日
一
二
三
四
五
- 六
+ 六
"
`;
@@ -25,7 +25,7 @@ exports[`should render slot correctly 2`] = `
2022年02月
-
+
customundefined
@@ -79,7 +79,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom5
@@ -88,7 +88,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom6
@@ -142,7 +142,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom12
@@ -151,7 +151,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom13
@@ -205,7 +205,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom19
@@ -214,7 +214,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom20
@@ -268,7 +268,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom26
@@ -277,7 +277,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom27
@@ -302,7 +302,7 @@ exports[`should render slot correctly 2`] = `
2022年03月
-
+
customundefined
@@ -356,7 +356,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom5
@@ -365,7 +365,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom6
@@ -419,7 +419,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom12
@@ -428,7 +428,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom13
@@ -482,7 +482,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom19
@@ -491,7 +491,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom20
@@ -545,7 +545,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom26
@@ -554,7 +554,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom27
@@ -606,7 +606,7 @@ exports[`should render slot correctly 2`] = `
2022年04月
-
+
customundefined
@@ -660,7 +660,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom2
@@ -669,7 +669,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom3
@@ -723,7 +723,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom9
@@ -732,7 +732,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom10
@@ -786,7 +786,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom16
@@ -795,7 +795,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom17
@@ -849,7 +849,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom23
@@ -858,7 +858,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom24
@@ -912,7 +912,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom30
@@ -928,7 +928,7 @@ exports[`should render slot correctly 2`] = `
2022年05月
-
+
custom1
@@ -982,7 +982,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom7
@@ -991,7 +991,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom8
@@ -1045,7 +1045,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom14
@@ -1054,7 +1054,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom15
@@ -1108,7 +1108,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom21
@@ -1117,7 +1117,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom22
@@ -1171,7 +1171,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom28
@@ -1180,7 +1180,7 @@ exports[`should render slot correctly 2`] = `
-
+
custom29
diff --git a/src/packages/__VUE/calendar/index.scss b/src/packages/__VUE/calendar/index.scss
index 2dcd01aa9b..294a2ae971 100644
--- a/src/packages/__VUE/calendar/index.scss
+++ b/src/packages/__VUE/calendar/index.scss
@@ -85,8 +85,7 @@
box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
.nut-calendar__weekday {
- &:first-of-type,
- &:last-of-type {
+ &.weekend {
color: $calendar-day67-font-color;
}
}
@@ -140,12 +139,6 @@
.nut-calendar__days {
overflow: hidden;
- .nut-calendar__days-item {
- .nut-calendar__day:nth-child(7n + 0),
- .nut-calendar__day:nth-child(7n + 1) {
- color: $calendar-day67-font-color;
- }
- }
.nut-calendar__day {
float: left;
width: 14.28%;
@@ -157,6 +150,10 @@
flex-direction: column;
position: relative;
+ &.weekend {
+ color: $calendar-day67-font-color;
+ }
+
.nut-calendar__day-tips {
position: absolute;
width: 100%;
diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
index ed69fd06b9..f5b302cf53 100644
--- a/src/packages/__VUE/calendaritem/index.taro.vue
+++ b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -14,7 +14,13 @@
- {{ item }}
+ {{ item.day }}
@@ -33,7 +39,7 @@
-
+
@@ -158,7 +164,10 @@ export default create({
setup(props, { emit, slots }) {
// 新增：自定义周起始日
- const weekdays = translate('weekdays');
+ const weekdays = (translate('weekdays') as any).map((day: string, index: number) => ({
+ day: day,
+ weekend: index === 0 || index === 6
+ }));
const weeks = ref([...weekdays.slice(props.firstDayOfWeek, 7), ...weekdays.slice(0, props.firstDayOfWeek)]);
// element refs
const scalePx = ref(2);
@@ -237,7 +246,14 @@ export default create({
};
// 获取样式
- const getClass = (day: Day, month: MonthInfo) => {
+ const getClass = (day: Day, month: MonthInfo, index?: number) => {
+ const res = [];
+ if (
+ typeof index === 'number' &&
+ ((index + 1 + props.firstDayOfWeek) % 7 === 0 || (index + props.firstDayOfWeek) % 7 === 0)
+ ) {
+ res.push('weekend');
+ }
const currDate = getCurrDate(day, month);
const { type } = props;
if (day.type == 'curr') {
@@ -246,12 +262,12 @@ export default create({
((type == 'range' || type == 'week') && (isStart(currDate) || isEnd(currDate))) ||
(type == 'multiple' && isMultiple(currDate))
) {
- return `${state.dayPrefix}--active`;
+ res.push(`${state.dayPrefix}--active`);
} else if (
(state.propStartDate && Utils.compareDate(currDate, state.propStartDate)) ||
(state.propEndDate && Utils.compareDate(state.propEndDate, currDate))
) {
- return `${state.dayPrefix}--disabled`;
+ res.push(`${state.dayPrefix}--disabled`);
} else if (
(type == 'range' || type == 'week') &&
Array.isArray(state.currDate) &&
@@ -259,13 +275,12 @@ export default create({
Utils.compareDate(state.currDate[0], currDate) &&
Utils.compareDate(currDate, state.currDate[1])
) {
- return `${state.dayPrefix}--choose`;
- } else {
- return null;
+ res.push(`${state.dayPrefix}--choose`);
}
} else {
- return `${state.dayPrefix}--disabled`;
+ res.push(`${state.dayPrefix}--disabled`);
}
+ return res;
};
// 确认选择时触发
const confirm = () => {
@@ -286,7 +301,7 @@ export default create({
// 选中数据
const chooseDay = (day: Day, month: MonthInfo, isFirst = false) => {
- if (getClass(day, month) != `${state.dayPrefix}--disabled`) {
+ if (!getClass(day, month).includes(`${state.dayPrefix}--disabled`)) {
const { type } = props;
let [y, m] = month.curData;
let days = [...month.curData];
@@ -709,7 +724,7 @@ export default create({
return (
(props.type == 'range' || props.type == 'week') &&
day.type == 'curr' &&
- getClass(day, month) == 'nut-calendar__day--active'
+ getClass(day, month).includes('nut-calendar__day--active')
);
};
diff --git a/src/packages/__VUE/calendaritem/index.vue b/src/packages/__VUE/calendaritem/index.vue
index acb37a62a9..ab3468b427 100644
--- a/src/packages/__VUE/calendaritem/index.vue
+++ b/src/packages/__VUE/calendaritem/index.vue
@@ -14,7 +14,13 @@
- {{ item }}
+ {{ item.day }}
@@ -26,7 +32,7 @@
-
+
@@ -149,7 +155,10 @@ export default create({
setup(props, { emit, slots }) {
// 新增：自定义周起始日
- const weekdays = translate('weekdays');
+ const weekdays = (translate('weekdays') as any).map((day: string, index: number) => ({
+ day: day,
+ weekend: index === 0 || index === 6
+ }));
const weeks = ref([...weekdays.slice(props.firstDayOfWeek, 7), ...weekdays.slice(0, props.firstDayOfWeek)]);
// element refs
const months = ref(null);
@@ -227,7 +236,14 @@ export default create({
};
// 获取样式
- const getClass = (day: Day, month: MonthInfo) => {
+ const getClass = (day: Day, month: MonthInfo, index?: number) => {
+ const res = [];
+ if (
+ typeof index === 'number' &&
+ ((index + 1 + props.firstDayOfWeek) % 7 === 0 || (index + props.firstDayOfWeek) % 7 === 0)
+ ) {
+ res.push('weekend');
+ }
const currDate = getCurrDate(day, month);
const { type } = props;
if (day.type == 'curr') {
@@ -236,12 +252,12 @@ export default create({
((type == 'range' || type == 'week') && (isStart(currDate) || isEnd(currDate))) ||
(type == 'multiple' && isMultiple(currDate))
) {
- return `${state.dayPrefix}--active`;
+ res.push(`${state.dayPrefix}--active`);
} else if (
(state.propStartDate && Utils.compareDate(currDate, state.propStartDate)) ||
(state.propEndDate && Utils.compareDate(state.propEndDate, currDate))
) {
- return `${state.dayPrefix}--disabled`;
+ res.push(`${state.dayPrefix}--disabled`);
} else if (
(type == 'range' || type == 'week') &&
Array.isArray(state.currDate) &&
@@ -249,13 +265,12 @@ export default create({
Utils.compareDate(state.currDate[0], currDate) &&
Utils.compareDate(currDate, state.currDate[1])
) {
- return `${state.dayPrefix}--choose`;
- } else {
- return null;
+ res.push(`${state.dayPrefix}--choose`);
}
} else {
- return `${state.dayPrefix}--disabled`;
+ res.push(`${state.dayPrefix}--disabled`);
}
+ return res;
};
// 确认选择时触发
const confirm = () => {
@@ -276,7 +291,7 @@ export default create({
// 选中数据
const chooseDay = (day: Day, month: MonthInfo, isFirst = false) => {
- if (getClass(day, month) != `${state.dayPrefix}--disabled`) {
+ if (!getClass(day, month).includes(`${state.dayPrefix}--disabled`)) {
const { type } = props;
let [y, m] = month.curData;
let days = [...month.curData];
@@ -704,7 +719,7 @@ export default create({
return (
(props.type == 'range' || props.type == 'week') &&
day.type == 'curr' &&
- getClass(day, month) == 'nut-calendar__day--active'
+ getClass(day, month).includes('nut-calendar__day--active')
);
};