LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved locale/rtl handling. Whole calendar now flips RTL

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-26 10:05:25 -06:00
parent 4c967e4401
commit 3ef8368130
5 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -1,12 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en"> <script type="module" src="/src/main.js"></script>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Calendar</title> <title>Calendar</title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
</head> <div id="app"></div>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

3
src/App.vue
View File

@ -3,6 +3,7 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
import CalendarView from './components/CalendarView.vue' import CalendarView from './components/CalendarView.vue'
import EventDialog from './components/EventDialog.vue' import EventDialog from './components/EventDialog.vue'
import { useCalendarStore } from './stores/CalendarStore' import { useCalendarStore } from './stores/CalendarStore'
import { lang } from './utils/locale'
const eventDialog = ref(null) const eventDialog = ref(null)
const calendarStore = useCalendarStore() const calendarStore = useCalendarStore()
@ -35,6 +36,8 @@ function handleGlobalKey(e) {
onMounted(() => { onMounted(() => {
calendarStore.initializeHolidaysFromConfig() calendarStore.initializeHolidaysFromConfig()
document.addEventListener('keydown', handleGlobalKey, { passive: false }) document.addEventListener('keydown', handleGlobalKey, { passive: false })
// Set document language via shared util
if (lang) document.documentElement.setAttribute('lang', lang)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {

3
src/components/CalendarView.vue
View File

@ -13,6 +13,7 @@ import { daysInclusive, addDaysStr, MIN_YEAR, MAX_YEAR } from '@/utils/date'
import { toLocalString, fromLocalString, DEFAULT_TZ } from '@/utils/date' import { toLocalString, fromLocalString, DEFAULT_TZ } from '@/utils/date'
import { addDays, differenceInWeeks } from 'date-fns' import { addDays, differenceInWeeks } from 'date-fns'
import { createVirtualWeekManager } from '@/plugins/virtualWeeks' import { createVirtualWeekManager } from '@/plugins/virtualWeeks'
import { rtl } from '@/utils/locale'
const calendarStore = useCalendarStore() const calendarStore = useCalendarStore()
const emit = defineEmits(['create-event', 'edit-event']) const emit = defineEmits(['create-event', 'edit-event'])
@ -433,7 +434,7 @@ window.addEventListener('resize', () => {
</script> </script>
<template> <template>
<div class="calendar-view-root"> <div class="calendar-view-root" :dir="rtl && 'rtl'">
<div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div> <div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div>
<div class="wrap"> <div class="wrap">
<HeaderControls @go-to-today="goToToday" /> <HeaderControls @go-to-today="goToToday" />

1
src/components/EventOverlay.vue
View File

@ -4,6 +4,7 @@
v-for="span in eventSpans" v-for="span in eventSpans"
:key="span.id" :key="span.id"
class="event-span" class="event-span"
dir="auto"
:class="[`event-color-${span.colorId}`]" :class="[`event-color-${span.colorId}`]"
:data-id="span.id" :data-id="span.id"
:data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0" :data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0"

4
src/utils/locale.js Normal file
View File

@ -0,0 +1,4 @@
export const lang = navigator.language
const rtlLangs = new Set(['ar', 'fa', 'he', 'iw', 'ur', 'ps', 'sd', 'ug', 'dv', 'ku', 'yi'])
const primary = lang.toLowerCase().split(/[-_]/)[0]
export const rtl = rtlLangs.has(primary)