Страница 1 из 2
Новый интерфейс
Добавлено: 26 сен 2024, 15:25
Parazit00
Если кто-то захочет изменить стандартный вид Календаря на новый..
Создайте файл 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;
}
}
Чтобы новый вид заработал, необходимо добавить в Настройки раздел 'Пользовательский HTML' следующую строку:
<link rel="stylesheet" href="assets/css/calendar.css?v=1.0">. Укажите путь к месту, где вы сохранили стили.
Re: Новый интерфейс Календаря
Добавлено: 28 сен 2024, 09:33
nruslan2
а куда положить файл calendar.css?
папки assets нету же в руко. или ее надо создать?
PS искал описание на сайте fullcalendar этот метод про скин, но не нашел - можете ссылку дать? Каким образом календарь понимает что надо использовать этот css
Re: Новый интерфейс Календаря
Добавлено: 28 сен 2024, 11:32
Parazit00
nruslan2 писал(а): ↑28 сен 2024, 09:33
а куда положить файл calendar.css?
папки assets нету же в руко. или ее надо создать?
PS искал описание на сайте fullcalendar этот метод про скин, но не нашел - можете ссылку дать? Каким образом календарь понимает что надо использовать этот css
Создайте папку или укажите путь до файла calendar.css. Я принудительно использую свои стили через команду:
Код: Выделить всё
<link rel="stylesheet" href="assets/css/calendar.css?v=1.0">
Вы же можете сохранить в папку template - css
Код: Выделить всё
<link rel="stylesheet" href="template/css/calendar.css?v=1.0">
Re: Новый интерфейс Календаря
Добавлено: 28 сен 2024, 11:39
Parazit00
Также, если кто-то хочет изменить цвет иконок: "Удалить", "Редактировать", "Информация".
- Screenshot_35.png (1.55 КБ) 636 просмотров
Код: Выделить всё
/* Кнопка "Удалить" */
.fa-trash-o {
color: red; /* Измените на любой предпочитаемый цвет */
}
/* Стандартная кнопка с пользовательским фоном */
.btn.btn-default.btn-xs {
color: #6a5acd;
}
.btn.btn-default.btn-xs:hover {
background-color: #e5e5e5; /* Темнее при наведении */
border-color: #e5e5e5;
}
/* Иконка информации */
.fa-info {
color: blue; /* Измените на любой предпочитаемый цвет */
}
Re: Новый интерфейс Календаря
Добавлено: 28 сен 2024, 11:50
nruslan2
а как все таки календарь понимает что надо именно этот файл css использовать?
Re: Новый интерфейс Календаря
Добавлено: 28 сен 2024, 12:15
Parazit00
nruslan2 писал(а): ↑28 сен 2024, 11:50
а как все таки календарь понимает что надо именно этот файл css использовать?
Я принудительно заставляю браузер загрузить новую версию стиля. Например, можно создать файл style.css?v=1.0 и сохранять в него все новые стили. Браузер будет загружать эту версию в приоритетном порядке, так как он понимает, что версия style.css?v=1.0 отличается от стандартной style.css
Я считаю, что такой же приоритет нужно задать и для пользовательского CSS, чтобы стили всегда корректно работали. Раньше я долго мучился, пытаясь понять, почему на ПК стили работают, а на телефоне — нет. В итоге я нашёл такое решение. Да, это своего рода костыль, но он работает.
Re: Новый интерфейс Календаря
Добавлено: 28 сен 2024, 15:47
nruslan2
не вы не поняли)
как библиотека понимает что надо подгружать файл calendar.css
(где он расположен и его версионность вы как раз задаёте!)
а вот почему именно calendar.css
не нашел упоминание в библиотеке о том как настроить именно этот момент.
или все работает изза того что просто нигде более не упоминаний значейний для id и стилей календаря?(в таком случаи можно вообще вставить вышеуказаный код css в пользовательский css и прописывать в пользовательский html ничего ненадо)
для чего спрашиваю: поидеи можно было бы реализовать возможность выбора скина для календаря через меню!
Re: Новый интерфейс Календаря
Добавлено: 29 сен 2024, 11:36
Parazit00
nruslan2 писал(а): ↑28 сен 2024, 15:47
не вы не поняли)
как библиотека понимает что надо подгружать файл calendar.css
(где он расположен и его версионность вы как раз задаёте!)
а вот почему именно calendar.css
не нашел упоминание в библиотеке о том как настроить именно этот момент.
или все работает изза того что просто нигде более не упоминаний значейний для id и стилей календаря?(в таком случаи можно вообще вставить вышеуказаный код css в пользовательский css и прописывать в пользовательский html ничего ненадо)
для чего спрашиваю: поидеи можно было бы реализовать возможность выбора скина для календаря через меню!
Я назвал файл calendar.css, чтобы было понятно его назначение. Вы можете назвать его как угодно. Через JavaScript можно динамически подключать разные CSS файлы для смены скинов. У меня была задача сделать удобный вид на телефоне, так как стандартный вариант был кривым и неудобным. Также, стили через пользовательский CSS почему-то не работали на телефоне, поэтому я начал использовать файл с версией, чтобы браузер загружал обновлённый стиль календаря.
Re: Новый интерфейс Календаря
Добавлено: 16 окт 2024, 10:29
Parazit00
Мне не нравился внешний вид этапов на телефоне, и я долго искал, как его улучшить.
Было так:
- Screenshot_28.png (4.98 КБ) 205 просмотров
Стало вот так:
- Screenshot_27.png (9.6 КБ) 205 просмотров
Код: Выделить всё
@media only screen and (max-width: 768px) {
.prolet-body-actions.form-group-217 {
padding: 10px;
background-color: #f5f5f5; /* Можно изменить фон */
}
.stages-panel-217.cd-multi-steps {
display: block; /* Сделаем элементы вертикальными */
width: 100%;
}
.stages-panel-217.cd-multi-steps li {
display: block;
width: 100%;
margin-bottom: 10px;
text-align: left; /* Выравнивание по левому краю */
}
.stages-panel-217.cd-multi-steps li a {
font-size: 16px; /* Можно увеличить текст для удобства */
padding: 10px;
display: block;
background-color: #fff; /* Изменение фона элемента */
border: 1px solid #ddd; /* Добавим границу */
border-radius: 5px; /* Немного скруглим углы */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень */
}
.stages-panel-217.cd-multi-steps li.visited a {
color: #28a745; /* Цвет для завершенных этапов */
}
.stages-panel-217.cd-multi-steps li.current a {
color: #007bff; /* Цвет для текущего этапа */
}
/* Уменьшим иконки Font Awesome */
.stages-panel-217.cd-multi-steps li a i {
font-size: 18px;
margin-right: 10px;
}
/* Скрываем стрелочку */
.stages-panel-217.cd-multi-steps li::after {
display: none;
}
}
Re: Новый интерфейс Календаря
Добавлено: 16 окт 2024, 12:04
Fait
Parazit00 писал(а): ↑16 окт 2024, 10:29
Мне не нравился внешний вид этапов на телефоне, и я долго искал, как его улучшить.
Было так:
Screenshot_28.png
Стало вот так:
Screenshot_27.png
Код: Выделить всё
@media only screen and (max-width: 768px) {
.prolet-body-actions.form-group-217 {
padding: 10px;
background-color: #f5f5f5; /* Можно изменить фон */
}
.stages-panel-217.cd-multi-steps {
display: block; /* Сделаем элементы вертикальными */
width: 100%;
}
.stages-panel-217.cd-multi-steps li {
display: block;
width: 100%;
margin-bottom: 10px;
text-align: left; /* Выравнивание по левому краю */
}
.stages-panel-217.cd-multi-steps li a {
font-size: 16px; /* Можно увеличить текст для удобства */
padding: 10px;
display: block;
background-color: #fff; /* Изменение фона элемента */
border: 1px solid #ddd; /* Добавим границу */
border-radius: 5px; /* Немного скруглим углы */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень */
}
.stages-panel-217.cd-multi-steps li.visited a {
color: #28a745; /* Цвет для завершенных этапов */
}
.stages-panel-217.cd-multi-steps li.current a {
color: #007bff; /* Цвет для текущего этапа */
}
/* Уменьшим иконки Font Awesome */
.stages-panel-217.cd-multi-steps li a i {
font-size: 18px;
margin-right: 10px;
}
/* Скрываем стрелочку */
.stages-panel-217.cd-multi-steps li::after {
display: none;
}
}
Получилось довольно красиво!