feat(calendar): add viewmode (#2985)

Author: xiaoyatong

src/locales/base.ts

@@ -34,6 +34,10 @@ export interface BaseLang {
     start: string
     confirm: string
     title: string
+    week: string
+    month: string
+    year: string
+    quarter: string
     // eslint-disable-next-line @typescript-eslint/ban-types
     monthTitle: Function
     today: string

src/locales/en-US.ts

@@ -34,6 +34,10 @@ const enUS: BaseLang = {
     start: 'Start',
     confirm: 'Confirm',
     title: 'Calendar',
+    week: 'W',
+    month: 'M',
+    year: 'Y',
+    quarter: 'Q',
     monthTitle: (year: number, month: number) =>
       `${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
     today: 'Today',

src/locales/id-ID.ts

@@ -34,6 +34,10 @@ const idID: BaseLang = {
     start: 'Mulai',
     confirm: 'Mengonfirmasi',
     title: 'Kalender',
+    week: 'Mg',
+    month: 'Bl',
+    year: 'Th',
+    quarter: 'Kt',
     monthTitle: (year: number, month: number) =>
       `${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
     today: 'Hari ini',

src/locales/tr-TR.ts

@@ -42,6 +42,10 @@ const trTR: BaseLang = {
     start: 'Başlangıç',
     confirm: 'Onayla',
     title: 'Takvim seçimi',
+    week: 'H',
+    month: 'A',
+    year: 'Y',
+    quarter: 'Ç',
     monthTitle: (year: number, month: number) =>
       `${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
     today: 'Bugün',

src/locales/zh-CN.ts

@@ -36,6 +36,10 @@ const zhCN: BaseLang = {
     start: '开始',
     confirm: '确认',
     title: '日历选择',
+    week: '周',
+    month: '月',
+    year: '年',
+    quarter: '季度',
     monthTitle: (year: number, month: number) =>
       `${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
     today: '今天',

src/locales/zh-TW.ts

@@ -36,6 +36,10 @@ const zhCN: BaseLang = {
     start: '開始',
     confirm: '確認',
     title: '日歷選擇',
+    week: '周',
+    month: '月',
+    year: '年',
+    quarter: '季度',
     monthTitle: (year: number, month: number) =>
       `${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
     today: '今天',

src/locales/zh-UG.ts

@@ -34,6 +34,10 @@ const zhUG: BaseLang = {
     start: 'بېشى',
     confirm: 'جەزملەشتۈرۈڭ',
     title: 'تاللاڭ',
+    week: 'ھە',
+    month: 'ئا',
+    year: 'ي',
+    quarter: 'پە',
     monthTitle: (year: number, month: number) =>
       `${year} يىلى ${Number(month) < 10 ? `0${Number(month)}` : month} ئاي`,
     today: 'بۈگۈن',

src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snap

@@ -64,8 +64,10 @@ test('week prop', async () => {
       firstDayOfWeek={1}
     />
   )
-  const viewArea = container.querySelector('.viewArea') as HTMLElement
-  // expect(viewArea.innerHTML).toMatchSnapshot()
+  const viewArea = container.querySelector(
+    '.nut-calendar-pannel'
+  ) as HTMLElement
+  expect(viewArea.innerHTML).toMatchSnapshot()
 })
 
 test('range prop', async () => {
@@ -80,8 +82,76 @@ test('range prop', async () => {
       firstDayOfWeek={1}
     />
   )
-  const viewArea = container.querySelector('.viewArea') as HTMLElement
-  // expect(viewArea.innerHTML).toMatchSnapshot()
+  const viewArea = container.querySelector(
+    '.nut-calendar-pannel'
+  ) as HTMLElement
+  expect(viewArea.innerHTML).toMatchSnapshot()
+})
+
+test('viewmode prop', async () => {
+  const onItemClick = vi.fn()
+  const { container } = render(
+    <Calendar
+      viewMode="quarter"
+      defaultValue="2025-Q1"
+      startDate="2025-01-01"
+      endDate="2025-3-31"
+      onItemClick={onItemClick}
+    />
+  )
+  const viewArea = container.querySelector(
+    '.nut-calendar-viewmode-pannel'
+  ) as HTMLElement
+  expect(viewArea.innerHTML).toMatchSnapshot()
+})
+
+test('should render calendar in quarter view with extended date range', async () => {
+  const { container } = render(
+    <Calendar
+      viewMode="quarter"
+      defaultValue="2025-Q1"
+      startDate="2025-01-01"
+      endDate="2027-3-31"
+    />
+  )
+  const viewArea = container.querySelector(
+    '.nut-calendar-viewmode-pannel'
+  ) as HTMLElement
+  expect(viewArea.innerHTML).toMatchSnapshot()
+})
+
+test('should render calendar in month view with onItemClick', async () => {
+  const onItemClick = vi.fn()
+  const { container } = render(
+    <Calendar
+      viewMode="month"
+      defaultValue="2025-01"
+      startDate="2025-01-01"
+      endDate="2025-3-31"
+      onItemClick={onItemClick}
+    />
+  )
+  const viewArea = container.querySelector(
+    '.nut-calendar-viewmode-pannel'
+  ) as HTMLElement
+  expect(viewArea.innerHTML).toMatchSnapshot()
+})
+
+test('should render calendar in month view with extended date range', async () => {
+  const onItemClick = vi.fn()
+  const { container } = render(
+    <Calendar
+      viewMode="month"
+      defaultValue="2025-01"
+      startDate="2025-01-01"
+      endDate="2027-3-31"
+      onItemClick={onItemClick}
+    />
+  )
+  const viewArea = container.querySelector(
+    '.nut-calendar-viewmode-pannel'
+  ) as HTMLElement
+  expect(viewArea.innerHTML).toMatchSnapshot()
 })
 
 test('popup prop', async () => {
@@ -121,7 +191,9 @@ test('should render slot correctly', async () => {
   const topSlot = container.querySelector(
     '.nut-calendar-header-buttons'
   ) as HTMLElement
-  const viewArea = container.querySelector('.viewArea') as HTMLElement
+  const viewArea = container.querySelector(
+    '.nut-calendar-pannel'
+  ) as HTMLElement
   expect(topSlot.innerHTML).toContain('<div class="d_div"> 最近七天</div>')
   expect(viewArea.innerHTML).toMatchSnapshot()
 })
@@ -217,13 +289,13 @@ test('range select event when click item', () => {
   const start = container.querySelectorAll(
     '.nut-calendar-day-active .nut-calendar-day-day'
   )[0]
-  expect(start.innerHTML).toBe('13')
+  expect(start.innerHTML).toBe('10')
 
   const calendarMonthDay2 = container.querySelectorAll('.nut-calendar-day')[20]
   fireEvent.click(calendarMonthDay2)
   expect(onDayClick).toBeCalled()
   const next = container.querySelectorAll(
     '.nut-calendar-day-choose .nut-calendar-day-day'
   )[0]
-  expect(next.innerHTML).toBe('14')
+  expect(next.innerHTML).toBe('11')
 })

src/packages/calendar/__tests__/calendar.spec.tsx

@@ -1,4 +1,5 @@
 @import '../popup/popup.scss';
+@import './calendarviewmode.scss';
 
 .nut-calendar {
   position: relative;
@@ -62,6 +63,10 @@
     height: 36px;
     border-radius: 0px 0px 12px 12px;
     box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
+
+    &-shrink {
+      padding-left: 17%;
+    }
   }
 
   &-week-item {
@@ -111,6 +116,22 @@
     margin: 8px 0;
   }
 
+  &-weeknumber {
+    width: 35%;
+    &-index {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      position: relative;
+      height: $calendar-day-height;
+      font-weight: $font-weight;
+      font-size: $font-size-base;
+      margin-bottom: 4px;
+      color: $color-text-help;
+    }
+  }
+
   &-days {
     overflow: hidden;
   }
@@ -205,6 +226,10 @@
     }
   }
 
+  .shrink {
+    display: flex;
+  }
+
   // 底部导航
   &-footer {
     display: flex;