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

187

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
Login AND Signup
login and signup

Author:
Uwera Dorcas

7 months ago

779
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

3 weeks ago

323
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

9 months ago

1.2k
Stacked Checkboxes

Author:
kishan pc

1 year ago

3.1k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.9k
Features Component

Author:
KULDEEP

6 months ago

1k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

7 months ago

820
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

9 months ago

1.2k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.9k
Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Author:
Hamza Atig

3 weeks ago

68
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

11 months ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components