Actualizar calendario.html
This commit is contained in:
@@ -52,6 +52,35 @@
|
|||||||
|
|
||||||
.fc-today-button { background-color: #0f172a !important; color: white !important; }
|
.fc-today-button { background-color: #0f172a !important; color: white !important; }
|
||||||
.fc-timegrid-col.fc-day-today { background-color: #f8fafc !important; }
|
.fc-timegrid-col.fc-day-today { background-color: #f8fafc !important; }
|
||||||
|
|
||||||
|
/* ESTILO PARA EL POPOVER (La ventanita gris pequeña al pulsar "+X más") */
|
||||||
|
.fc-popover {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 1rem !important;
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-popover-header {
|
||||||
|
background-color: #3b82f6 !important; /* Azul corporativo */
|
||||||
|
color: white !important;
|
||||||
|
font-weight: 900 !important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.75rem 1rem !important;
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-popover-body {
|
||||||
|
padding: 0.75rem !important;
|
||||||
|
background-color: #f8fafc !important; /* Fondo gris muy claro */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-popover-close-icon {
|
||||||
|
color: white !important;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.fc-popover-close-icon:hover { opacity: 1; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-50 text-gray-800 font-sans antialiased overflow-hidden text-left">
|
<body class="bg-gray-50 text-gray-800 font-sans antialiased overflow-hidden text-left">
|
||||||
@@ -258,7 +287,7 @@
|
|||||||
},
|
},
|
||||||
events: calendarEvents,
|
events: calendarEvents,
|
||||||
|
|
||||||
// Diseño HTML interno de cada cajita del calendario
|
// Diseño HTML interno de cada cajita del calendario (VERSIÓN COMPACTA)
|
||||||
eventContent: function(arg) {
|
eventContent: function(arg) {
|
||||||
const timeText = arg.timeText;
|
const timeText = arg.timeText;
|
||||||
const title = arg.event.title;
|
const title = arg.event.title;
|
||||||
@@ -266,12 +295,12 @@
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
html: `
|
html: `
|
||||||
<div class="flex flex-col h-full justify-start p-1.5 text-white overflow-hidden">
|
<div class="flex flex-col h-full justify-start p-1 text-white overflow-hidden font-sans">
|
||||||
<div class="flex justify-between items-start mb-1">
|
<div class="flex justify-between items-center mb-0.5">
|
||||||
<span class="text-[10px] font-black bg-white/20 px-1.5 rounded-md leading-tight">${timeText}</span>
|
<span class="text-[9px] font-black bg-black/10 px-1.5 py-0.5 rounded-md leading-none whitespace-nowrap">${timeText}</span>
|
||||||
|
<p class="text-[9px] font-bold opacity-90 truncate ml-1"><i data-lucide="user" class="w-2.5 h-2.5 inline mr-0.5"></i>${op}</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-xs font-black leading-tight tracking-tight mb-1 truncate">${title}</p>
|
<p class="text-[10px] font-black leading-tight tracking-tight truncate">${title}</p>
|
||||||
<p class="text-[9px] font-bold opacity-90 truncate"><i data-lucide="user" class="w-2.5 h-2.5 inline mr-0.5"></i>${op}</p>
|
|
||||||
</div>`
|
</div>`
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user