plaquetournante-dev / templates / mini_calendar.html

<div class="calendar-mini">
    <div class="field">
        <label class="label">{{ t("select-date") | default("Select Date") }}</label>
        <div class="control">
            <input 
                id="mini-calendar-picker" 
                type="date" 
                class="input" 
                style="display: none;">
        </div>
    </div>
</div>

<script>
function initializeMiniCalendar() {
    // Initialize the Bulma Calendar
    const calendarElement = document.getElementById('mini-calendar-picker');
    if (calendarElement && typeof bulmaCalendar !== 'undefined') {
        // Check if calendar is already initialized and destroy it
        if (calendarElement.bulmaCalendar) {
            calendarElement.bulmaCalendar.destroy();
        }
        
        // Map current locale to determine language for labels
        const currentLocale = '{{ current_locale | default("fr-ca") }}';
        const isFrench = currentLocale && currentLocale.startsWith('fr');
        
        // Get bookmarked event dates for highlighting
        const bookmarkedDates = window.bookmarkedEventDates || [];
        console.log('Bookmarked dates for calendar:', bookmarkedDates);
        
        // Simple initialization with minimal options
        const calendar = new bulmaCalendar(calendarElement, {
            type: 'date',
            displayMode: 'inline',
            // Add French labels when language is French
            cancelLabel: isFrench ? 'Annuler' : 'Cancel',
            clearLabel: isFrench ? 'Effacer' : 'Clear',
            todayLabel: isFrench ? "Aujourd'hui" : 'Today',
            nowLabel: isFrench ? 'Maintenant' : 'Now',
            validateLabel: isFrench ? 'Valider' : 'Validate',
            // Callback to highlight dates after calendar is ready
            onReady: function(instance) {
                console.log('Calendar ready, highlighting bookmarked dates...');
                highlightBookmarkedDates(bookmarkedDates, isFrench);
            }
        });
        
        // Add event listener for date selection
        if (calendar) {
            calendar.on('select', function(date) {
                console.log('Date selected:', date);
                // You can add custom logic here when a date is selected
                // For example, trigger an HTMX request to update events
                // htmx.trigger('#some-element', 'dateChanged', {detail: {date: date}});
            });
        }
    }
}

// Function to highlight bookmarked dates
function highlightBookmarkedDates(bookmarkedDates, isFrench) {
    if (!bookmarkedDates || bookmarkedDates.length === 0) return;
    
    bookmarkedDates.forEach(dateStr => {
        const targetDay = parseInt(dateStr.split('-')[2]).toString();
        console.log('Highlighting day:', targetDay, 'from date:', dateStr);
        
        // Find date items in current month
        const dateItems = document.querySelectorAll('.datepicker-date.is-current-month .date-item');
        
        dateItems.forEach((item) => {
            if (item.textContent.trim() === targetDay) {
                console.log('Found and highlighting day:', targetDay);
                item.classList.add('has-bookmark-event');
                item.style.backgroundColor = '#ff6b6b';
                item.style.color = 'white';
                item.style.fontWeight = 'bold';
                item.style.borderRadius = '50%';
                item.title = isFrench ? 'Événement marqué' : 'Bookmarked event';
            }
        });
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', initializeMiniCalendar);

// Reinitialize after HTMX updates
document.addEventListener('htmx:afterSettle', function(event) {
    // Check if the updated content contains our calendar
    if (event.target.id === 'mini-calendar' || event.target.querySelector('#mini-calendar-picker')) {
        initializeMiniCalendar();
    }
});
</script>