ฝัง
- เผยแพร่เมื่อ 26 ม.ค. 2021
- 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/artist/moonwash
🔗Finished Code: github.com/portexe/VanillaCal...
---
👀 Follow Me:
Twitter ➔ / portexe
Instagram ➔ / port.exe
GitHub ➔ github.com/portexe
Facebook ➔ / portexe
Website ➔ www.portexe.com/
GAMING ➔ / portexe
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
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
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
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.
I was thinking the same! a quick demo at the beginning of the tutorial il really helpful!
This was exceptionally educational. Thank you!
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.
Dude code along with you is just great! this is a totally underrated channel
You saved my life in 1 hour 3 minutes and 45 seconds. You're awesome man.
Absolute killer of a tutorial thanks!
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
yes, it has helped me. How could I put the months of 30, 31 and 28 days?
thankyou so much!!!!
This is such a good tut. I really hope you do more vanilla projects like this. TY and great job
so true
Excellent tutorial - thank you!
Mygoodness you deserve far more subscribers... you're the master. Keeeeep it up buddy!!! Thanks for your tutorials!!!
Working on it! Slow climb 🧗
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!!
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.
Excellent job. Good teaching techniques.
Thank you for the tutorial. Very helpful.
Really Really well explained! Thank You!
Thank you so much!!! Best video for beginners.
Great video dude, Well done
You explained it very well. Thank you so much
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!
So cool! Thanks for share your knowledge!
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.
Thankyou man. Really loved the tutorial.
This was really great!
Thank you so much ! Both JS and React calendar apps are the perfect balance to level up to an operational threshold. I will consider both tutorials as my React/Js graduate mark
Seach a lot for this tutorial, finaly found
Thanks..☺️
Great work! Thanks a lot.
great job! thanks for this
tutorial.
You are the Boss! Awesome!
Great tutorial! Thank you
I love the logic of the code
Thank you for this great tutorial. Keep it up.
first time watching your videos and i am very impressed. you are a very excellent teacher sir
Thank you! Good job!
Very Good, thanks for sharing!
Thank you for the tutorial
Awesome explanation
Great tutorial
I loved it!!!! you explained everything so clearly, thank you so much!
Thanks a lot and greeting from Germany!!
Thank you so much!
Thank u so much u simply amazing and u got a subscriber
Thank You!
Thank you!
hi could you please make a second part to store the events in the database
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!
awesome !
super tutorial, just wondering how to get multiple events to show for the same day ?
You're awesome!
Thanx for the tutorial! What theme you use for your VS Code? so cute
Excellent Tutorial !!!
Looking forward to the React version.
It’s already up!
@@PortEXE i can´t find it, im trying to convert it let see how it goes
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?
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 !!!
Great video, what theme are you using?
thank you so much ….can you plz Gantt schedule chart tutorial
Great! 😄
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
nice! wish you did it in java with database :)
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
And adding a single event that recurs multiple times?
Create video would it be hard to set the calendar where you can see all of the months at once for the whole year?
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?
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! :-)
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??
Hello, can you tell me how to paint over the days that have passed or so that symbols can be placed in them.
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!
Hi. One question: how do I adjust my padding days/dates to a calendar which starts on Monday instead of Sunday?
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?
hi, thank you for the tutorial, can you help me made widget calendar booking for my site?
bro you are a masterrrrr
One thing I’ve learned thus far in my career is that I’m far from a master.
How to highlight weekend days(boxes, not names)?
What's the name of your Visual Studio Code's theme? It's so nice!
How to display names of days from prev month and next month, i dont want empty divs
awesome
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?
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?
What theme do you use here? :D
How to add multiple events in list in one box
thank u
good video
You could also have used a property with the value "border-box", instead of giving the container a 70 extra pixels.
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
How can i do multiple day events?
which color theme are u using?
Create a shift schedule as well
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 ...
Really nice video! What is your VS code theme ? 🙈
I want the VS code theme too!
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!!!
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!
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.
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
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
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 💖
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?
i cant get datestring to work 🤨 even went as far as to copy paste your code
Hi, awesome tutorial :). I have question how can I add more that one event to date?
I am interested in this as well :)
Me too!
So I did this. What I did was change eventOnDay.find to .filter
Added a for each loop on my eventDiv
@@christiancoder454 can i get your code? I can't do it
@@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
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.
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?
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.
How can you add multiple events in the same day?
same question let me know
good