diff --git a/packages/core/src/useCalendar/useCalendar.ts b/packages/core/src/useCalendar/useCalendar.ts
index e0ba1fa0..a82e8936 100644
--- a/packages/core/src/useCalendar/useCalendar.ts
+++ b/packages/core/src/useCalendar/useCalendar.ts
@@ -115,10 +115,11 @@ export interface CalendarProps {
 
 export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'>) {
   const props = normalizeProps(_props, ['field', 'schema']);
-  const { weekInfo, locale, calendar, timeZone } = useLocale(props.locale, {
+  const { weekInfo, locale, calendar, timeZone, direction } = useLocale(props.locale, {
     calendar: () => toValue(props.calendar),
     timeZone: () => toValue(props.timeZone),
   });
+
   const pickerContext = inject(PickerContextKey, null);
   const calendarId = useUniqId(FieldTypePrefixes.Calendar);
   const gridId = `${calendarId}-g`;
@@ -260,6 +261,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'
         id: calendarId,
         ...pickerHandlers,
         role: 'application',
+        dir: direction.value,
       },
       calendarEl,
     );
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index a7cc36fc..e6ffee22 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import DateField from '@/components/DateField.vue';
 import Calendar from './components/Calendar.vue';
-// import { createCalendar } from '@internationalized/date';
+import { createCalendar } from '@internationalized/date';
 
 const minDate = new Date(2025, 1, 14, 0, 0, 0, 0);
 const maxDate = new Date(2025, 1, 18, 0, 0, 0, 0);
+
+const islamic = createCalendar('islamic-umalqura');
 </script>
 
 <template>
@@ -23,6 +25,6 @@ const maxDate = new Date(2025, 1, 18, 0, 0, 0, 0);
       }"
     /> -->
 
-    <Calendar label="Pick a date" :model-value="new Date('2025-09-16')" />
+    <Calendar label="Pick a date" locale="ar-EG" :calendar="islamic" />
   </div>
 </template>