Working calendar
Hello , My question is that how can I create a working calendar ? like make it clickable and when someone hovers to a date for example it can change the color of the date and stuff , Can someone help me?
21 Replies
That's a very big question 😄
Do you want to make a custom calendar to select dates, in like a form or something like that? Have you tried implementing anything yet, or are you just trying to figure out the first steps at this point?
A good calendar can be made of CSS + HTML.
JavaSript will help for things like storing events.
They can be pretty big components. Check out this guide:
https://www.codewithfaraz.com/content/97/learn-how-to-build-a-dynamic-calendar-with-html-css-and-javascript
Code with Faraz - Best Front-End Components and Blogs
Learn How to Build a Dynamic Calendar with HTML, CSS, and JavaScript
Discover the power of HTML, CSS, and JavaScript by creating an interactive calendar for your web application. Learn how to add events and navigate months.
the example code does not do as it says but there are guides to find and it's a good start, conceptually.
I have used a google calendar iframe then used something like https://stylemygcal.com/ to style it. If you’re looking for a challenge to code it up yourself, looking at some of these programs might give you inspiration from examining their code. Thanks for the reminder, it’s actually something I was wanting to look into as well and forgot all about it!
Following to see if there is a simpler way to style the native html calendar picker
you do it by using existing implementations
DO NOT EVEN TRY TO IMPLEMENT YOUR OWN
you will get it wrong, you will hate everything about it
you will wish to chuck your pc down a vulcano while you're strapped to a shark and a rocket pointed at it
timezones and dates are absolute pure insanity
just use battle-tested stuff that's consistently being updated
check a library called "FullCalendar":
https://fullcalendar.io/
you can add custom styling and implementations, it is widely used
yes exactly , custom calendar to select dates . Like I want when someone hovers to a specific date in the calendar , it says what event is happening in that date for example.
please, don't create your own
this is one of the very few things i will tell you to do not diy
you will get it wrong, 100% guaranteed
what do u mean by not creating my own tho ? like you mean the template of the calendar?
the calendar
use something that already exists
something someone else did
from where
depends on if you're using a framework or not
im using html css bootstrap and js
bootstrap has lots of calendars
yeah but still can I add custom events and stuff ? on a calendar from boostrap ?
oh, you want a calendar for events
im sure there's something already made
i've never looked into that
okay
I'll check that out too
thanks for your help tho
you're welcome
but, if you really don't find anything
you can try to diy, but believe me, you will hate it
fullcalendar has it all
theres one feature missing tho last time i was implementing it, maybe its updated now idk
but u couldnt select days across different months in the multi month view, if the months are shown separately
I would say you can do it yourself but all the time and dates things let libraries or such do cause you will get it wrong. Also I would personally use :php: for making the html of the calendar
oh, definitivelly will get wrong