Calender

Developer
Krishna Babu
Size
2,736 Kb
Views
4,048
  1. Calender Previews
  2. Calender HTML Codes
  3. Calender CSS Codes
  4. Calender JS Codes

How do I make an calender?

It's a plane CSS, HTML and jQuery. Which shows the current date.. What is a calender? How do you make a calender? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.

Calender Previews
IQ Test

Calender - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calender</title> <link href='https://fonts.googleapis.com/css?family=Raleway:700,500,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="curr-month"><b>november</b></div> <div class="all-days"> <ul> <li>sun</li> <li>mon</li> <li>tue</li> <li>wed</li> <li>thu</li> <li>fri</li> <li>sat</li> </ul> </div> <div class="all-date"> <ul> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calender - Script Codes CSS Codes

body { background-color: #ccc;
}
* { margin: 0px; padding: 0px;
}
.container { margin: 0 auto; height: 487px; width: 421px; background-color: #000; box-shadow: 0 10px 20px 5px rgba(0, 0, 0, .2); font-family: 'Raleway', sans-serif; text-transform: uppercase;
}
.curr-month { width: 100%; height: 80px; background-image: linear-gradient(to top, #3498DB 70px, #02548b 70px); color: #fff; font-size: 40px; text-align: center; line-height: 80px;
}
.all-days { width: 100%; height: 40px; background-color: #fff; float: left;
}
ul { list-style: none; display: block; height: 30px; width: 421px; margin: 0 auto; float: left;
}
ul li { float: left; width: 60px; text-align: center; /*padding:10px 0px;*/ line-height: 41px;
}
.all-date { width: 100%; height: 305px; float: left;
}
.all-date li { height: 60px; width: 59px; line-height: 60px; border-top: 1px solid #fff; border-left: 1px solid #fff; background-color: #ccc;
}
.b-bottom { border-bottom: 1px solid #fff;
}
.b-right { border-right: 1px solid #fff;
}
.all-date li.monthdate:hover { background-color: #02548b; color: #fff;
}

Calender - Script Codes JS Codes

var curDate = (new Date()).getDate();
var curMonth = (new Date()).getMonth();
var curYear = (new Date()).getFullYear();
var startDay = (new Date(curYear, curMonth, 1)).getDay();
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var noofdays = ["31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
var prevMonth = noofdays[curMonth - 1];
if (curMonth == 11) { prevMonth = noofdays[0]
} else if (curMonth == 0) { prevMonth = noofdays[11]
};
var totalDays = noofdays[curMonth];
var counter = 0;
var precounter = prevMonth - (startDay - 1);
var rightbox = 6;
var flag = true;
jQuery('.curr-month b').text(months[curMonth]);
for (var i = 0; i < 42; i++) { if (i >= startDay) { counter++; if (counter > totalDays) { counter = 1; flag = false; } if (flag == true) { jQuery('.all-date ul').append('<li class="monthdate">' + counter + '</li>'); } else { jQuery('.all-date ul').append('<li style="opacity:.8">' + counter + '</li>'); } } else { jQuery('.all-date ul').append('<li style="opacity:.8">' + precounter + '</li>'); precounter++; } if (i == rightbox) { jQuery(jQuery('.all-date ul li')[rightbox]).addClass("b-right"); rightbox = rightbox + 7; } if (i > 34) { jQuery(jQuery('.all-date ul li')[i]).addClass("b-bottom"); } if ((jQuery(jQuery('.all-date ul li')[i]).text() == curDate) && (jQuery(jQuery('.all-date ul li')[i]).css('opacity') == 1)) { jQuery(jQuery('.all-date ul li')[i]).css({ "background-color": "#02548b", "color": "#fff" }); }
}
Calender - Script Codes
Calender - Script Codes
Home Page Home
Developer Krishna Babu
Username krishnab
Uploaded January 11, 2023
Rating 4
Size 2,736 Kb
Views 4,048
Do you need developer help for Calender?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Krishna Babu (krishnab) Script Codes
Name
Image Swaping
Background
Responsive Calendar
Justify Horizontal Menu
Css3 shapes
Concentration Game
AngularJs Combobox
Bootstrap Carousel
Paging
Page
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!