Тёмный

🗓️ Кастомный календарь на React + Typescript С НУЛЯ за 1 ЧАС, не используем moment.js 

SIBERIA CAN CODE 🧊 - Frontend
Подписаться 10 тыс.
Просмотров 9 тыс.
50% 1

Полностью кастомный компонент календарь React 18 + Typescript без библиотек по типу moment.js, dayjs. В данном видео можно найти много функций, который работаю с new Date. Если есть идеи, что я еще могу разобрать в режиме лайв кодинга, пишите в комментарии.
github rep - github.com/debabin/react-cust...
Таймкоды ⌛️
00:00 Вступление
00:53 Начало работы
03:00 Функция createDate
08:00 Функция getWeekNumber
11:40 Функция createMonth
15:00 Функция getMonthNumberOfDays
18:50 Функция createYear
24:41 Начало работы над компонентом Calendar
26:00 Делаем hook useCalendar
30:10 Функция getMonthesNames
38:41 Функция getWeekDaysNames
45:00 Делаем получение дней для календаря
1:02:00 Функция formateDate
1:07:00 Пишем стили для календаря
1:08:40 Делаем шапку календаря
1:13:13 Пишем стили для дней календаря
1:14:13 Делаем отображение дней
1:19:00 Функция checkIsToday и checkDatesIsEqual
1:25:50 Создание функции для стрелочек
1:31:45 Пишем стили для месяцев и годов
1:33:20 Делаем отображение месяцев и годов
1:45:00 Результат
1:47:20 Вывод
Социальные сети 🔥
youtube: / siberiacancode
telegram: t.me/techdnevnik
vk: siberiacancode
twitter: / db_babin
instagram: / db_babin
rutube: rutube.ru/channel/24693196/

Опубликовано:

 

28 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 75   
@siberiacancode
@siberiacancode 2 года назад
Ребята нашли баг, на стриме мы его поправили. Все залил на гит. Сам баг бы в файле src/utils/helpers/date/getMonthesNames:16 - заключался он в том, что ребята попробовали 31 мая попользоваться календарем, но не во всех месяцах 31 день поэтому, когда создавалась дата например для июня (в нем 30 дней) js брал первое число след месяца и так далее для всех месяцев.
@sbernaldojunior
@sbernaldojunior 2 года назад
Спасибо большое!
@user-qd6td5ig9v
@user-qd6td5ig9v 2 года назад
Спасибо большое!
@smteam56
@smteam56 2 года назад
Все получилось, Cпасибо за видео урок! Даже стили перекатал на SCSS. Покажите пожалуйста как сделать выбор диапазона дат(dateRange). Это реально востребованная фитча.
@siberiacancode
@siberiacancode 2 года назад
@@smteam56 Спасибо большое, выбор периода и границы выбора это, чего не хватает в данном уроке. Возможно сделаю продолжение, где мы это реализуем или просто доделаю на стриме. Но выбор периода лично я бы сделал так. Я бы сделал useState({startPeriodDate, endPeridoDate}) (это пвесдокод) и при клике сетил бы start дату и после вторым кликом (получается если уже есть start дата) сетил бы end дату, при отрисовке дней просто нужно добавить еще 1 условие isPeriodDay (проверка простая, нужно проверить дата находится ли между start и date). Да и вроде бы все.
@smteam56
@smteam56 2 года назад
@@siberiacancode Спасибо, концепцию понял, попробую реализовать!
@StivenRusTV
@StivenRusTV 2 года назад
Очень круто, спасибо 😃
@user-vc6mo5nl8g
@user-vc6mo5nl8g Год назад
Респект за проделанный труд!!!
@KVelian
@KVelian 2 года назад
Интересное видео, всё, что нужно, чтобы сделать свой кастомный календарь. Круто, спасибо 👍
@siberiacancode
@siberiacancode 2 года назад
Спасибо
@arhfallen6792
@arhfallen6792 20 дней назад
привет, спасибо за видос. Как минимум он был полезен для практики) на момент написания комментария (08/06/2024). Все нормально работает.
@siberiacancode
@siberiacancode 19 дней назад
Круто спасибо, календарь реально хорош
@rostislavpotapov7215
@rostislavpotapov7215 Год назад
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?
@siberiacancode
@siberiacancode Год назад
Тебя понял услышал, буду дальше стараться
@MultiNanoSpeed
@MultiNanoSpeed 2 года назад
информативно , спасибо
@alexeytichakov2078
@alexeytichakov2078 9 месяцев назад
очень не плохо👍. Особенно мне понравилось искать баг с получением имен месяцев)), все не мог понять почему я февраль проскакиваю). Однако по чесному это видео нужно назвать календарь за 3 вечера )). не меньше как по мне , ну это чтоб понять как он работает а не тупо переписать.
@siberiacancode
@siberiacancode 9 месяцев назад
Спасибо за фидбек, данный календарь помог мне и не раз, так что я рад что кому-то он тоже понадобился, хоть и для обучения
@alexeytichakov2078
@alexeytichakov2078 8 месяцев назад
та не за что) он пополнил мой кастомный юй кит. правда немного докрутил его ,ну добавил короче возможность темы переключать а так вполне перспективаня модель, можно будет потом ее обвернуть в контейнер например и рендерить там два таких и обвязку логикой прописать чтоб интервал по датам можно было выбирать. Сейчас в пет проекте их по отдельности рендерю и они управляют каждый свой частью локального подстейта компонента обвертики над ними и в нем на эфекте запускается санка@@siberiacancode
@user-vp9qe7gh1h
@user-vp9qe7gh1h 4 месяца назад
Большое Вам спасибо за туториал!
@siberiacancode
@siberiacancode 3 месяца назад
Не за что
@___JL___
@___JL___ Год назад
Классное видео))) Было бы круто еще реализовать полноценный date picker)))
@siberiacancode
@siberiacancode Год назад
На самом деле, datepicker это или дивчик с датой или инпут с маской, осталось только его добавить и на онклик открывать календарь. С маской могут только проблемы
@slavadmitruk1834
@slavadmitruk1834 Год назад
Участвую сейчас в марафоне по фронту. Именно это прям то, что нужно мне сейчас!!!
@siberiacancode
@siberiacancode Год назад
Рад что смог помочь 😎
@jamjam3337
@jamjam3337 Год назад
👏👍
@gigakvachakhia4777
@gigakvachakhia4777 2 года назад
cool thanks
@siberiacancode
@siberiacancode 2 года назад
thx
@evilinarm
@evilinarm 8 месяцев назад
Привет! Спасибо - очень круто получилось. Сколько на подготовку ушло? Или ты сразу сел и всё сделал?
@siberiacancode
@siberiacancode 8 месяцев назад
Привет, не очень много, мы сделали реализацю на стриме и потом я просто перенес ее
@user-xn9jk1gd2l
@user-xn9jk1gd2l 2 года назад
Я не совсем понял, почему у helper функций необязательные параметры. Дальше в коде при вызовах этих функций, Вы их любом случае прокидываете 🤔. К тому же, если мы избавимся от нулабелности, то мы избавимся от постоянных проверок на null и необходимости установки дефолных значений внутри функций - что является само по себе не очень хорошим решением, так как это усложняет поддержку кода. Банальная необходимость изменить дефолтный язык календаря заставит нас изменять его во всех helper функциях, вместо того, чтобы изменить его один раз где-то "вверху".
@siberiacancode
@siberiacancode 2 года назад
В своей реализации я решил сделать именно так, если опциональные параметры тебе не понадобятся, то их с легкостью можно сделать обязательными. Про поддержку кода согласен, любая условность добавляет сложности. Но сейчас я могу в одном месте в самом верху поменять язык и он поменяется везде, нам не нужно менять параметр внутри функций.
@mody-pq8kd
@mody-pq8kd 2 года назад
Мне кажется с 2кб dayjs было бы удобнее, быстрее и возможно легковеснее, но для понимания хорошо
@siberiacancode
@siberiacancode 2 года назад
Согласен, возможно в dayjs это более оптимизировано, но под капотом предполагаю так же new Date
@user-xn9jk1gd2l
@user-xn9jk1gd2l 2 года назад
В качестве идеи "что можно ещё разобрать", могу предложить расширить данный календарь до полноценного date picker'а
@siberiacancode
@siberiacancode 2 года назад
Хорошая идея, плюс в данной ролике совсем не затронуты темы, выделения периода или ограничения min max date
@StivenRusTV
@StivenRusTV 2 года назад
Очень здравая мысль 😄
@user-xn9jk1gd2l
@user-xn9jk1gd2l 2 года назад
Магическое число 86400000 было бы неплохо вынести в константу
@siberiacancode
@siberiacancode 2 года назад
Это хорошая идея.
@arturmusienko397
@arturmusienko397 Год назад
Видос отличный!!! Но зачем были надо переменные monthIndex и monthNumber, если в одному случе вы брали monthNumber и отнимали 1 (это и есть monthIndex - вы могли просто его взять), а в другом случае вы брали monthIndex и добавляли 1 (это и есть monthNumber - вы могли просто его взять)?
@siberiacancode
@siberiacancode Год назад
Давно уже было, но вроде бы я создал только для читабельности, чтобы каждый раз не видеть запись monthIndex + 1
@MrSanya221
@MrSanya221 Год назад
Как можно запилить график работы?) Тоесть мне нужно что бы были выделены каждые 4 дня через 3 дня. Как это можно реализовать? Может совет какой либо)
@siberiacancode
@siberiacancode Год назад
Я думаю это не сильно связано с календарем, я думаю надо сделать функцию, которая просто возвращает даты из графика, а после их отрисовать уже в календаре, ну или добавить данную функцию в календарь, так или иначе будет дата начала, от нее просто сторим список дат.
@MrSanya221
@MrSanya221 Год назад
@@siberiacancode Каак?)
@siberiacancode
@siberiacancode Год назад
@@MrSanya221 Смотри будет дата начала, например сегодня 10 07, ты берешь дату например 20 07, берешь количество дней между ними это 10 и делишь на 7, если остаток получился меньше или равное 4 это рабочий день, в нашем случае это 3
@MrSanya221
@MrSanya221 Год назад
@@siberiacancode а если дней 30?)
@siberiacancode
@siberiacancode Год назад
@@MrSanya221 30/7 = 4 и остаток 2, 2
@sbernaldojunior
@sbernaldojunior 2 года назад
Классно написано и познавательно! Но календарь не работает(
@siberiacancode
@siberiacancode 2 года назад
Привет, очень странно, можешь сказать какая ошибка. Прям сейчас запустил и все работает
@sbernaldojunior
@sbernaldojunior 2 года назад
@@siberiacancode Сейчас май , при переключении на июнь у меня выпадет такая ошибка (Uncaught TypeError: Cannot read properties of undefined (reading 'month'))
@sbernaldojunior
@sbernaldojunior 2 года назад
Если посмотреть monthesNames из хука , то мы увидим (12) [{…}, undefined, {…}, undefined, {…}, undefined, {…}, {…}, undefined, {…}, undefined, {…}]
@siberiacancode
@siberiacancode 2 года назад
@@sbernaldojunior очень странно, может проблема с браузером, ты в гугле пробуешь ?
@sbernaldojunior
@sbernaldojunior 2 года назад
@@siberiacancode да , в гугле
@olezhonnv3215
@olezhonnv3215 Год назад
Чувак! Ты так перемудрил с рассчетами дней, что тебя очень тяжело понять с ходу. Я делал календарь на чистом жс в дореактные времена - намного проще высчитывал дни. Что у тебя плюс, так это локаль. Раньше такого не было в Дейте, я локали сам писал отдельно. Ну на ревью ты б у меня это все переписал раза три, заодно и математику бы подучил. По Реакту и ТайпСкрипту все норм. Но вот эти твои хелперы - ужас какой-то! Жесть просто, дичь несусветная. Зато работает - да! Молодец, джун - растешь! Но курсы делать рановато. Занимайся!
@siberiacancode
@siberiacancode Год назад
Спасибо, когда сделаешь и кинешь гит, там уже и обсудим
@siberiacancode
@siberiacancode Год назад
Ну или хотя бы идею бы вкинул, а так просто пустой треп
@user-xn9jk1gd2l
@user-xn9jk1gd2l 2 года назад
В целом гуид полезный и балдёжный, пишите код под свои нужды .
@dmitriytavluy2354
@dmitriytavluy2354 Год назад
А какую ещё проверку нужно добавить в const isSelectedMonth = monthesName.monthIndex === state.selectedMonth.monthIndex, чтобы оно оставалось только в определенном году, в котором мы выбрали месяц, а так получается, что не смотря на разные года это условие соблюдается?
@siberiacancode
@siberiacancode Год назад
Я уже наверное не помогу с данным проектом, дебаг. Я уже не помню контекста + пока что нет времени соррян
Далее
Sinfdosh xotin 7😂
01:01
Просмотров 1,8 млн
С Анджилишей на тусе💃
00:15
Просмотров 139 тыс.
Хочу стать Junior React
18:42
Просмотров 4,2 тыс.
Building an event calendar - React Challenge
24:28
Просмотров 23 тыс.
Ultimate Calendar - Date Picker | React Tutorial
12:38
Просмотров 107 тыс.