DEV Community

Making a Calendar in Vanilla Javascript

Kim Heidorn on April 16, 2019

Arguably, time is the best and worst built-in function in Javascript. For my most recent project, I had the idea to make a bastardized Google cale...
Collapse
 
jamesthomson profile image
James Thomson

A good read. Nice to see how you worked through each step of the process. One comment on your post, it would be great to format your code with markdown instead of using screenshots. Cheers

Collapse
 
aligear profile image
aligear

I think Carbon is better.

Collapse
 
knheidorn profile image
Kim Heidorn • Edited

Thanks to both of you for the suggestions - I'm an uber noob so for sure need the help to make my posts more readable. Cheers!

Collapse
 
intrnl profile image
intrnl

It looks nice but people with their own font sizes will have trouble with it.

Collapse
 
ajnasz profile image
Lajos Koszti

No, it's not.

Collapse
 
ddamato profile image
Donnie D'Amato

FYI, a single line to get the number of days in a month. new Date(year, month+1, 0).getDate(); where month represents a zero-indexed value for the month (January === 0, same as you are expecting above).

Collapse
 
preddys75 profile image
Scott Preddy

initially confused that you had typo putting number 6 in date call, but remembered index starts at 0 so its good.

For example, July(index 6 of a year) has 31 days in a month. If I entered new Date(2019, 6, 32) into my console, I would expect the console to return August 1, 2019

Collapse
 
karataev profile image
Eugene Karataev

Making a calendar is a really great exercise to train your js/html/css skills, thanks for sharing your process. I'd like to take a look at the result.
Btw, might be a good example of UI for inspiration.

Collapse
 
cre3z profile image
Cre3z • Edited

Hey Kim,

Thanks for the cool read, I recently did this as an exercise as well to test my skills. I would love to hear your comments on my code and you can check it out here :) I used ul/li tags instead and my vanilla js looks a bit different I tried to implement more ES6 syntax as well.

codesandbox.io/s/03kl637k7n?fontsi...

Collapse
 
theodesp profile image
Theofanis Despoudis

Thats a really good exercise

Collapse
 
talgat profile image
Talgat Sarybaev

Thank you, Kim! I really like articles which teaches smth specific. Tired of articles like '10 methods of Arrays', 'ES6 features that you will love', etc. Read the docs.

Collapse
 
prince_charm55 profile image
Prince Christian

where to find your full code

Collapse
 
aaryansharma444 profile image
aaryansharma444

why not use a printable calendar ?

Collapse
 
yota981 profile image
Yotaan

You can also try Print The Calendar, I'm Developer of this Website. I made it for Free for all.