salix-front/src/components/ui/QCalendarMonthWrapper.vue

<script setup>
import { computed } from 'vue';
import { useQuasar } from 'quasar';
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';

const $props = defineProps({
    bordered: {
        type: Boolean,
        default: false,
    },
    transparentBackground: {
        type: Boolean,
        default: false,
    },
    viewCustomization: {
        type: String,
        default: '',
    },
});

const $q = useQuasar();

// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
const viewCustomizationClasses = {
    workerCalendar: 'worker-calendar-customizations',
};

const containerClasses = computed(() => {
    const classes = ['main-container-background'];
    if (viewCustomizationClasses[$props.viewCustomization])
        classes.push(viewCustomizationClasses[$props.viewCustomization]);
    if ($props.bordered) classes.push('--bordered');
    if ($props.transparentBackground) classes.push('transparent-background');
    else classes.push($q.dark.isActive ? '--dark' : '--light');
    return classes;
});
</script>

<template>
    <div :class="containerClasses">
        <div class="nav-container row"><slot name="header" /></div>
        <slot name="calendar" />
    </div>
</template>

<style lang="scss">
@import '../../css/quasar.variables.scss';

:root {
    // Cambia los colores del día actual del calendario por los de salix
    --calendar-border-current-dark: #84d0e2 2px solid;
    --calendar-border-current: #84d0e2 2px solid;
    --calendar-current-color-dark: #84d0e2;
    // Colores de fondo del calendario en dark mode
    --calendar-outside-background-dark: #222;
    --calendar-background-dark: #222;
}

// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
    background-color: $primary !important;
}

.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
    background-color: $primary !important;
}

.q-calendar-month__head--weekday {
    // Transforma los nombres de los días de la semana a mayúsculas
    text-transform: capitalize;
}

.transparent-background {
    --calendar-background-dark: transparent;
    --calendar-background: transparent;
    --calendar-outside-background-dark: transparent;
}

.q-calendar__button {
    &:hover {
        background-color: var(--vn-accent-color);
        cursor: pointer;
    }
}

.main-container-background {
    --calendar-current-background-dark: transparent;

    &.--dark {
        background-color: var(--calendar-background-dark);
    }

    &.--light {
        background-color: var(--calendar-background);
    }

    &.--bordered {
        border: 1px solid #222;
    }
}

.worker-calendar-customizations {
    .q-calendar__button {
        width: 32px;
        height: 32px;
        font-size: 13px;

        &:hover {
            background-color: var(--vn-label-color);
            cursor: pointer;
        }
    }
    .q-calendar-month__week--days > div:nth-child(6),
    .q-calendar-month__week--days > div:nth-child(7) {
        // Cambia el color de los días sábado y domingo
        color: #777777;
    }

    .q-calendar-month__week--wrapper {
        margin-bottom: 4px;
    }

    .q-calendar-month__workweek {
        height: 32px;
        display: flex;
        justify-content: center;
    }

    .q-calendar__button--bordered {
        color: $info !important;
    }

    .q-calendar-month__day--content {
        position: absolute;
        top: 1;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .q-outside .calendar-event {
        display: none;
    }

    .q-calendar-month__workweek,
    .q-calendar-month__head--workweek,
    .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
        text-transform: capitalize;
        color: $color-font-secondary;
        font-weight: bold;
        font-size: 0.8rem;
        text-align: center;
    }
}

.nav-container {
    display: flex;
    align-items: center;

    &.--bordered {
        border: 1px solid black;
    }
}
</style>