Создайте файл calendar.css
Код: Выделить всё
/* Общие стили для календаря */
#calendar_public {
max-width: 100%;
margin: 0 auto;
padding: 20px;
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* Основные стили для элементов управления */
.fc-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px; /* Пространство между элементами */
background-color: #0288d1;
color: white;
padding: 15px;
border-radius: 12px;
}
/* Заголовок календаря (месяц/год) */
.fc-toolbar h2 {
font-size: 1.6rem;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
letter-spacing: 1px;
color: white;
}
/* Кнопки */
.fc-toolbar .fc-button-group button,
.fc-toolbar button {
padding: 10px 15px;
font-size: 14px;
font-weight: bold;
border-radius: 8px;
margin: 5px 0;
background: linear-gradient(135deg, #007bff, #03a9f4);
color: white;
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Эффекты при наведении на кнопки */
.fc-toolbar .fc-button-group button:hover,
.fc-toolbar button:hover {
background: linear-gradient(135deg, #01579b, #0288d1);
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Эффект при нажатии */
.fc-toolbar button:active {
transform: scale(0.98);
box-shadow: none;
}
/* Стрелки навигации */
.fc-prev-button, .fc-next-button {
padding: 8px;
font-size: 16px;
border-radius: 50%;
background: #0288d1;
color: white;
transition: background-color 0.3s ease;
}
.fc-prev-button:hover, .fc-next-button:hover {
background-color: #01579b;
}
/* Кнопка "Сегодня" */
.fc-today-button {
background-color: #ff9800;
border-radius: 8px;
padding: 10px 15px;
font-size: 14px;
color: white;
transition: background-color 0.3s ease;
}
.fc-today-button:hover {
background-color: #f57c00;
}
/* Для мобильных устройств */
@media (max-width: 768px) {
.fc-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.fc-toolbar h2 {
font-size: 1.4rem;
text-align: left;
}
.fc-button-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
.fc-button {
flex: 1 1 48%; /* Кнопки занимают половину ширины */
padding: 8px 12px;
font-size: 13px;
}
/* Кнопка "Сегодня" на всю ширину */
.fc-today-button {
flex: 1 1 100%;
text-align: center;
margin-bottom: 10px;
}
/* Уменьшение стрелок */
.fc-prev-button, .fc-next-button {
padding: 6px;
font-size: 14px;
}
}
/* Медиазапрос для экранов меньше 480px */
@media (max-width: 480px) {
.fc-toolbar h2 {
font-size: 1.2rem;
}
.fc-button {
flex: 1 1 100%; /* Каждая кнопка занимает всю ширину */
font-size: 12px;
}
.fc-prev-button, .fc-next-button {
font-size: 12px;
padding: 6px;
}
}<link rel="stylesheet" href="assets/css/calendar.css?v=1.0">. Укажите путь к месту, где вы сохранили стили.
