omerlinks Calendrier Glassmorphism

This tailwind example is contributed by Omer fils ELENGA, on 08-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline Other

Author Omer fils ELENGA

Tailwind v3.4 831 4

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>omerlinks Calendrier Glassmorphism</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #0f172a; /* Fond sombre par défaut */
            overflow: hidden; /* Pour les animations d'arrière-plan */
        }

/* --- ANIMATION DES BLOBS D'ARRIÈRE-PLAN --- */
        .blob {
            position: absolute;
            filter: blur(80px);
            z-index: 0;
            opacity: 0.8;
            animation: move 10s infinite alternate;
        }

.blob-1 {
            top: 10%;
            left: 10%;
            width: 300px;
            height: 300px;
            background: #8b5cf6; /* Violet */
            animation-duration: 12s;
        }

.blob-2 {
            bottom: 20%;
            right: 10%;
            width: 350px;
            height: 350px;
            background: #ec4899; /* Rose */
            animation-duration: 15s;
        }

.blob-3 {
            top: 40%;
            left: 40%;
            width: 250px;
            height: 250px;
            background: #06b6d4; /* Cyan */
            animation-duration: 9s;
        }

@keyframes move {
            from { transform: translate(0, 0) scale(1); }
            to { transform: translate(20px, -20px) scale(1.1); }
        }

/* --- EFFET DE SURVOL DES JOURS --- */
        .calendar-day:hover:not(.empty):not(.selected) {
            background-color: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
            cursor: pointer;
        }

/* Transition fluide pour tout */
        .calendar-day {
            transition: all 0.2s ease;
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen p-4">
 <h1 class="text-3xl text-white font-semibold tracking-wide">omerlinks Calendrier </h1>
  
        <div class="  pt-6     text-center">
            <p class="text-xs text-gray-400 mb-1 uppercase tracking-widest">Date Sélectionnée</p>
            <p id="selectedDateDisplay" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-purple-300">
                Aucune
            </p><br>
         
   
        </div>

<div class="blob blob-1 rounded-full"></div>
    <div class="blob blob-2 rounded-full"></div>
    <div class="blob blob-3 rounded-full"></div>

<div class="relative z-10 w-full max-w-sm bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl rounded-3xl p-6 text-white">
        
        
        <div class="flex justify-between items-center mb-6">
            <button id="prevMonth" class="p-2 rounded-full hover:bg-white/20 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </button>
            
            <div class="text-center">
                <h2 id="monthYear" class="text-xl font-semibold tracking-wide"></h2>
            </div>

<div class="grid grid-cols-7 gap-2 mb-2 text-center text-xs font-medium text-gray-300 uppercase tracking-wider">
            <div>Dim</div>
            <div>Lun</div>
            <div>Mar</div>
            <div>Mer</div>
            <div>Jeu</div>
            <div>Ven</div>
            <div>Sam</div>
        </div>

<div id="daysContainer" class="grid grid-cols-7 gap-2">
            
        </div>

<button class="w-full mt-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-semibold shadow-lg shadow-purple-500/30 transition-all transform active:scale-95">
            Confirmer
        </button>

</div>

<script>
        const daysContainer = document.getElementById('daysContainer');
        const monthYearElement = document.getElementById('monthYear');
        const prevButton = document.getElementById('prevMonth');
        const nextButton = document.getElementById('nextMonth');
        const selectedDateDisplay = document.getElementById('selectedDateDisplay');

let currentDate = new Date();
        let selectedDate = null;

const months = [
            "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
            "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
        ];

function renderCalendar(date) {
            // 1. Définir l'année et le mois actuel
            const year = date.getFullYear();
            const month = date.getMonth();

// 2. Mettre à jour le titre
            monthYearElement.textContent = `${months[month]} ${year}`;

// 3. Calculer le premier jour du mois (0-6)
            const firstDayIndex = new Date(year, month, 1).getDay();
            
            // 4. Calculer le dernier jour du mois (28-31)
            const lastDay = new Date(year, month + 1, 0).getDate();
            
            // 5. Calculer le dernier jour du mois précédent
            const prevLastDay = new Date(year, month, 0).getDate();

// 6. Calculer le nombre de jours à afficher pour le mois suivant pour remplir la grille
            const lastDayIndex = new Date(year, month + 1, 0).getDay();
            const nextDays = 7 - lastDayIndex - 1;

let days = "";

// Jours du mois précédent (grisés)
            for (let x = firstDayIndex; x > 0; x--) {
                days += `<div class="calendar-day empty text-gray-600 py-2 text-center text-sm">${prevLastDay - x + 1}</div>`;
            }

// Jours du mois actuel
            for (let i = 1; i <= lastDay; i++) {
                // Vérifier si c'est aujourd'hui
                const today = new Date();
                const isToday = i === today.getDate() && month === today.getMonth() && year === today.getFullYear();
                
                // Vérifier si c'est la date sélectionnée
                const isSelected = selectedDate && 
                                   i === selectedDate.getDate() && 
                                   month === selectedDate.getMonth() && 
                                   year === selectedDate.getFullYear();

days += `<div class="${classes}" onclick="selectDate(${i}, ${month}, ${year})">${i}</div>`;
            }

// Jours du mois suivant (grisés)
            for (let j = 1; j <= nextDays; j++) {
                days += `<div class="calendar-day empty text-gray-600 py-2 text-center text-sm">${j}</div>`;
            }

daysContainer.innerHTML = days;
        }

function selectDate(day, month, year) {
            selectedDate = new Date(year, month, day);
            renderCalendar(currentDate); // Re-rendu pour mettre à jour le style de sélection
            updateSelectedDisplay();
        }

// --- Navigation ---
        prevButton.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar(currentDate);
        });

nextButton.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar(currentDate);
        });

// Initialisation
        renderCalendar(currentDate);

// Animation d'entrée
        document.querySelector('.relative.z-10').classList.add('opacity-0', 'translate-y-10');
        setTimeout(() => {
            document.querySelector('.relative.z-10').classList.remove('opacity-0', 'translate-y-10');
            document.querySelector('.relative.z-10').classList.add('transition-all', 'duration-700', 'ease-out');
        }, 100);

</script>
</body>
</html>

Related Examples

Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Komal Jain

2 years ago

12.8k
Car booking form
Rental carr booking form to rent a car online

ehmasuk

10 months ago

865
blog component
good blog

Uwera Dorcas

1 year ago

1.4k
Order History
Order History

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3k
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
Team Members

Abdul Baset Bappy

1 year ago

1.2k
Responsive fullscreen youtube video

Anonymous

3 years ago

9.5k
Aurora Spinner
Aurora Spinner using tailwindcss

Deepak Kumar Chouhan

1 year ago

1.7k
chatbot
is my chatbot

Omer fils ELENGA

10 months ago

1.3k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

2.7k