Thiết kế website giá rẻ

Question

I am using jsCalendar and Bootstrap, and I’m trying to display only 3 of the 12 months in a single row, horizontally. However, when I use the .col class, my elements are displayed vertically. Previously, I was working with Tailwind and the .grid class, and everything worked perfectly. What is causing this issue ?

Here is my full code :

@extends('layouts.user_type.auth')

@section('content')
<div class="row mt-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-6">
                        <a href="{{route('parametres')}}"><button class="btn btn-primary khand-regular">Retour</button></a>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-lg-4">
                        <div id="jan" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="feb" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="mar" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="apr" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="may" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="jun" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="jul" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="aug" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="sep" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="oct" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="nov" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                        <div id="dec" data-language="fr" data-navigator="false" data-month-format="month YYYY" data-first-day-of-the-week="2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('dashboard')
<script>
    $(document).ready(function () {

        // Tableau des mois
        var months = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];

        var year = "2024";

        // Parcourir chaque mois
        months.forEach(function(month, index) {
            // Initialiser le calendrier pour le mois actuel
            var calendarElement = document.getElementById(month);
            jsCalendar.new(calendarElement, "01/" + (index + 1 < 10 ? "0" + (index + 1) : index + 1) + "/" + year);

            if(({{date("m")}} != index + 1) && ({{date("m") - 1}} != index + 1) && ({{date("m") + 1}} != index + 1)){
                $('#' + month).attr('hidden', 'true');
            }

            // Obtenir la date actuelle
            var currentDate = new Date(year, index, 1);
            var previousMonthVisited = false;

            var previous = 0;
            var year2 = year;

            $('#' + month).find('td').each(function () {
                if ($(this).hasClass('jsCalendar-previous')) {
                    previous = previous + 1;
                }
            })

            // Parcourir chaque élément td dans le calendrier
            $('#' + month).find('td').each(function () {

                if (!$(this).hasClass('jsCalendar-next') && !$(this).hasClass('jsCalendar-previous')) {
                    // Créer la date au format dd/mm/YYYY
                    var date = $(this).text() + "/" + (index + 1) + "/" + year2;

                    // Ajouter la date à l'attribut data-date de l'élément td
                    $(this).attr('data-date', date).addClass('bg-gray-400').removeClass('jsCalendar-current');

                    var parts = date.split('/'); // Séparer la chaîne de caractères en parties
                    var day = parts[0]; // Jour
                    var month = parts[1]; // Mois
                    var year = parts[2]; // Année

                    // Tableau des noms de mois
                    var monthNames = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];

                    // Formater la date pour afficher le mois en entier
                    var formattedDate = day + " " + monthNames[month - 1] + " " + year; // Soustrayez 1 du mois car les mois commencent à partir de 0 (janvier est 0)
                    $(this).attr('data-bs-toggle', 'tooltip').attr('data-bs-placement', 'top').attr('title', formattedDate);

                    // Passer au jour suivant
                } else if ($(this).hasClass('jsCalendar-next')) {
                    // Créer la date au format dd/mm/YYYY
                    if(currentDate.getMonth() + 1 < 11){
                        var date = $(this).text() + "/" + (currentDate.getMonth() + 1 < 10 ? "0" + (index + 2) : index + 2) + "/" + currentDate.getFullYear();
                    } else {
                        var date = $(this).text() + "/" + (currentDate.getMonth() + 1 < 10 ? "0" + (1) : 1) + "/" + (currentDate.getFullYear() + 1);
                    }

                    // Ajouter la date à l'attribut data-date de l'élément td
                    $(this).attr('data-date', date);

                    // Passer au jour suivant
                } else if ($(this).hasClass('jsCalendar-previous')) {
                    // Passer au mois précédent une seule fois, si ce n'est déjà fait
                    if (previousMonthVisited === false) {
                        currentDate.setMonth(currentDate.getMonth() - 1);
                        previousMonthVisited = true; // Mettre à jour le marqueur pour indiquer que le mois précédent a été visité
                    }

                    var lastDayOfPreviousMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), $(this).text());

                    // Créer la date au format dd/mm/YYYY
                    if(currentDate.getMonth() + 1 > 1){
                        var date = $(this).text() + "/" + (currentDate.getMonth() + 1 < 10 ? "0" + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1) + "/" + currentDate.getFullYear();
                    } else {
                        var date = $(this).text() + "/" + (currentDate.getMonth() + 1 < 10 ? "0" + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1) + "/" + (currentDate.getFullYear() - 1);
                    }

                    // Ajouter la date à l'attribut data-date de l'élément td
                    $(this).attr('data-date', date);

                    previous = previous - 1;
                }
            });
        });
    });
</script>
@endpush

I can display them horizontally using .d-flex and .flex-wrap. However, by doing this, I lose the restriction of 3 elements per row. I don’t want to switch back to Tailwind.

Thiết kế website giá rẻ

Danh mục

How to display horizontally calendars with jsCalendar and Bootstrap?