feat: add rtl calendar (#23394)

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -942,7 +942,7 @@ exports[`Calendar Calendar should support locale 1`] = `
 
 exports[`Calendar rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-picker-calendar ant-picker-calendar-full"
+  class="ant-picker-calendar ant-picker-calendar-full ant-picker-calendar-rtl"
 >
   <div
     class="ant-picker-calendar-header"

components/calendar/generateCalendar.tsx

@@ -98,7 +98,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       onPanelChange,
       onSelect,
     } = props;
-    const { getPrefixCls } = React.useContext(ConfigContext);
+    const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const calendarPrefixCls = `${prefixCls}-calendar`;
     const today = generateConfig.getNow();
@@ -239,6 +239,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
               className={classNames(calendarPrefixCls, className, {
                 [`${calendarPrefixCls}-full`]: fullscreen,
                 [`${calendarPrefixCls}-mini`]: !fullscreen,
+                [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
               })}
               style={style}
             >

components/calendar/style/index.less

@@ -14,7 +14,6 @@
     justify-content: flex-end;
     padding: @padding-sm 0;
 
-
     .@{calendar-prefix-cls}-year-select {
       min-width: 80px;
     }
@@ -190,3 +189,4 @@
   }
 }
 
+@import './rtl';

components/calendar/style/rtl.less

@@ -0,0 +1,44 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
+@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
+
+.@{calendar-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-header {
+    .@{calendar-prefix-cls}-month-select {
+      .@{calendar-prefix-cls}-rtl & {
+        margin-right: @padding-xs;
+        margin-left: 0;
+      }
+    }
+
+    .@{calendar-prefix-cls}-mode-switch {
+      .@{calendar-prefix-cls}-rtl & {
+        margin-right: @padding-xs;
+        margin-left: 0;
+      }
+    }
+  }
+
+  // ========================== Full ==========================
+  &-full {
+    .@{calendar-picker-prefix-cls}-panel {
+      .@{calendar-prefix-cls}-rtl& {
+        text-align: left;
+      }
+
+      .@{calendar-picker-prefix-cls}-body {
+        th {
+          .@{calendar-prefix-cls}-rtl& {
+            padding: 0 0 5px 12px;
+          }
+        }
+      }
+    }
+  }
+}