diff --git a/examples/sites/demos/apis/calendar-view.js b/examples/sites/demos/apis/calendar-view.js index 5a76aa28c..d257eca81 100644 --- a/examples/sites/demos/apis/calendar-view.js +++ b/examples/sites/demos/apis/calendar-view.js @@ -252,6 +252,19 @@ export default { pcDemo: 'multi-select', mfDemo: 'multi-select' }, + { + name: 'date-click', + desc: { + 'zh-CN': '日期点击事件，回调参数为当前点击日期和日程事件', + 'en-US': 'Date click event, The callback parameters are the current click date and schedule event' + }, + mode: ['pc', 'mobile-first'], + pcDemo: 'calendar-event', + mfDemo: 'calendar-event', + meta: { + stable: '3.23.0' + } + }, { name: 'week-change', desc: { diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue index e25a78f1a..6c520b9b5 100644 --- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue +++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue @@ -3,6 +3,7 @@ :events="eventslist" :year="2023" :month="5" + @date-click="dateClick" @prev-week-click="prevWeekClick" @next-week-click="nextWeekClick" @week-change="weekChange" @@ -25,6 +26,9 @@ export default { } }, methods: { + dateClick(date, events) { + TinyModal.message({ message: `点击日期： ${date}；日程事件：${JSON.stringify(events)}`, status: 'info' }) + }, prevWeekClick(date) { TinyModal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' }) }, diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue index 4db10a917..ab3d992e1 100644 --- a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue +++ b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue @@ -3,6 +3,7 @@ :events="eventslist" :year="2023" :month="5" + @date-click="dateClick" @prev-week-click="prevWeekClick" @next-week-click="nextWeekClick" @week-change="weekChange" @@ -19,6 +20,10 @@ import { TinyCalendarView, TinyModal } from '@opentiny/vue' const eventslist = ref([]) +const dateClick = (date, events) => { + TinyModal.message({ message: `点击日期： ${date}；日程事件：${JSON.stringify(events)}`, status: 'info' }) +} + const prevWeekClick = (date) => { TinyModal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' }) } diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts index 50e57d1d3..ba4f98357 100644 --- a/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts +++ b/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts @@ -11,6 +11,9 @@ test('事件', async ({ page }) => { const rightSvg = page.locator('.header-right > .tiny-svg') const mode = page.locator('label').nth(2) const modalVal = page.getByText('模式切换事件：schedule') + const date = page.getByText('30周一') + const dateVal = page.locator('div').filter({ hasText: '点击日期： 2022-5-30；日程事件：[]' }).nth(1) + await timeBtn.click() await page.waitForTimeout(100) await leftYear.click() @@ -27,4 +30,7 @@ test('事件', async ({ page }) => { await mode.click() await page.waitForTimeout(100) await expect(modalVal).toBeVisible() + await date.click() + await page.waitForTimeout(100) + await expect(dateVal).toBeVisible() }) diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event.vue index c2d6d34fe..7469716b3 100644 --- a/examples/sites/demos/pc/app/calendar-view/calendar-event.vue +++ b/examples/sites/demos/pc/app/calendar-view/calendar-event.vue @@ -3,6 +3,7 @@ :events="eventslist" :year="2023" :month="5" + @date-click="dateClick" @prev-week-click="prevWeekClick" @next-week-click="nextWeekClick" @week-change="weekChange" @@ -26,6 +27,9 @@ export default { } }, methods: { + dateClick(date, events) { + TinyModal.message({ message: `点击日期： ${date}；日程事件：${JSON.stringify(events)}`, status: 'info' }) + }, prevWeekClick(date) { TinyModal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' }) }, diff --git a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js index 40e08ca7a..d39957fac 100644 --- a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js +++ b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js @@ -167,6 +167,7 @@ export default { desc: { 'zh-CN': '

日历抛出的事件有以下这些：

\n' + + '

date-click：日期点击事件

\n' + '

new-schedule：新增日程按钮点击事件

\n' + '

selected-date-change：选中日期改变事件

\n' + '

prev-week-click：上一周按钮点击事件

\n' + @@ -177,6 +178,7 @@ export default { '

mode-change：模式切换事件

', 'en-US': '

Calendar throws the following events:

\n' + + '

date-click：日期点击事件: Date click event

\n' + '

new-schedule: Add a schedule button click event

\n' + '

selected-date-change: selected date change event

\n' + '

prev-week-click: button click event of the last week

\n' + @@ -371,11 +373,12 @@ export default { value: true }, description: - '日历抛出的事件包括：new-schedule、selected-date-change、prev-week-click、next-week-click、week-change、year-change、month-change、mode-change。', + '日历抛出的事件包括：date-click、new-schedule、selected-date-change、prev-week-click、next-week-click、week-change、year-change、month-change、mode-change。', cloud: { value: false }, apis: [ + 'date-click', 'new-schedule', 'selected-date-change', 'prev-week-click', diff --git a/packages/renderless/src/calendar-view/index.ts b/packages/renderless/src/calendar-view/index.ts index 874804616..02580d41a 100644 --- a/packages/renderless/src/calendar-view/index.ts +++ b/packages/renderless/src/calendar-view/index.ts @@ -307,8 +307,19 @@ function splitEvent(props, event) { return result } +export const computedSelectDay = ({ state }) => +(day) => { + if (!day || !day.value || day.disabled) return false + + if (state.multiSelect) { + return state.selectedDates.includes(day.value) + } else{ + return state.selectedDate === day.value + } +} + export const selectDay = - ({ state, emit }) => + ({ props, state, emit, api }) => (day, i) => { if (!day || !day.value || day.disabled) return @@ -323,9 +334,11 @@ export const selectDay = state.selectedDates.push(date) } + const dateEvent = dealEvents(props, api, state.selectedDates) + emit('update:modelValue', state.selectedDates) emit('selected-date-change', state.selectedDates) - emit('date-click', date) + emit('date-click', state.selectedDates, dateEvent) } else { if (day.isNext) { const { year, month } = nextMonth(state.activeYear, state.activeMonth) @@ -342,12 +355,26 @@ export const selectDay = state.selectedDate = day.value.toString().length > 2 ? day.value : `${state.activeYear}-${state.activeMonth}-${day.value}` state.showSelectedDateEvents = true + + const dateEvent = dealEvents(props, api, [state.selectedDate]) emit('update:modelValue', state.selectedDate) - emit('date-click', state.selectedDate) + emit('date-click', state.selectedDate, dateEvent[0]) } } +const dealEvents = (props, api, date) => { + return date.map(item => { + let event = api.getEventByTime(item, props._constants.DAY_START_TIME, props._constants.DAY_END_TIME) + event.forEach(e => { + delete e.dayArr; + delete e.dayNumber; + }); + return event + }) + +} + export const getEventByMonth = ({ state }) => (year, month) => { diff --git a/packages/renderless/src/calendar-view/vue.ts b/packages/renderless/src/calendar-view/vue.ts index 61996066d..2fea8735a 100644 --- a/packages/renderless/src/calendar-view/vue.ts +++ b/packages/renderless/src/calendar-view/vue.ts @@ -1,6 +1,7 @@ import { computedCalendar, handleEvents, + computedSelectDay, selectDay, getEventByTime, isToday, @@ -47,6 +48,7 @@ export const api = [ 'isToday', 'dateIsToday', 'getEventByTime', + 'computedSelectDay', 'selectDay', 'toToday', 'getPrevWeek', @@ -270,7 +272,8 @@ const initApi = ({ vm, api, state, t, props, emit, nextTick }) => { computeCascaderOptions: computeCascaderOptions(t), isToday: isToday(state), dateIsToday: dateIsToday(), - selectDay: selectDay({ state, emit }), + selectDay: selectDay({ props, state, emit, api }), + computedSelectDay: computedSelectDay({ state }), getEventByTime: getEventByTime({ props, state }), toToday: toToday({ state, api, nextTick }), getAllWednesdaysInYear: getAllWednesdaysInYear({ state }), diff --git a/packages/theme-saas/src/calendar-view/index.less b/packages/theme-saas/src/calendar-view/index.less index 3a5872f5b..5c3177195 100644 --- a/packages/theme-saas/src/calendar-view/index.less +++ b/packages/theme-saas/src/calendar-view/index.less @@ -62,6 +62,7 @@ >li{ @apply leading-10; + @apply cursor-pointer; >span{ @apply text-sm; @@ -351,6 +352,7 @@ >li{ @apply leading-10; + @apply cursor-pointer; .date{ @apply relative; @@ -358,7 +360,11 @@ @apply text-base; @apply text-color-text-primary; - &.is-today{ + &.is-today { + @apply text-color-brand; + } + + &.current { @apply text-color-brand; } } @@ -407,7 +413,11 @@ .week-day{ @apply text-sm; @apply text-color-text-placeholder; - &.is-today{ + &.is-today { + @apply text-color-brand; + } + + &.current { @apply text-color-brand; } } diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less index e9ceebf2e..5cd64b4f0 100644 --- a/packages/theme/src/base/reset.less +++ b/packages/theme/src/base/reset.less @@ -159,12 +159,12 @@ // x 和 y 滚动条交汇处 ::-webkit-scrollbar-corner { - background: var(--tv-color-bg-scrollbar-track); + background: transparent; } // 滚动条轨道 ::-webkit-scrollbar-track { - background: var(--tv-color-bg-scrollbar-track); + background: transparent; } // 滚动滑块 diff --git a/packages/theme/src/calendar-view/index.less b/packages/theme/src/calendar-view/index.less index 0607305ee..b5eadb7a6 100644 --- a/packages/theme/src/calendar-view/index.less +++ b/packages/theme/src/calendar-view/index.less @@ -360,6 +360,7 @@ > li { line-height: 40px; + cursor: pointer; .date { position: relative; @@ -370,6 +371,10 @@ &.is-today { color: var(--tv-CalendarView-week-date-today-text-color); } + + &.current { + color: var(--tv-CalendarView-week-date-today-text-color); + } } .mark { @@ -418,7 +423,11 @@ color: #8d959e; &.is-today { - color: #1890ff; + color: var(--tv-CalendarView-week-date-today-text-color); + } + + &.current { + color: var(--tv-CalendarView-week-date-today-text-color); } } } diff --git a/packages/theme/src/month-table/index.less b/packages/theme/src/month-table/index.less index 274214cdd..d7da847de 100644 --- a/packages/theme/src/month-table/index.less +++ b/packages/theme/src/month-table/index.less @@ -24,6 +24,7 @@ } .month-table() { + width: 100%; font-size: var(--tv-MonthTable-font-size); margin: -1px; border-collapse: collapse; diff --git a/packages/vue/src/calendar-view/__tests__/calendar-view.test.tsx b/packages/vue/src/calendar-view/__tests__/calendar-view.test.tsx new file mode 100644 index 000000000..b8a42ea29 --- /dev/null +++ b/packages/vue/src/calendar-view/__tests__/calendar-view.test.tsx @@ -0,0 +1,15 @@ +import { mountPcMode } from '@opentiny-internal/vue-test-utils' +import { describe, expect, test } from 'vitest' +import CalendarView from '@opentiny/vue-calendar-view' +import { nextTick } from 'vue' + +describe('PC Mode', () => { + const mount = mountPcMode + + test('value', async () => { + const wrapper = mount(() => ) + + await nextTick() + expect(wrapper.find('.tiny-calendar-view').exists()).toBe(true) + }) +}) diff --git a/packages/vue/src/calendar-view/src/mobile-first.vue b/packages/vue/src/calendar-view/src/mobile-first.vue index bf4ccac9b..fa2ec554e 100644 --- a/packages/vue/src/calendar-view/src/mobile-first.vue +++ b/packages/vue/src/calendar-view/src/mobile-first.vue @@ -159,7 +159,8 @@ data-tag="tiny-calendar-view-weekitem" v-for="(date, index) in state.weekDates" :key="date.value" - class="leading-10" + class="leading-10 cursor-pointer" + @click="selectDay(date)" > {{ date.value.split('-')[2] }} {{ dateIsToday(date.value) ? t('ui.datepicker.today') : t(`ui.calendarView.weekDays.${index}`) }} diff --git a/packages/vue/src/calendar-view/src/pc.vue b/packages/vue/src/calendar-view/src/pc.vue index 5df378cd7..ac85a1dc4 100644 --- a/packages/vue/src/calendar-view/src/pc.vue +++ b/packages/vue/src/calendar-view/src/pc.vue @@ -107,7 +107,7 @@