This content originally appeared on DEV Community and was authored by Harshita Nahta
Hola!
In this busy world Having a calendar is often a handy feature to have.
There many calendar libraries out, components out there but
I tried to create a Calendar Using Vanilla JS, where I can move through the months. lets see how I have done.
var year = new Date().getFullYear();
var day = new Date().getDay()
var month = new Date().getMonth()
var date = new Date().getDate()
var weekdays = [ "sun" , "mon" , "tue", "wed", "thu" , "fri" , "sat" ]
var months = ["Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sept" , "Oct" ,"Nov" , "Dec" ]
we need a function which checks for leap year to set no of days in a month
var checkLeapYear = (setYear) =>{
if( setYear%400 == 0){
return true;
}
else if(setYear%100 == 0){
return false;
}
else if(setYear%4 == 0){
return true
}
else{
return false
}
}
var monthdays = (checkYear) => {
return {
"Jan" : 31,
"Feb" : checkLeapYear(year) ? 29 : 28 ,
"Mar" : 31,
"Apr" : 30,
"May" : 31,
"Jun" : 30,
"Jul" : 31,
"Aug" : 31,
"Sept" :30,
"Oct" : 31,
"Nov" : 30 ,
"Dec" :31
}
}
Set Top bar for calendar
const setTopDate=(setMonth,setYear)=>{
document.querySelector('[data-selected="full-date"]').innerHTML = months[setMonth] + " " + setYear;
}
set colspan for 1st row so that it should show empty column for the weekdays before 1st date of the month
const setFirstColspan = (monthdate) =>{
var ele = document.getElementsByTagName("table")[0].rows[2]
ele.innerHTML = ""
if(monthdate>0){
var data = document.createElement("td")
ele.appendChild(data)
ele.cells[0].setAttribute( "colspan", "" +(monthdate ))
}
setCalendarData(monthdate)
setLastColspan()
}
finally set calendar data
const setCalendarData = (monthdate) => {
var count = 1;
for(var i = monthdate;i<=6;i++){
var data = document.createElement("td")
var text = document.createTextNode(count);
count++;
data.appendChild(text)
document.getElementsByTagName("table")[0].rows[2].appendChild(data);
}
var tempMonthDays = monthdays(year)[months[month]]
for(var i = count;i<=tempMonthDays;i+=7){
row = document.createElement("tr");
for(var j =0;j<7&&count<=tempMonthDays;j++){
var data = document.createElement("td")
var text = document.createTextNode(count);
count++;
data.appendChild(text)
row.append(data)
}
document.getElementsByTagName("table")[0].appendChild(row);
}
}
now we also need to set colspan for last row empty columns
const setLastColspan = () => {
var ele_len = document.getElementsByTagName("table")[0].rows
var ele = document.getElementsByTagName("table")[0].rows[(ele_len.length)-1]
if(7-(ele.cells.length) > 0){
var data = document.createElement("td")
ele.appendChild(data)
ele.cells[ele.cells.length-1].setAttribute( "colspan", "" +(7-(ele.cells.length)+1))
}
}
on change of month if user pressed on previous month the operation="prev" else if user want to move to next month the operation in that case is "next"
const changeMonth = (operation) =>{
var ele = document.getElementsByTagName("table")[0]
var len = Object.keys(ele.rows).length
len--;
while(len>2){
ele.removeChild( document.getElementsByTagName("table")[0].rows[len])
len--;
}
if(operation == "next"){
if(month+1> 11){
year = year+1
month = 0
}
else {
month = month+1
}}
if(operation == "prev"){
if(month-1<0){
year = year-1
month = 11
}
else {
month = month-1
}
}
setTopDate(month,year);
setFirstDay(year , month)
count = 1;
row = "undefined";
}
add some css to style the calendar
th,td{
border: 2px solid black;
}
td,th{
padding: 10px;
text-align:center;
}
.actions{
display : flex;
justify-content : space-around;
width : 300px;
text-align : center;
color : #ffffff;
font-size: 25px;
font-weight: 600;
margin-top : 20px;
cursor:pointer;
}
.actions-2{
display : flex;
justify-content : space-around;
width : 300px;
cursor: pointer;
}
.next-button{
height: 30px;
width: 30px;
border-radius : 50%;
background-color : #3d3d3d;
}
.prev-button{
height: 30px;
width: 30px;
border-radius : 50%;
background-color : #3d3d3d;
}
tr:first-child th {
border-top-right-radius : 20px;
border-top-left-radius : 20px;
background-color : lightblue;
border-color : transparent;
}
td:hover{
background-color: offwhite;
box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.5);
}
td[colspan]{
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
tr th {
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
cursor: pointer;
border:transparent;
background-color :lightgrey;
color:#3d3d3d;
}
tr td{
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
cursor: pointer;
border:transparent;
}
hope you understood and liked this little program
Happy Developing!
for reference :
codepen - https://codepen.io/harshita-nahta/pen/PoKpRVp
This content originally appeared on DEV Community and was authored by Harshita Nahta
Harshita Nahta | Sciencx (2021-10-30T20:03:02+00:00) Calendar using Vanilla JS. Retrieved from https://www.scien.cx/2021/10/30/calendar-using-vanilla-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.