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

214

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.5k
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

7 months ago

482
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.6k
htmlcss2

Author:
Elsa Khan

7 months ago

240
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

8 months ago

847
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

2k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

10 months ago

969
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

786
Maintenance page

Author:
Faye

1 year ago

1.8k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

10 months ago

1.4k
ServerHub Interface

Author:
МОЙДОЫР

3 months ago

642

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components