diff --git a/examples/sites/demos/apis/calendar-view.js b/examples/sites/demos/apis/calendar-view.js index 92be41da0e..fe5950b5ea 100644 --- a/examples/sites/demos/apis/calendar-view.js +++ b/examples/sites/demos/apis/calendar-view.js @@ -171,6 +171,20 @@ export default { mode: ['pc', 'mobile-first'], pcDemo: 'basic-usage', mfDemo: 'basic-usage' + }, + { + name: 'show-back-today', + type: 'boolean', + defaultValue: 'true', + desc: { + 'zh-CN': '是否展示左上侧按钮显示,默认展示', + 'en-US': 'Should the upper left button be displayed, Default Display' + }, + meta: { + stable: '3.22.0' + }, + mode: ['mobile-first'], + mfDemo: 'calendar-mode' } ], events: [ diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue index 82716365f9..03018618ba 100644 --- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue +++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue @@ -1,5 +1,11 @@ diff --git a/examples/sites/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js b/examples/sites/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js index a0ab9010c0..d0fc4d780d 100644 --- a/examples/sites/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js +++ b/examples/sites/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js @@ -22,9 +22,9 @@ export default { }, desc: { 'zh-CN': - '

通过 mode 属性指定以年的形式显示,将展示当年的每个月份。可选值有 month / timeline / schedule

\n', + '

通过 mode 属性指定以年的形式显示,将展示当年的每个月份。可选值有 month / timeline / schedule。通过show-back-today 属性控制左侧按钮显示。

\n', 'en-US': - '

The mode attribute specifies that each month of the current year is displayed. The options are month / timeline / schedule.

\n' + '

The mode attribute specifies that each month of the current year is displayed. The options are month / timeline / schedule. Control the display of the left button through theshow back todayattribute.

\n' }, codeFiles: ['calendar-mode.vue'] }, diff --git a/packages/renderless/src/calendar-view/index.ts b/packages/renderless/src/calendar-view/index.ts index 0742be2eb3..7914ad0ec9 100644 --- a/packages/renderless/src/calendar-view/index.ts +++ b/packages/renderless/src/calendar-view/index.ts @@ -104,15 +104,31 @@ export const parseDate = (time) => { } else { date = new Date() } - - return { - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate(), - hours: date.getHours(), - minutes: date.getMinutes(), - seconds: date.getSeconds() + // 识别无时分秒的日期时间 + const timeParts = hasNoTime(time) + let timesPartsOne = {} + let timesPartsTwo = {} + if (!timeParts.hours) { + timesPartsOne = { + year: timeParts.year, + month: timeParts.month, + day: timeParts.day, + hours: 0, + minutes: 0, + seconds: 0 + } + } else { + timesPartsTwo = { + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + hours: date.getHours(), + minutes: date.getMinutes(), + seconds: date.getSeconds() + } } + const timePartsList = Object.assign(timesPartsOne, timesPartsTwo) + return timePartsList } export const computedCalendar = @@ -160,6 +176,36 @@ const getCalendarItem = function (item, props, isFunction, type, isNext, isLast) return res } +const hasNoTime = (date) => { + const datetimeStr = date + let hoursTime = 0 + let minutesTime = 0 + let secondsTime = 0 + const [datePart, timePart] = datetimeStr.split(' ') + const [year, month, day] = datePart && datePart.split('-') + if (timePart) { + const [hours, minutes, seconds] = timePart && timePart.split(':') + hoursTime = hours + minutesTime = minutes + secondsTime = seconds + } + // 提取时间 + return { + year: Number(year), + month: Number(month), + day: Number(day), + hours: hoursTime, + minutes: minutesTime, + seconds: secondsTime + } +} +// 时间转GMT8 +const timesToGMT8 = (date) => { + const originalDate = new Date(date) + const gmt8 = new Date(originalDate.getTime() + 15 * 60 * 60 * 1000) + return gmt8 +} + export const handleEvents = ({ props, state }) => () => { @@ -197,14 +243,23 @@ export const handleEvents = ([lastYear, +state.activeYear, nextYear].includes(endYear) && [lastMon, +state.activeMonth, nextMon].includes(endMonth)) ) { - item.start = getTime(item.start) - item.end = getTime(item.end) - item.startTime = makeUpZero(startHours) + ':' + makeUpZero(startMinutes) + ':' + makeUpZero(startSeconds) - item.endTime = makeUpZero(endHours) + ':' + makeUpZero(endMinutes) + ':' + makeUpZero(endSeconds) + const timeStartPart = hasNoTime(item.start) + const timeEndPart = hasNoTime(item.end) + + item.start = timeStartPart.hours ? getTime(item.start) : timesToGMT8(item.start) + item.end = timeEndPart.hours ? getTime(item.end) : timesToGMT8(item.end) + + item.startTime = timeStartPart.hours + ? makeUpZero(startHours) + ':' + makeUpZero(startMinutes) + ':' + makeUpZero(startSeconds) + : '' + item.endTime = timeEndPart.hours + ? makeUpZero(endHours) + ':' + makeUpZero(endMinutes) + ':' + makeUpZero(endSeconds) + : '' + item.startDay = startYear + '-' + startMonth + '-' + startDay item.endDay = endYear + '-' + endMonth + '-' + endDay - const startTimestamp = getTime(startYear + '-' + startMonth + '-' + startDay) - const endTimestamp = getTime(endYear + '-' + endMonth + '-' + endDay) + const startTimestamp = getTime(item.startDay) + const endTimestamp = getTime(item.endDay) const days = Math.abs(endTimestamp - startTimestamp) / dayMillisecond item.dayNumber = days >= 1 ? days + 1 : 1 diff --git a/packages/vue/src/calendar-view/src/index.ts b/packages/vue/src/calendar-view/src/index.ts index 802b10071f..5e8122f0b5 100644 --- a/packages/vue/src/calendar-view/src/index.ts +++ b/packages/vue/src/calendar-view/src/index.ts @@ -76,6 +76,10 @@ export const calendarViewProps = { multiSelect: { type: Boolean, default: false + }, + showBackToday: { + type: Boolean, + default: true } } diff --git a/packages/vue/src/calendar-view/src/mobile-first.vue b/packages/vue/src/calendar-view/src/mobile-first.vue index 2ea9e05e41..e5e8f654d3 100644 --- a/packages/vue/src/calendar-view/src/mobile-first.vue +++ b/packages/vue/src/calendar-view/src/mobile-first.vue @@ -20,10 +20,10 @@
- {{ t('ui.calendarView.backToday') }} + {{ t('ui.calendarView.backToday') }} -
{{ event.title }}
+
{{ event.title }}
{{ getEventShowTime('start', event, date.value) }} - {{ getEventShowTime('end', event, date.value) }}
@@ -376,7 +376,8 @@ export default defineComponent({ 'events', 'height', 'mark-color', - 'multi-select' + 'multi-select', + 'showBackToday' ], setup(props, context) { return setup({