Home
Omer fils ELENGA
omerlinks Calendrier Glassmorphism

omerlinks Calendrier Glassmorphism

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

Timeline Other

Author Omer fils ELENGA

160

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

Author:
Abhiraj

1 year ago

2.4k
Organization Hierarchy list

Author:
Anonymous

2 years ago

8.8k
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

575
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.6k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

469
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
M Junaid

6 months ago

469
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.9k
chart
to chart on your family and

Author:
Nishimwe Jeanine

7 months ago

546
Heading

Author:
KULDEEP

6 months ago

1k
button animation
button animation big

Author:
QQ-VVN

8 months ago

794
Tailwind Google Map widget

Author:
Dung Vuong

6 months ago

383
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components