diff --git a/packages/components/calendar/__tests__/calendar.test.tsx b/packages/components/calendar/__tests__/calendar.test.tsx
index a0528a3dca..5353862d20 100644
--- a/packages/components/calendar/__tests__/calendar.test.tsx
+++ b/packages/components/calendar/__tests__/calendar.test.tsx
@@ -203,6 +203,27 @@ describe('Calendar.vue', () => {
     expect(cell?.classList.contains('is-selected')).toBeTruthy()
   })
 
+  it('range two years', async () => {
+    const wrapper = mount(() => (
+      <Calendar range={[new Date(2021, 11, 20), new Date(2022, 0, 10)]} />
+    ))
+    const titleEl = wrapper.find('.el-calendar__title')
+    expect(/2021.*December/.test(titleEl.element.innerHTML)).toBeTruthy()
+    const dateTables = wrapper.element.querySelectorAll(
+      '.el-calendar-table.is-range'
+    )
+    expect(dateTables.length).toBe(2)
+    const rows = wrapper.element.querySelectorAll('.el-calendar-table__row')
+    expect(rows.length).toBe(4)
+    const cell = rows[rows.length - 1].firstElementChild as HTMLElement
+    cell.click()
+
+    await nextTick()
+
+    expect(/2022.*January/.test(titleEl.element.innerHTML)).toBeTruthy()
+    expect(cell?.classList.contains('is-selected')).toBeTruthy()
+  })
+
   it('slots', async () => {
     const wrapper = mount(() => (
       <Calendar
diff --git a/packages/components/calendar/src/use-calendar.ts b/packages/components/calendar/src/use-calendar.ts
index a9bc3db5f1..4406df4ef8 100644
--- a/packages/components/calendar/src/use-calendar.ts
+++ b/packages/components/calendar/src/use-calendar.ts
@@ -133,7 +133,7 @@ export const useCalendar = (
       return [[firstDay, lastDay]]
     }
     // Two adjacent months
-    else if (firstMonth + 1 === lastMonth) {
+    else if ((firstMonth + 1) % 12 === lastMonth) {
       return adjacentMonth(firstDay, lastDay)
     }
     // Three consecutive months (compatible: 2021-01-30 to 2021-02-28)