Данный виджет я написал достаточно давно, еще на классах. Сейчас я его переписал на хуки. На данный момент времени особой надобности в нем нет, календарей и так очень много, хотя может кому-нибудь он и пригодится. Когда он писался выбор был не велик, и в общем-то для моей задачи ни один готовый календарь не подходил.
Это просто календарь, без наворотов. Я очень люблю яркие цвета, поэтому сделал его ярким. Цвета для него я брал из библиотеки "Material Design". Второй момент, во всех приложениях в которых я его использовал, он стилизовался достаточно сильно. В качестве препроцессора я предпочитаю "SASS", и все часто меняемые параметры я вынес в переменные, если в переменных использовать яркие цвета становится проще понять, что нужно изменить. В него можно передать праздники, и если день выпадает на него, то, при наведении на этот день, появляется подсказка с наименованием этого праздника. Первоначально он задумывался как производственный календарь (собственно говоря таковым он и был), потом это было частью приложения по составлению отпусков для сотрудников. В одной компании было 3 режима, календарь показывал католические и православные празники, дни рожденья сотрудников. В качестве шрифтов я использую "RobotoDraft", поэтому вам нужно будет его подключить, или изменить шрифт моего календаря самостоятельно, как это сделать я опишу ниже. Вот ссылка на этот шрифт:
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500|Material+Icons'\>
Для того, чтобы попробовать данный виджет, существует 2 способа:
- Набрать в консоли "npm install react-production-calendar";
- Скачать проект из данного репозитория.
Если вы поставили виджет через "npm", то подключить его можно следующим способом:
import Calendar from 'react-production-calendar'
Если же вы скачали проект с github-а, то вы можете подключить его одним из следующих способов:
- Из папки "src/calendar";
- Из папки "lib"
Ну и конечно же календарь выводится следующим способом:
<Calendar />
Необходимые параметры я опишу ниже.
По умолчанию виджет будет выглядеть вот так. Понятно, что это как-то не гуд. Чтобы он выглядел по лучше вам стоит подключить CSS, соответственно у вас должен быть установлен "style-loader" и "css-loader".
Подключить можно следующие CSS-ки:
import 'react-production-calendar/lib/styles/calendar-reset-styles.css';
Тогда календарь будет выглядеть вот так. Здесь самые минимальные стили, нет внутренних отступов. Всю стилизацию вам придется делать самому. Допускаю, что это может быть удобно, если у вас есть дизайн календаря, тогда не нужно будет перебивать много стилей. Но вообще, я все часто меняемые параметры вынес в переменные, и календарь должен легко настраиваться.
import 'react-production-calendar/lib/styles/calendar-type.css';
Тогда календарь будет выглядеть вот так. Здесь календарь более менее выглядит прилично, но все таки его нужно будет достилизовать.
import 'react-production-calendar/lib/styles/calendar-dark.css';
Тогда календарь будет выглядеть вот так. Тут применяется темная тема календаря.
import 'react-production-calendar/lib/styles/calendar.css';
Тогда календарь будет выглядеть вот так. Тут календарь стилизован в стиле "Material Design". Я рекомендую брать данный пример за основу. Все часто меняемые вещи я вынес в переменные, тема "Material Design" достаточно яркая, чтобы можно было понять, что можно изменять.
- lang - язык моего календаря. По умолчанию русский. Доступны следующие языки - 'ru' | 'en' | 'de' | 'fr' | 'su'. Пример реализации.
- year - год моего календаря. По умолчанию 2024. Собственно говоря какой год хотите вывести, такой и вводите.
- month - месяц моего календаря. По умолчанию 1. Тут стоит оговорится, что месяц начинается с 1. 1 - январь, 12 - декабрь. Когда я только начинал писать данный виджет, он делался под конкретный проект, и там была такая нумерация месяцев, в JS месяцы начинаются с 0.
- visibleYear - параметр указывающий стоит ли указывать год в шапке календаря. Первоначально календарь был производственным, а в производственном календаре, год как правило пишется отдельно. Доступные параметры true | false.
- startDayWeek - определяет с какого дня недели календарь будет начинаться, по умолчанию 1, т.е. начальный день понедельник. 0 - начальный день воскресенье. Доступные значения 0 | 1.
- verticalDay - определяет, положение дней недели. По умолчанию "false", те положение дней недели горизонтальное. есть такие календари, где положение дней является вертикальным, как правило это христианские календари.
- holiday - массив объектов указывающий на конкретный праздник. Для начала давайте посмотрим празники в 2024 году. Обязательными параметрами являются year, month, day. Тут внимание, month должен начинаться с 0. 0 - январь, 11 - декабрь. Когда я только начинал делать проект, там уже были месяцы, они начинались с 1. Нам нужно было отображать праздники, их мы уже делали по нормальному, напомню, что в JS месяцы начинаются с 0. Не обязательными параметрами являются class и hint. Часто бывают такие даты которые и не праздники, и в тоже время эту дату нужно как-то выделить, если вы напишите что-то в class, то это будет классом, для данной даты. К примеру в 2024 году 27 апреля суббота, является рабочим днем. Я для данной даты в class записал "workDay". А дальше определил стили, и данная дата отображается не как выходной день. Так же я стилизовывал православные и католические праздники, для одного проекта. Если class пустой, то применится класс "holiday" для данной даты. hint - это массив объектов, объект содержит "title" - заголовок подсказки и "desc" - текст подсказки. Это подсказка которая будет появляться при наведении. Как я выше писал параметры class и hint не являются обязательными.
- handleClick - функция которая будет срабатывать при клике на день календаря. Данная функция принимает два параметра, число миллисекунд, прошедших с 1 января 1970. При помощи данной функции и определенных умений можно превратить календарь в органайзер. Посмотрите пример. И саму ячейку, так мы можем к примеру узнать отступы сверху и снизу. Посмотрите выше пример смены класса календаря.
- handleMouseOver - функция которая будет срабатывать при наведении мыши на день календаря. Принимает те же параметры, что и handleClick выше.
- handleMouseOut - функция которая будет срабатывать когда мышка уходит с дня календаря. Принимает те же параметры, что и handleClick выше.
- calClass - класс для календаря. У меня таких ситуаций не возникало, я обычно стилизовал календарь через родителя, но тем не менее. Какой текст вы здесь напишите, такой класс и добавится к календарю.
Я рекомендую подключить данный CSS-файл (CSS-переменные описанные ниже доступны для этого подключаемого файла):
import 'react-production-calendar/lib/styles/calendar.css';
Для стилизации календаря я использую CSS-переменные. Если кто-то не знает, что это такое, я рекомендую просмотреть вот эту статью. Для того, чтобы не было конфликтов, я все переменные моего календаря начинаю с "--pc". Просто меняйте нужные перемменные для блока в котором находится календарь. По умолчанию я использую следующие значения для переменных.
:root {
// Цвет текста календаря, цвет бордеров, цвет подложки
--pc-text-color: #000; // Цвет текста для календаря, по умолчанию он черный.
--pc-border: 1px solid #424242; // Цвет рамки календаря (не ячеек а именно календаря).
--pc-cell-border: var(--pc-border); // Цвет рамки для ячеек календаря, там где даты. По умолчанию равен цвету рами календаря.
--pc-day-border: var(--pc-border); // Цвет рамки для ячеек дней календаря, там где дни (Пн, Вт, Ср и тд). По умолчанию равен цвету рами календаря.
--pc-font: 16px/120% 'RobotoDraft'; // Шрифт для календаря
--pc-bg: inherit; // Фон подложки календаря, если не задавать "--pc-head-bg", "--pc-head-day-bg", "--pc-holiday-bg", то этот фон будет виден, в противном сулучае эти фоны будут его перекрывать.
// Фон заголовка календаря, его внутренние отступы, параметры шрифта
--pc-head-bg: #e6ee9c; // Фон там, где отображается год и месяц календаря
--pc-head-padding: 22px 0; // Внутренние отступы там, где отображается год и месяц календаря
--pc-head-font: inherit; // Шрифт там, где отображается год и месяц календаря, по умолчанию он наследуется, но его можно и заменить, если нужно, чтобы год и месяц имели другой шрифт, к примеру жырный или шрифт больше чем обычный.
// Фон дней недели, внутренние отступы
--pc-head-day-bg: #dce775; // Фон дней недели
--pc-head-day-padding: 30% 0; // Внутренние отступы дней недели
--pc-head-day-font: inherit; // Шрифт дней недели, по умолчанию он наследуется, но его можно и заменить
// Фоны обычного дня, выходного дня и праздников, внутренние отступы, размер шрифта, размер дня (будет видно на текущей дате)
--pc-day-bg: #aed581; // Фон для обычной даты
--pc-output-bf: #ff5252; // Фон для выходного дня
--pc-holiday-bg: #ff1744; // Фон для праздничного дня, по умолчанию он перебьет фон выходного дня, если праздничный день выпадет на субботу или воскресенье.
--pc-cell-padding: 20% 0; // Внутренние отступы для обычной даты (для праздничных дней и выходных отступы будут те же)
--pc-day-width: 34px; // Будет видно, если открыть текущую дату, это кружок в дате, его длина
--pc-day-height: 34px; // Будет видно, если открыть текущую дату, это кружок в дате, его высота
--pc-day-font: inherit; // Шрифт для даты, по умолчанию он наследуется
// Если вдруг правительство перенесет выходной день с субботы или воскресенья на будний день, и этот день станет рабочим, то эта переменная задает такой цвет, я ее сделаю чуть ярче, чем обычный будний день, чтобы было заметно, что мы работаем.
--pc-workday-bg: #7cb342;
// Настройки текущей даты
--pc-curr-day-cell-bg: #ffd740; // Фон текущей даты
--pc-curr-day-bg: #ffc400; // Фон выделенной внутри даты
// Подсказка, все стили которые с ней связаны
--pc-hint-width: 280px; // Длина подсказки
--pc-hint-padding: 15px; // Вутренние отступы подсказки
--pc-hint-border-radius: 10px; // border-radius для подсказки
--pc-hint-box-shadow: 0 0 10px rgba(0, 0, 0, .5); // Тень подсказки
--pc-hint-bg: #dce775; // Фон подсказки
--pc-hint-title-color: inherit; // Цвет текста для заголовка подсказки
--pc-hint-title-font: 16px/120% 'RobotoDraft'; // Шрифт заголовка подсказки
--pc-hint-title-margin: 0 0 5px; // Внешние отступы заголовка подсказки
--pc-hint-desc-font: 14px/140% 'RobotoDraft'; // Шрифт для описания подсказки
--pc-hint-desc-color: inherit; // Цвет текста для описания подсказки
// Не активные дни перед выбранным месяцем и после него
--pc-no-active-day-bg: var(--pc-day-bg); // Фон для не активных дат перед выбранным месяцем и после него, если эти даты выходные или праздничные дни, то будет фон для выходных или праздничный дней
--pc-no-active-day-opacity: .4; // По умолчанию, если дата не активна (находится перед, или после выбранного месяца), то я меняю ее прозрачность, по умолчанию она у меня 0.4.
}
Если вы хотите посмотреть, что можно сделать при помощи данного календаря, то вот ссылки:
- Производственный календарь на 2024 год;
- Календарь стилизованный под разные сезоны. На одном проекте у меня разные сезоны были выделены по разному. В данном примере, я стилизовывал сезоны под "Material Design". Вот тут можете посмотреть код на JS, вот тут код на "SASS";
- Часть CRM-ки, вобщем здесь HR-менеджер может выбрать день рождения сотрудника. Все аякс запросы я отсюда удалил, базы данных у меня нет. В реальном проекте можно было выбрать фото сотрудника, отдел, заполнить его предпочтения. Когда пользователь заходил на данную страницу отображались дни рождения сотрудников на данной неделе. Понятно, что пример учебный, мне нужно показать пример календаря, поэтому все это я отсюда убрал, но идея должна быть понятной. Кликайте на даты, заполняйте поля, сохраняйте, удаляйте их. Все сходства с реальными сотрудниками являются случайными)))) JS код лежит здесь, SASS код лежит здесь.
- Пример того, как можно изменять класс календаря. Смотрите, подсказка когда наводишь на праздник по умолчанию у меня отображается под ячейкой таблицы. В данном примере я рассчитываю входит ли подсказка, и в зависимости от этого меняю класс, так она будет отображаться выше ячейки. Вот тут можете посмотреть код на JS, вот тут код на "SASS";
Если вы хотите более детально посмотреть примеры, то вам стоит скачать данный репозиторий. И набрать в консоли команду "npm install", естественно, у вас должен быть установлен node.js. После установки будут доступны следующие команды:
npm run dev
Запуск в режиме разработчика, будет доступен локальный сервер.
npm run build
Произойдет компиляция скриптов, локальный сервер запущен не будет.
npm run buildextract
Произойдет компиляция скриптов, так-же сгенерятся CSS-ки и HTML-шаблоны. Локальный сервер запущен не будет. Итоговые JS-файлы будут меньше, так как CSS-стили будут из них изъяты, но соответственно их нужно будет подключить в HTML-файлах самостоятельно.
Примеры лежат в папке "src/examples/".