Как сделать расписание в html
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Как поставить готовое интерактивное расписание уроков на свой сайт?
Конечно можно нарисовать, или даже просто скачать из интернета картинки расписание уроков ( в нашем случае расписание уроков для начальной школы ), многие так и делают. Но некоторым, по настоящему творческим людям хочется сделать свой сайт не только информативным, хотя это наиболее важно, но и привлекательным в отношении визуального восприятия потенциального пользователя.
Один из приёмов повышения привлекательности является использование интерактивных изображений, достоинство которых состоит в способности по желанию (клику) пользователя изменять информативную и визуальную составляющую.
На самом деле здесь нет ни чего сложного, поскольку я дам вам комплект уже готового, работающего на этом сайте интерактивного расписания уроков . Вам лишь надо будет написать своё расписание, закачать всё на свой сайт и вставить свои ссылки.
Даже для начинающих web-мастеров установка готового расписания уроков, от распаковывания архива, до опробования работоспособности, займёт совсем немного времени.
1 - В самом низу этой страницы скачайте архив , в котором находятся все необходимые картинки, HTML код готовой таблицы и javascript плавного увеличения изображения с инструкцией по его установке и распакуйте его;
3 – Залейте на сайт (в корень сайта) все необходимые картинки из архива, а именно:
- Фоновая – RU . jpg ,
- Понедельник – RU _02. jpg ;
- Вторник – RU _04. jpg ;
- Среда – RU _06. jpg ;
- Четверг – RU _08. jpg ;
- Пятница – RU _10. jpg
И все day-1 . day-5 с вашим вариантом расписания.
Как залить файлы в корень сайта – Подсказка!
Теперь самое интересное!
Наполните таблицу картинками и подключите всю эту конструкцию к ява-скрипту. Не пугайтесь, надо просто, полученные из вашего файлового менеджера ссылки на скрипт и картинки, разместить в коде таблицы.
Как получить ссылки на ваши файлы из файлового менеджера – Подсказка!
Расставляйте ссылки в соответствии с этой схемой (смотреть)
6 – После окончания работы с таблицей скопируйте полученный HTML код (код таблицы уже с вашими ссылками) и вставьте его на страницу вашего сайта.
Как вставить HTML код на страницу сайта – подсказка!
Результаты работы (действующее интерактивное расписание уроков) ниже.
Ну вот, собственно и всё! Если возникнут вопросы, пишите в коментариях, буду стараться отвечать.
Если Вам необходимо установить расписание уроков на 6 учебных дней, пройдите на следующую страницу.
Используйте любой элемент, чтобы открыть фактический модальный, например или элемент и указать уникальный идентификатор.
Модальная часть
WITH class="modal" является элементом контейнера для модального и div с, class="modal-content" где вы кладете модальное содержимое (заголовки, абзацы, изображения и т.д.).
Элемент class="close" должен использоваться для закрытия модального.
Шаг 2) добавить CSS:
Пример
/* Month list */
.month ul margin: 0;
padding: 0;
>
.month ul li color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
>
/* Previous button inside month header */
.month .prev
padding-top: 10px;
>
/* Next button */
.month .next float: right;
padding-top: 10px;
>
Я заново оценил возможности CSS Grid, когда создавал адаптивный шаблон для расписания конференции. В результате появилось несколько интересных способов использования CSS Grid. К тому же я разобрался с некоторыми особенностями грида, с которыми сталкиваешься не каждый день.
Определяем требования к макету
Я решил создать этот макет благодаря WordCamp . В рамках проекта проводятся сотни конференций, посвященных WordPress. Конференции бывают разных масштабов и форматов, но все они используют один инструмент для создания расписания.
В результате получился этот макет.
Я знал недостатки существующего макета HTML-таблицы. Чтобы усовершенствовать его, я составил список требований к новому шаблону:
Сайты WordCamp позволяют задавать стили только с помощью CSS.
- Макет может быть сгенерирован автоматически из контента CMS
Приступаем к работе: надежный HTML
верхнего уровня будет иметь класс .schedule , а также он будет родительским элементом для Grid. У каждого времени начала конференции есть свой заголовок. За ним следует перечисление мероприятий (сессий), которые начинаются в это время.
Макет для мобильных устройств и резервный вариант сетки
Макет для мобильных устройств и резервный вариант для браузеров, которые не поддерживают CSS Grid, готовы.
Вот как выглядит мой макет в цвете:
Добавляем макет сетки
Переходим к практической части реализации CSS Grid. Одна строка grid – это 1% от высоты диаграммы. Поэтому столбец занимает столько же строк, сколько и процент, который он представляет.
Благодаря этому я понял, что grid идеально подходит для любого макета, предназначенного для отображения часто изменяющихся величин. Например, времени. В данном случае мы будем использовать приращение в 30 минут. Только избегайте ошибки в Chrome, которая ограничивает макеты сетки 1000 строк .
В первом варианте макета для размещения списка сессий я использовал такой же синтаксис, что и в гистограмме Робина. А также немного простой математики.
Мы используем восемь рядов, потому что есть восемь 30-минутных увеличений периодов между 8:00 и 12:00. Помните, что номера строк неявного грида начинаются с единицы (а не с 0). Поэтому строки нумеруются с 1 по 9.
Элементарная версия расписания с одним столбцом и пронумерованными строками сетки .
Но размещение элементов в сетке с большим количеством строк очень сложное и запутанное. Здесь на помощь приходят строки сетки с названиями ! Вместо того чтобы полагаться на номера строк сетки, можно дать каждой строке название в соответствии со временем суток.
Становится гораздо проще размещать сессии, если использовать строки сетки с названиями .
Также можно генерировать названия строк сетки и стилей макета с помощью информации, которая есть в WordPress. Установите в сетке время начала и окончания, и готово!
Поскольку в расписании указывается несколько тематик, то нужен столбец для каждого из них. Можно использовать номера тем в каждой строке столбца сетки. Также есть дополнительный первый столбец для заголовков с указанием времени начала сессий конференции.
Определив строки сетки, основанные на времени и темах, можно размещать любую нужную сессию, просто зная время и место!
Собрав все это вместе, мы получаем длинный, но вполне читабельный код:
Небольшое примечание: использование единиц измерения fr и автоматического значения высоты строк
Стоит отметить одну деталь – применение единиц измерения fr для определения высоты строк. При использовании значения 1fr все строки получают одинаковую высоту. Эта высота определяется содержанием самой высокой строки в расписании.
Чтобы понять это, я был вынужден прочитать спецификацию W3C для fr .
Это создает макет расписания, в котором высота пропорциональна времени. Но это также может сделать макет очень высоким .
Использование 1fr создает строки одинаковой высоты, определяемой самой высокой строкой в сетке.
Например, если в сетке расписания есть 15-минутные увеличения периодов времени с 7:00 до 18:00, это в общей сложности 48 строк сетки. В этом случае вы захотите использовать для высоты строки значение auto . Потому что расписание будет намного компактнее с высотой каждой строки сетки, определяемой ее содержимым.
Использование значения auto приводит к тому, что высота каждой строки равна высоте ее содержимого.
Добавляем удобные названия тем
Результат
Так выглядит проделанная работа
Это только начало
Это расписание, безусловно, самое эффективное использование CSS Grid в моей практике. Мне нравится, что названия строк основаны на фактических данных, а требования к доступности и CMS вписываются идеально.
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!
Пожалуйста, опубликуйте свои отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, подписки, дизлайки, отклики!
При создании различных веб-сервисов работа с датами и временем практически всегда занимает весомое место. Создание календаря - достаточно простая задача, которая, тем не менее, часто вызывает затруднения в реализации у начинающих разработчиков.
Сегодня мы создадим виджет простого месячного календаря, отвечающий следующим условиям:
- по умолчанию загружается текущий месяц,
- текущая дата выделяется,
- возможно смещение по календарю на месяц вперед или назад.
Содержание
Создадим контейнер обертку month-calendar, в котором разместим три блока:
- month: содержит наименования месяца и года, а также элементы навигации,
- weekdays: наименования дней недели,
- days: собственно, сам календарь (табличная часть, содержит дни месяца).
Так выглядит html-разметка основных блоков календаря:
Обратите внимание: несмотря на визуальную реализацию виджета в виде таблицы, для каждого из вышеперечисленных дочерних элементов контейнера month-calendar мы используем немаркированный список ul . Соответственно, в дальнейшем мы будем манипулировать элементами списков li .
А вот и финальная верстка:
В данном случае для элементов навигации нужно подключить библиотеку Font Awesome (Web Font или SVG версию).
В основе позиционирования элементов календаря находится модель flexbox.
На что обратить внимание:
- ширина контейнера month-calendar равна 100%: width: 100% ,
- для элементов навигации prev и next используются свойства float: left и float-right ,
- блок days имеет фиксированную высоту height: 14rem , что позволяет избежать смещения или наложения элементов при динамической смене данных виджета,
- для табличной части календаря элементы li располагаются слева направо и сверху вниз: горизонтальное выравнивание - justify-content: left , вертикальное - align-content: flex-start ,
- в одном ряду табличной части находится семь элементов, это достигается за счет использования выражения calc: flex: 0 0 calc(100% / 7) ,
- для исключения влияния размеров отсутпов на расчетные значения для всех элементов установлено свойство box-sizing: border-box .
Основу работы виджета составляют свойства и методы встроенного объекта Date.
Экземпляр объекта Date
создать новый экземпляр объекта Date можно только через конструктор:
Вызов Date() как функции (без new) вернет не экземпляр объекта, а строку.
Как получить год, месяц, дату?
Чтобы получить год, месяц, дату экземпляра объетка Date, обратимся к встроенным методам:
Как получить название месяца?
Чтобы получить назавние месяца воспользуемся массивом:
Как получить текущий день недели?
Для определения текущего дня недели тоже существует встроенная функция:
Обратие внимание: отсчет дней недели идет с воскресенья, которое равно 0.
Как получить количество дней в месяце?
Существует небольшая хитрость, основанная на способности методов объекта Date автоматически пересчитывать параметры, приводя их к корректному значению. Так, если мы установим дату экземпляра объекта равной 0, метод getDate() вернет дату последнего дня предыдущего месяца, то есть полученное значение будет равнятся количеству дней в предыдущем месяце:
Как получить количество дней недели до начала текущего месяца.
Если неделя стартует с воскресенья, для определения количества дней недели до начала текущего месяца достаточно получить номер первого дня текущего месяца:
В случае, когда неделя начинается с понедельника, нужно получит номер последнего дня недели предыдущего месяца:
Как корректно сместить дату на месяц назад или вперед?
Мы опять обращаемся к способности методов объекта Date автоматически корректировать дату:
Итоговый JS-файл
Опираясь на данные, полученные выше создадим итоговый код JavaScript:
Результат
А вот и пример на codepen:
Спасибо за внимание.
Идет 2018 год, модные пацаны давно уже верстают на grid, а я все на третьем бутстрапе сижу с col-md кочерячусь, мельком поглядывая на четвертый.
Решил я, что это не дело, и стоит немного знания освежить, но у grid вроде как поддержка пока хромает, а вот flex технологию уже даже утюги поддерживают.
Вот и решил его освоить. И процессом усвоения с вами поделится. В общем, будем верстать календарик на весь год.
Результат будет выглядеть примерно вот так:
Так получилось, что я адепт vue, и поэтому для рендера буду использовать его. Для работы с датами буду использовать библиотечку moment, можно и без нее обойтись, но мне с ней привычнее.
Подготовка
Устанавливаем vue-cli, если у вас её еще нет:
создаем проект на базе шаблона webpack-simple, я буду использовать scss (в основном для комментов), поэтому когда визард спросит вас
ответьте y(es), в общем запускаем:
добавим библиотечку moment.js
очищаем файлик App.vue
Чтоб не показаться варваром, не будем просто верстать голый календарь, а разработаем отдельную компоненту.
Создадим файлик Calendar.vue:
подключим компоненту глобально в main.js
добавим компоненту в App.vue
Если все верно сделали, то увидим слово "Календарь" на белом фоне.
Готовим данные
Прежде чем что-то рисовать надо подготовить данные для календаря. Я предлагаю упихать данные по году в массив из месяцев. В свою очередь, каждый месяц будет представлять собой объект вида:
то бишь название месяца и массив из недель. Каждая неделя будет представлять собой объект где к каждому дню (от 1 до 7) будет привязана дата и может еще какая-нибудь мета информация:
переключимся на файлик Calendar.vue, и обновим часть ответственную за скрипт:
Можно заглянуть в vue-devtools и увидеть там:
Верстаем
Ну давайте чего-нибудь уже выведем. Сначала научимся верстать один месяц, а потом, как освоимся, выведем все остальные. В общем, правим шаблон Calendar.vue:
Сначала заставим отображать даты в нашей неделе в ряд, для этого поправим стиль:
теперь укажем, что каждый день должен занимать одинаковое количество места в нашем ряду:
Ну вроде поприличнее стало, только цифры таки скачут. Происходит это потому, что flex-grow по сути распределяет пустое пространство, а текст цифр в это пустое пространство не входит, поэтому, чтобы ячейки с цифрами стали действительно равными надо указать в стиле, чтобы ширина текста не учитывалась. Для этого установим свойству flex-basis на ноль.
Если не совсем понятно что я говорю, попробуйте поизучать данную картинку:
Ну как? Правим стиль:
от теперь красота
Я думаю мы теперь готовы к тому, чтобы попробовать вывести все месяцы, правим шаблон:
Отлично, у нас уже своего рода респонсивный календарь:
Но нам этого мало, у нас календарь отображается в столбик, как завещал дедушка div, а нам бы в строчку… Сделаем по аналоги. Только что мы каждую неделю назначили flex контейнером для ее дней. А теперь наш блок year назначим flex контейнером для его месяцев. Добавим стили:
чет, каша какая-та:
причина сей каши в том, что по умолчанию flex не делает переносов, а пытается все отобразить в одну строчку, ну и соответственно сжимает покуда сил хватает, а их не хватает. Чтобы включить режим переносов, надо в нашем контейнер year добавить свойство flex-wrap, сделаем это:
Ну, эээ… типа получше стало, хотя б переносит:
Тут воздух маловато, но нам кстати так даже интереснее. Очевидно, что лучше всего чувствуют себя ноябрь и декабрь, но так как мы за равенство, то давайте ужмем их, чтобы сильно не выделялись.
Чтобы ужать, надо убрать flex-grow: 1 у month, (ток добавили, теперь удалять. ), который отвечает за растяжение в рамках строки:
За то как будут располагаться последние два (на самом деле не только за них) висящих элемента отвечает justify-content в стиле контейнере, по умолчанию он равен flex-start. Можно выровнять в конец.
Вот гифка с разными значениями:
Так как я планирую, что у меня будет всегда одинаковое количество месяцев в строке, и хочу чтобы они занимали все свободное место, то я пожалуй верну flex-grow: 1; обратно, и добавлю немного воздуха:
Еще раз вернусь к justify-content и flex-grow: 1. Сравните две гифки, на первой у month flex-grow = 1, на второй — свойство отсутствует:
Какой вариант вам больше по душе, решайте сами.
Добавим строчку с днями недели. Сначала добавим вычислимое свойство в скрипт
а теперь отобразим их в шаблоне:
Я хочу чтобы воскресенье у меня было красненькое, давайте добавим динамический стиль к узлу .day:
А теперь подкорректируем стили, чуток красоты наведем:
Ну и последние штрихи: добавим возможность менять год и сделаем фиксированный заголовок средствами flex.
Переключимся на App.vue файл, и откорректируем шаблон:
добавилась строчка с годом, пока, как видно, не фиксированная:
Подправим стили в App.vue, уберем отступы в body, установим высоту html и body на всю высоту окна, и сделаем заголовок покрасивше, я намеренно использую два узла style, один для глобальных стилей второй для локальных:
Идея создания фиксированного заголовка на flex заключается в использовании двух вложенных контейнеров flex, один из которых ограничивает высоту всего содержимого, а второй, вложенный, использует flex-direction: column.
Классно, да? Вы можете даже сделать футер:
Ну и давайте кнопки для переключения года добавим:
Воспользуемся уже полученными знаниями, и сделаем заголовок более flex-образным, правим стили:
Хм… что-то тут не так. Чет наши заголовки прям сдавило и верстка поплыла. К сожалению это тот момент, который я не до конца понял почему так произошло. Но как я полагаю, это из-за того что display: flex задает динамическую высоту, и находясь внутри другого flex контейнера, ориентируется на размеры заданные своим родителем.
В общем, чтобы это вылечить, надо запретить flex контейнеру внутри которого находится наш header сжимать его размеры, для этого добавим свойство flex-shrink:
Ну вот и все, теперь у вас есть flex-календарь на любой год!
В это статье не удалось показать все возможности flex, но общий подход работы с ним, думаю, отразить получилось.
Я надеюсь, что статья поможет тем, кто как и я застрял в css-временах где-то между 3-м и 4-м бутстрапом, сделать свои первые шаги навстречу современному css.
Читайте также: