function calendarApp(eventsJson, initialDate, locale, labels) {
        labels = labels || {};
        return {
            events: eventsJson || [],
            selectedDate: initialDate || '',
            isModalOpen: false,
            modalDate: null,
            modalTrigger: null,

            selectDate(dateStr) {
                if (!dateStr) return;
                this.selectedDate = dateStr;
                
                // On desktop, open modal if there are events and window is wide enough
                if (window.innerWidth >= 768 && this.getEventsForDate(dateStr).length > 0) {
                    this.openDayModal(dateStr);
                }
            },

            formatFullDate(dateStr) {
                if (!dateStr) return '';
                // Prevents off-by-one errors from timezones by splitting the string
                const parts = dateStr.split('-');
                if (parts.length !== 3) return dateStr;
                const d = new Date(parts[0], parts[1] - 1, parts[2]);
                return d.toLocaleDateString(locale || document.documentElement.lang || undefined, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
            },

            getEventsForDate(dateStr) {
                return this.events.filter(e => e.date === dateStr);
            },

            eventCountLabel(dateStr) {
                const count = this.getEventsForDate(dateStr).length;
                const singular = String(labels.singular || 'Event');
                const plural = String(labels.plural || 'Events');
                return count + ' ' + (count === 1 ? singular : plural);
            },

            openDayModal(dateStr) {
                this.modalTrigger = document.activeElement;
                this.modalDate = dateStr;
                this.isModalOpen = true;
                this.$nextTick(() => {
                    if (this.$refs.modalClose) {
                        this.$refs.modalClose.focus();
                    }
                });
            },

            closeModal() {
                if (!this.isModalOpen) return;
                this.isModalOpen = false;
                this.$nextTick(() => {
                    if (this.modalTrigger && typeof this.modalTrigger.focus === 'function') {
                        this.modalTrigger.focus();
                    }
                });
            },

            trapModalFocus(event) {
                const dialog = this.$refs.modalDialog;
                if (!this.isModalOpen || !dialog) return;
                const focusable = Array.from(dialog.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
                if (!focusable.length) return;
                const first = focusable[0];
                const last = focusable[focusable.length - 1];
                if (event.shiftKey && document.activeElement === first) {
                    event.preventDefault();
                    last.focus();
                } else if (!event.shiftKey && document.activeElement === last) {
                    event.preventDefault();
                    first.focus();
                }
            },

            // Dynamic Styling based on Event Types
            getEventColorClass(type) {
                const map = {
                    'workshop': 'bg-purple-50 text-purple-700 border-purple-200',
                    'meeting':  'bg-blue-50 text-blue-700 border-blue-200',
                    'audit':    'bg-red-50 text-red-700 border-red-200',
                    'social':   'bg-orange-50 text-orange-700 border-orange-200',
                    'event':    'bg-green-50 text-green-700 border-green-200'
                };
                return map[type] || 'bg-gray-50 text-gray-700 border-gray-200';
            },
            
            getEventDotColor(type) {
                const map = {
                    'workshop': 'bg-purple-500', 'meeting': 'bg-blue-500',
                    'audit':    'bg-red-500',    'social':  'bg-orange-500', 'event': 'bg-green-500'
                };
                return map[type] || 'bg-gray-500';
            },
            
            getEventBorderColorClass(type) {
                 const map = {
                    'workshop': 'border-purple-500', 'meeting': 'border-blue-500',
                    'audit':    'border-red-500',    'social':  'border-orange-500', 'event': 'border-green-500'
                };
                return map[type] || 'border-gray-500';
            },

            getEventModalHoverClass(type) {
                const map = {
                    'workshop': 'border-gray-100 hover:border-purple-300',
                    'meeting':  'border-gray-100 hover:border-blue-300',
                    'audit':    'border-gray-100 hover:border-red-300',
                    'social':   'border-gray-100 hover:border-orange-300',
                    'event':    'border-gray-100 hover:border-green-300'
                };
                return map[type] || 'border-gray-100 hover:border-gray-300';
            }
        }
    }
