Тёмный

Coding A Calendar App In Plain JavaScript 

PortEXE
Подписаться 21 тыс.
Просмотров 84 тыс.
50% 1

Let's code a calendar app in plain vanilla JavaScript! Libraries such as Angular, Vue, and React have benefits.. however it's always a great exercise to code in pure JavaScript from time to time.
Converting to React: • Converting A Plain Jav...
#VanillaJavaScript #PortEXE
🎵 Music by Moon Wash.
songfuze.com/a...
🔗Finished Code: github.com/por...
---
👀 Follow Me:
Twitter ➔ / portexe
Instagram ➔ / port.exe
GitHub ➔ github.com/por...
Facebook ➔ / portexe
Website ➔ www.portexe.com/
GAMING ➔ / portexe

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

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 175   
@adamgkruger
@adamgkruger Год назад
This is such a good tut. I really hope you do more vanilla projects like this. TY and great job
@huntervargo4237
@huntervargo4237 Год назад
so true
@timhold2016
@timhold2016 2 года назад
Great tutorial! One piece of feedback though, you should show the final product at the very beginning of the video so that people can decide whether they want to build it or not.
@awinterstale97
@awinterstale97 3 месяца назад
I was thinking the same! a quick demo at the beginning of the tutorial il really helpful!
@camera-support-rentals
@camera-support-rentals Год назад
This is a great tutorial however I need to add multiple events to a single day and I need to store the events in a MSQL database. Can show us how to do it. Your teaching style is super easy to follow and easy to understand. Thanks
@triciaamheiser785
@triciaamheiser785 7 месяцев назад
And adding a single event that recurs multiple times?
@mslai4679
@mslai4679 3 года назад
Thank you so much!!! Best video for beginners.
@excerptbeginning8839
@excerptbeginning8839 Год назад
Great tutorial! Thanks a lot!
@ramidika9805
@ramidika9805 2 года назад
bro you are a masterrrrr
@PortEXE
@PortEXE 2 года назад
One thing I’ve learned thus far in my career is that I’m far from a master.
@isaacwilson8682
@isaacwilson8682 3 года назад
I never see this covered... You can put in your html head. The defer attribute will make the script wait until after the DOM loads
@seanwilliams8833
@seanwilliams8833 Год назад
This is a really good tutorial. One suggestion for future consideration is to create the same tutorial, but with MySQL instead of local storage. Great job!!
@lauraberarducci7563
@lauraberarducci7563 3 года назад
I found this bug that it skips some months, any idea how to fix it? It doesn't show feb, april, june, sept and nov
@Anisoulmi
@Anisoulmi 3 года назад
Same problem
@Anisoulmi
@Anisoulmi 3 года назад
@PortEXE could you check it please
@geeno123
@geeno123 3 года назад
Great tutorial! Thank you for explaining this in simple terms. I have a question that other seem to have already asked. How would we add multiple events for the same day but would throw an error based on if a certain time slot for that day already had an event? For example, if someone scheduled multiple meetings for one day. Thank you again for this great tutorial! Subscribing now!
@TygoSuurenbroek
@TygoSuurenbroek 8 месяцев назад
hey PortEXE, i'm following along and straight from the start wondering what you are using to put the head portion in place for example. i understand you probably made this preset yourself but would like to learn how you personally do this. especially if you are still using this method after 2 years or if you're doing this in another way. Great video, after following this tutorial i will definitely check out what else your channel offers!
@63montywilliams50
@63montywilliams50 3 года назад
why would u not start the tutorial by showing the end result? I feel like I could be wasting my time here because I have no idea what the finished product will be. Im not hatin, im sure its a great calender but come on man how hard would that have been?
@PortEXE
@PortEXE 3 года назад
lol
@MrGc6asl
@MrGc6asl Год назад
For the people struggling with months skipping or not showing Feb. At the part on 35:30 I added the following line above the dt.setMonth: dt.setDate(1); This sets the day to the first day (since every month has day 1 but not every month has day 31st for example) Hopefully this helps
@diegorochacrespo99
@diegorochacrespo99 Год назад
yes, it has helped me. How could I put the months of 30, 31 and 28 days?
@harshpatani1923
@harshpatani1923 Год назад
thankyou so much!!!!
@csaba911
@csaba911 Год назад
Your js not functioning properly when advancing moths, like today on October 31st when click next mont its jump to december than nothing than january, same with july-> august-> skips september than goes to october, something with the add mont in the loader
@shajjadshuvo8335
@shajjadshuvo8335 3 года назад
this is showing only 31days month of the year . jan, mar, may.july,aug,oct,dec --- missing - feb, april,june,sep,nov -- can you fix this bug???
@jonigagau8265
@jonigagau8265 3 года назад
same problem here, did you fix it, man??????¿¿¿???
@shajjadshuvo8335
@shajjadshuvo8335 3 года назад
@@jonigagau8265 thanks for reply....problem fixed....
@lauraberarducci7563
@lauraberarducci7563 3 года назад
Hi!! I'm having the same problem and I'm a little desperate at this point, did you get to fix it??
@Anisoulmi
@Anisoulmi 3 года назад
Same problem could you share the fixed one please
@0xredpill
@0xredpill 3 года назад
@@Anisoulmi DID you guys fix the bug, I can help
@70bpmmusic86
@70bpmmusic86 Месяц назад
@28:21 when the appendChild was added did anyone get TypeError: Cannot read properties of null (reading 'appendChild') at load
@cycychab8584
@cycychab8584 6 месяцев назад
how could i make it that if I want to add 2 events in one day, both show on the calendar ? On my console it's fine, but i can't make it visible for the user ...
@harshpatani1923
@harshpatani1923 Год назад
Changing months is not working properly. Only months with 31 days is displayed. I wrote the same code but still have this problem help me please.
@marceugeni
@marceugeni 3 года назад
Mygoodness you deserve far more subscribers... you're the master. Keeeeep it up buddy!!! Thanks for your tutorials!!!
@PortEXE
@PortEXE 3 года назад
Working on it! Slow climb 🧗
@noelbradley2274
@noelbradley2274 2 года назад
This was a great tutorial, very helpful, as i'm new to web development, my background is C & database design. Is there a way to make this also work on mobile devices??
@nataliachiaramello5724
@nataliachiaramello5724 Год назад
Hola!!! Como hago para que al pasar el calendario a es-ar no se me desconfigure?? Cuando lo paso a español el calendario arranca en el dia 2 y quedan todos los meses iguales..Ayuda!! Gracias!!!
@thewilsonator84
@thewilsonator84 Год назад
I'm getting a date:null title: Test.... I can't seem to figure out why I'm getting a null in the Date string.... Anyone out there help out?
@mickdostie
@mickdostie 2 года назад
I'm trying to branch out of software deveIoppement and am new to web development, and this is great education. Really love the way you explain concepts while building something. Looking forward to seeing more of your content. Auto subscribe.
@talhamikaaiyl5483
@talhamikaaiyl5483 2 года назад
so I went ahead and copied the entire Github code, this doesn't work for me at all.
@adirk1259
@adirk1259 2 года назад
Hey Port :) Great tutorial. Can you explain how when we click next/back and we go to the next/previous year the year syncs with us? like if we're on January 21 and we go one back then it's December 20. Where does it sync exactly on the code?
@JC-fd8ho
@JC-fd8ho 2 года назад
why is creating a calendar such a tudeous process quite difficult as well there is a lot of logic to it
@milotxh
@milotxh 7 месяцев назад
Thank u so much u simply amazing and u got a subscriber
@talhamikaaiyl5483
@talhamikaaiyl5483 2 года назад
i cant get datestring to work 🤨 even went as far as to copy paste your code
@harshkaushik1029
@harshkaushik1029 3 года назад
How to add multiple events in list in one box
@crispinthomas2992
@crispinthomas2992 Год назад
Excellent job. Good teaching techniques.
@TMFINR
@TMFINR 3 года назад
hi could you please make a second part to store the events in the database
@jonigagau8265
@jonigagau8265 3 года назад
The calendar is not working, it jumps one month, missing months are: feb, april,june,sep,nov. Pls help""!!!!
@0xredpill
@0xredpill 3 года назад
Is it not working ? I can help
@xaviertanguay309
@xaviertanguay309 2 года назад
@@0xredpill Were you able to fix this?
@СергейСазонов-х4л
@СергейСазонов-х4л 3 года назад
hi, thank you for the tutorial, can you help me made widget calendar booking for my site?
@sol3cito33
@sol3cito33 3 года назад
This was exceptionally educational. Thank you!
@manuelaverdonck7413
@manuelaverdonck7413 3 года назад
How can you add multiple events in the same day?
@dcb8869
@dcb8869 3 года назад
same question let me know
@davies8183
@davies8183 2 года назад
You saved my life in 1 hour 3 minutes and 45 seconds. You're awesome man.
@CesarD321
@CesarD321 2 года назад
Absolute killer of a tutorial thanks!
@petersmith7261
@petersmith7261 Год назад
I was right....I am a dummy. I found it. Thanks.
@SebastianNeuber-s9x
@SebastianNeuber-s9x 5 месяцев назад
How can i do multiple day events?
@jagoda7725
@jagoda7725 3 года назад
What theme do you use here? :D
@romimaximus
@romimaximus 2 года назад
Wow !!! and i thought i knew how to work with dates in javascript !!! LoLLL...... i was wrong !! ... this video tutorial change my mind !!! and agai wow !!, ... Thank you very much Zackery for this awesome tutorial !!!
@ygsyfika
@ygsyfika 2 года назад
Hello i wanted to ask.... i have run the source code and then it like skip 1 month .... for example, if now is March, next month would be May not April... can i know why?
@zqgAFf
@zqgAFf 2 года назад
I tried to follow until the appendchild() and at 28:22 if you console.log(calendar) you will get a null,and if use null to appendChild() I got an error "Cannot read properties of null (reading 'appendChild') at load" I am sure if I miss something here ,I check every line of code ,it seems fine but just happened
@AbixSol
@AbixSol 2 года назад
Grate video. I learning JS and doing my pet-project for CV, I am doing booking app ,and using your calendar as a starter page. Very good job. Next level for mi will be make it more responsive. Thanks for video.
@mixschnack
@mixschnack Год назад
You could also have used a property with the value "border-box", instead of giving the container a 70 extra pixels.
@Tony.Nguyen137
@Tony.Nguyen137 Год назад
which color theme are u using?
@Linebeck
@Linebeck 2 года назад
What's the name of your Visual Studio Code's theme? It's so nice!
@gayatridunakhe8108
@gayatridunakhe8108 2 года назад
Hello sir thank you so much for this tutorial! I have one question, I want to add the birthday in that calander in that specific year, for example the bday date is 2-2-2001 so I add this in 2001 year and I want it will show that event in that date in every year now in next year 2022 it will show me that event in that day 2-2-2022, so how I should do that?
@ktos7110
@ktos7110 3 года назад
Hi, awesome tutorial :). I have question how can I add more that one event to date?
@geeno123
@geeno123 3 года назад
I am interested in this as well :)
@christiancoder454
@christiancoder454 3 года назад
Me too!
@christiancoder454
@christiancoder454 3 года назад
So I did this. What I did was change eventOnDay.find to .filter Added a for each loop on my eventDiv
@underawater2486
@underawater2486 3 года назад
@@christiancoder454 can i get your code? I can't do it
@christiancoder454
@christiancoder454 3 года назад
@@underawater2486 You're invited to my new group 'JavaScript' on GroupMe. Click here to join: groupme.com/join_group/69042112/gyOh3ytV Join this and I’ll try to help
@albertoluisrinconbarajas9282
@albertoluisrinconbarajas9282 3 года назад
Really nice video! What is your VS code theme ? 🙈
@karicook2944
@karicook2944 3 года назад
I want the VS code theme too!
@coderlady_
@coderlady_ 2 года назад
nice! wish you did it in java with database :)
@petersmith7261
@petersmith7261 Год назад
A really great tutorial and it has helped me a great deal in understanding JS a little better. However, I guess I am probably a dummy as I cannot figure out how to get at the CSS file you refer to on github. Help!
@gawde62
@gawde62 2 года назад
I m using this code to showing calendar & selecting multiple dates & pass it to the database . I have done till now but got stuck to add a validation to select only 3 & 2 days alternating selection . Can any one help me
@neb542
@neb542 3 года назад
OK, why design it to only add one thing per day? Nobody using a calendar to add tasks to will add only one task per day. Defeats the purpose of the feature.
@bohoonyoo6725
@bohoonyoo6725 3 года назад
Thank you!!! Is is possible to connect this source to a DB SQL Developer? And if so could you give me some instructions and hints how to?
@zakirfaizal6321
@zakirfaizal6321 Год назад
Thank you so much for sharing this with us! Was very helpful. My next step will be to try and use PHP on server side to pull events from WordPress and see if I can display those.
@nataliembatha8922
@nataliembatha8922 2 года назад
If anyone was able to make this calendar responsive please let me know, having a hard time attempting it.
@murilodemeloreis3175
@murilodemeloreis3175 2 года назад
Hi. One question: how do I adjust my padding days/dates to a calendar which starts on Monday instead of Sunday?
@knutp9398
@knutp9398 10 месяцев назад
You're prob not going to see this but this is by far the most comprehensive and easy to understand tut i've ever seen. thank you seriously. this is helping me a ton in my dev journey
@francescototti1812
@francescototti1812 2 года назад
This is a great tutorial, I have a question, I made the same calendar, but it is published on a server, how do I get other machines to consult the localstorage of that server?
@anil_baba
@anil_baba Год назад
first time watching your videos and i am very impressed. you are a very excellent teacher sir
@TheBigSadge
@TheBigSadge 3 года назад
How would I go about making events on a time basis. In this sense, I could make more than one event per day but not more than one per hour?
@МаксимРудин-р3м
@МаксимРудин-р3м 2 года назад
Hello, can you tell me how to paint over the days that have passed or so that symbols can be placed in them.
@RizaHariati
@RizaHariati 2 года назад
You explained it very well. Thank you so much
@hannaaverkamp-peters8950
@hannaaverkamp-peters8950 Год назад
That's really impressive and I'm very grateful to you for explaining a (for me) very complex project in a comprehensible and understandable way! you are a great teacher
@tabaicanking3701
@tabaicanking3701 3 года назад
When is the reactjs calendar coming out
@PortEXE
@PortEXE 3 года назад
Link in description
@aminmrd
@aminmrd 3 года назад
that was a great course. but how can we add a localization to this calendar and based on the header of request we change the direction from 'ltr' to 'rtl' and data of calendar change from the gregorian to what ever the request is in response
@albuslrc
@albuslrc 4 месяца назад
Great! 😄
@ellentarrant3239
@ellentarrant3239 2 года назад
super tutorial, just wondering how to get multiple events to show for the same day ?
@vietanhnguyenvu3964
@vietanhnguyenvu3964 Год назад
You're awesome!
@Rubenjr005
@Rubenjr005 3 года назад
Create video would it be hard to set the calendar where you can see all of the months at once for the whole year?
@ukaszt5026
@ukaszt5026 3 года назад
How to display names of days from prev month and next month, i dont want empty divs
@김나연-o2f8v
@김나연-o2f8v 3 года назад
hi there! it's amazing tutorial !! btw I have a question... how do I clean the input tag after I save the event? I saved an event and I wanted to save it on another day but still it did show me what I wrote last time... Do I have to initialize it to null? I'd really appreciate it if you could answer me... But your lecture alone was perfect! Thank you! :-)
@juk3z99
@juk3z99 3 года назад
How to highlight weekend days(boxes, not names)?
@jackdeespadas
@jackdeespadas Год назад
Thank you for this great tutorial. Keep it up.
@EviloveMetal
@EviloveMetal 3 года назад
Question - when I refresh my browser, the event stays in my memory but my page does not show the event in my day square. My code seems perfectly fine - could this be a browser issue? Orrr?
@PortEXE
@PortEXE 3 года назад
It's not likely to be a browser issue. You can test that by cloning the finished project from GitHub and seeing if that works on your browser. You may have a small mistake somewhere in your code. Start by cloning the finished project though and seeing if you can spot the difference between your code and the finished code.
@ramziaswad3079
@ramziaswad3079 2 года назад
thank you so much ….can you plz Gantt schedule chart tutorial
@Vinayakramgade
@Vinayakramgade 3 года назад
Seach a lot for this tutorial, finaly found Thanks..☺️
@clashmini-justin3889
@clashmini-justin3889 Год назад
good video
@yacobee
@yacobee 2 года назад
awesome !
@leprymic8468
@leprymic8468 Год назад
good
@prathyushsunny
@prathyushsunny 2 года назад
Thankyou man. Really loved the tutorial.
@alejandroz1606
@alejandroz1606 2 года назад
Dude code along with you is just great! this is a totally underrated channel
@Gemeinzam
@Gemeinzam 2 года назад
Thanks a lot and greeting from Germany!!
@johnpaul5836
@johnpaul5836 3 года назад
Excellent tutorial - thank you!
@nelsonpineda8860
@nelsonpineda8860 3 года назад
Great video, what theme are you using?
@elarilio5723
@elarilio5723 3 года назад
Great Tutorial! It was explained very well and made it easy to understand totally recommending your channel to my classmates. But I'm kinda loss as I am trying to add a "today" button that is when clicked would display the current month. I'd appreciate any help!
@elarilio5723
@elarilio5723 3 года назад
Its funny that it was so simple but I spent half a day figuring it out. If you ever need a button to bring you back to currents date's month or to show today's date. Add this inside function initButtons // Today's Date document.getElementById('buttonID').addEventListener('click', () => { nav = 0; load(); }); PS. I'm still a student and have little knowledge with this, but please do correct me if this gonna cause any issue or this ain't the best way. This does what I need it to do. Hope this helps any one who needs this too.
2 года назад
So cool! Thanks for share your knowledge!
@nikemartini
@nikemartini Год назад
Very Good, thanks for sharing!
@وقفةصلاة
@وقفةصلاة 2 года назад
Thank you so much!
@shinichikudo4912
@shinichikudo4912 3 года назад
Hello sir. I followed every step on here and it works! that's so awesome. just wanna ask. how can i make my storage directly to firestore? i want to create event directly to firestore. i hope you notice and send help to this 💖
@diasvaloorand3ad474
@diasvaloorand3ad474 2 года назад
@selvinantoniogomezgarcia2138
@selvinantoniogomezgarcia2138 2 года назад
great job! thanks for this tutorial.
@harshavardhannakkina1843
@harshavardhannakkina1843 3 года назад
you can write emmet expression like "div.weekday*7" this will create 7 divs with class weekday
@PortEXE
@PortEXE 3 года назад
Is this a VS Code feature?
@harshavardhannakkina1843
@harshavardhannakkina1843 3 года назад
@@PortEXE Emmet extension feature, it is built into vscode
@clauvex7829
@clauvex7829 2 года назад
Hey great tutorial, but i would like to point out that as of now the calendar doesnt render the month of february in some instances, for example the code in the GitHub repository has this problem for painting the month of FEB, does anyone has the same problem as me?
@xaviertanguay309
@xaviertanguay309 2 года назад
Same here. Were yoou able to fix this?
@clauvex7829
@clauvex7829 2 года назад
@@xaviertanguay309 yes but with significant alterations to the code using another js calendar and mixing both
@MrGc6asl
@MrGc6asl Год назад
Probably a little late but: At the part on 35:30 I added the following line above the dt.setMonth: dt.setDate(1); This sets the day to the 1st of the month so it doesn't break when it's the 31st and not every month has 31 days.
@bakilal-qadhi332
@bakilal-qadhi332 2 года назад
Great tutorial! Thank you
@VetalRedrok1
@VetalRedrok1 2 года назад
Great work! Thanks a lot.
@Gamer-wp7in
@Gamer-wp7in 3 года назад
Create a shift schedule as well
@rahulrao408
@rahulrao408 2 года назад
Really Really well explained! Thank You!
@daniilpogolovkin8221
@daniilpogolovkin8221 2 года назад
Awesome explanation
@dmytrohryshchuk4045
@dmytrohryshchuk4045 3 года назад
You are the Boss! Awesome!
Далее
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн
Being Competent With Coding Is More Fun
11:13
Просмотров 82 тыс.
You don't need a frontend framework
15:45
Просмотров 126 тыс.
Converting A Plain JavaScript App To React
1:02:22
Просмотров 30 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 478 тыс.
Full Stack Developers will take over. This is why.
11:26
Why I only use vanilla HTML, CSS, and JS on YouTube
4:32