Calendar

Developer
Size
2,416 Kb
Views
32,384

How do I make an calendar?

What is a calendar? How do you make a calendar? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.

Calendar Previews

Calendar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calendar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
</div> <script src="js/index.js"></script>
</body>
</html>

Calendar - Script Codes CSS Codes

html{	font-size:1vw;	font-family:sans-serif;	font-weight:bold;
}
body{	margin:1rem;
}
.box{	width:calc(94rem / 7);	height:calc(94rem / 7);	background:rgba(0,0,0,0);	display:block;	float:left;	position:relative;	border:solid 1rem rgba(255,255,255,1);	box-sizing:border-box;
}
.box:before{	content:attr(data-date);	color:white;	opacity:.3;	text-align:center;	font-size:8rem;	width:100%;	line-height:calc(84rem / 7);	position:aboslute;	left:0;	display:block;
}
.special{
}
.special:before{	opacity:.9;
}

Calendar - Script Codes JS Codes

var date = new Date("Jan 1, 2016");
var valentinesDate = new Date("Feb 14, 2016");
var easterDate = new Date("Mar 27, 2016");
var birthDate = new Date("Jun 25, 2016");
var halloweenDate = new Date("Oct 31, 2016");
var christmasDate = new Date("Dec 25, 2016");
var currentDate = new Date("Jan 1 2016");
var currentTime = new Date(Date.now());
currentDate.setMonth(currentTime.getMonth());
currentDate.setDate(currentTime.getDate());
var container = document.querySelector(".container");
var colors = ["#FF8FEE", "#9282E8"];
var birthdayColor = "#518AFF";
var christmasColor = "#78FFA1";
var halloweenColor = "#FFD900";
var valentinesColor = "#FF38B9";
var easterColor = "#AD2CFF";
var currentColor = "#cccccc";
var previousValue = 0;
var currentValue = 0;
var color = colors[0];
var index = 0;
var lastMonth = 0;
var isSpecial = false;
var offset = date.getDay();
for(var o=0;o<offset;o++){	createElement();
}
for (var i = 0; i < 366; i++) {	var day = date.getDate();	date.setHours(date.getHours() + 24)	var month = date.getMonth();	var element = createElement();	element.style.background = color;	if(isSpecial){	element.classList.add("special");	isSpecial = false;	}	color = colors[(month%12)%2];	setColor(valentinesDate,valentinesColor);	setColor(easterDate,easterColor);	setColor(birthDate,birthdayColor);	setColor(halloweenDate,halloweenColor);	setColor(christmasDate,christmasColor);	setColor(currentDate,currentColor);
}
function createElement(){	var element = document.createElement("div");	element.setAttribute("data-date", day);	container.appendChild(element);	element.classList.add("box");	return element;
}
function setColor(checkDate,dateColor){	if(date.getTime()==checkDate.getTime()){	color = dateColor;	isSpecial = true;	}
}
Calendar - Script Codes
Calendar - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 3.5
Size 2,416 Kb
Views 32,384
Do you need developer help for Calendar?

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!

Elliot Geno (pyrografix) Script Codes
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!