tesscodes | HTML Page: Customizable Calendar (Reply)

Information

Hey guys! I thought this would be a good one to make an HTML page alternative for, but if you need this entry-safe, the original is right here! This calendar is fully resizable and has two colors, two image options, and an overlay to mute the background image that you can remove if unneeded. Enjoy! 💖

Coding: Single Month

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Calendar</title>
	<link rel="shortcut icon" href="https://i.imgur.com/Vt9Ildz.png">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>

/*--- CALENDAR - TESSISAMESS - 2020 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--bg-color: #853717;
	--bg-img: url()center;
	--overlay: rgba(255,255,255,0.9);

--borders: rgba(0,0,0,0.1);
	--content: #fff;

--text: #222;
	--alt-text: #fff;

--margin: 2px;
	--padding: 5px;

--header-height: 120px;
	--header-text: 27px;
	--header-img: url()center top;

--dayname-height: 35px;
	--day-rows: 5;
	--date-text: 9px;

--accent1: #853717;
	--accent2: #FBE6CC;

--main-font: Open Sans,trebuchet ms,sans-serif;
}

/* GENERAL */

::selection{background:var(--accent1);color:var(--lightest);}
::-moz-selection{background:var(--accent1);color:var(--lightest);}

*{box-sizing:border-box;}
html{background:var(--bg-color) var(--bg-img);background-size:cover;}
body{margin:0;background:var(--overlay);font-family:var(--main-font);color:var(--text);font-size:12px;height:100vh;line-height:1.5;display:flex;align-items:center;justify-content:center;}

img{max-width:100%;}

a{text-decoration:none;color:var(--accent1);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{color:var(--accent2);}

#credit{position:fixed;left:10px;bottom:10px;font-weight:bold;font-size:8px;text-transform:uppercase;letter-spacing:3px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:var(--accent1);}

/* CONTAINER */

#calendar{width:calc(100vw - 6vw);max-width:1300px;display:flex;flex-wrap:wrap;text-align:center;}

/* MONTH HEADER */

header{width:100%;margin:var(--margin);height:var(--header-height);display:flex;align-items:center;justify-content:center;background:var(--accent1) var(--header-img);background-size:cover;color:#fff;font-size:var(--header-text);line-height:1;letter-spacing:5px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);text-transform:uppercase;}

/* DAY HEADERS */

.dayname{background:var(--accent2);height:var(--dayname-height);display:flex;align-items:center;justify-content:center;color:var(--accent1);align-self:flex-start;text-transform:uppercase;letter-spacing:1px;}

/* DAYS */

.block{width:calc((100% / 7) - (var(--margin) * 2));border:1px solid var(--borders);margin:var(--margin);}

.spacer{border:1px dashed var(--borders);opacity:0.5;}

.day{background:var(--content);padding:var(--padding);height:calc(((100vh - var(--header-height) - var(--dayname-height) - 6vw) - ((var(--margin) * 2) * var(--day-rows))) / var(--day-rows));}

.date{display:block;text-align:right;font-size:var(--date-text);}
.icon{margin:0 0 -3px 0;max-height:16px;max-width:16px;}
.day a{font-weight:bold;}

</style>

</head>

<body>

<header><b>Month</b> 2020</header>

<b class="dayname block">Sunday</b>
		<b class="dayname block">Monday</b>
		<b class="dayname block">Tuesday</b>
		<b class="dayname block">Wednesday</b>
		<b class="dayname block">Thursday</b>
		<b class="dayname block">Friday</b>
		<b class="dayname block">Saturday</b>

<div class="spacer block"></div>

</article>

<a href="http://tessisamess.insanejournal.com/" id="credit">TESSISAMESS</a>

</body>
</html>

Coding: Multiple Months

<style>

/*--- CALENDAR - TESSISAMESS - 2020 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--bg-color: #853717;
	--bg-img: url()center fixed;
	--overlay: rgba(255,255,255,0.9);

--borders: rgba(0,0,0,0.1);
	--content: #fff;

--text: #222;
	--alt-text: #fff;

--margin: 2px;
	--padding: 5px;

--header-height: 120px;
	--header-text: 27px;

--header-img1: url()center top;
	--header-img2: url()center top;
	--header-img3: url()center top;
	--header-img4: url()center top;
	--header-img5: url()center top;
	--header-img6: url()center top;
	--header-img7: url()center top;
	--header-img8: url()center top;
	--header-img9: url()center top;
	--header-img10: url()center top;
	--header-img11: url()center top;
	--header-img12: url()center top;

--dayname-height: 35px;
	--day-rows: 5;
	--date-text: 9px;

--accent1: #853717;
	--accent2: #FBE6CC;

--main-font: Open Sans,trebuchet ms,sans-serif;
}

/* GENERAL */

::selection{background:var(--accent1);color:var(--lightest);}
::-moz-selection{background:var(--accent1);color:var(--lightest);}

*{box-sizing:border-box;}
html{background:var(--bg-color) var(--bg-img);background-size:cover;}
body{margin:0;padding:0 0 3vw 0;background:var(--overlay);font-family:var(--main-font);color:var(--text);font-size:12px;line-height:1.5;}

img{max-width:100%;}

/* CONTAINER */

.calendar{width:calc(100vw - 6vw);max-width:1300px;display:flex;flex-wrap:wrap;text-align:center;margin:0 auto;padding:3vw 0 0 0;}

/* MONTH HEADER */

header{width:100%;margin:var(--margin);height:var(--header-height);display:flex;align-items:center;justify-content:center;background-size:cover!important;color:#fff;font-size:var(--header-text);line-height:1;letter-spacing:5px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);text-transform:uppercase;}

.calendar:nth-of-type(1) header{background:var(--accent1) var(--header-img1);}
.calendar:nth-of-type(2) header{background:var(--accent1) var(--header-img2);}
.calendar:nth-of-type(3) header{background:var(--accent1) var(--header-img3);}
.calendar:nth-of-type(4) header{background:var(--accent1) var(--header-img4);}
.calendar:nth-of-type(5) header{background:var(--accent1) var(--header-img5);}
.calendar:nth-of-type(6) header{background:var(--accent1) var(--header-img6);}
.calendar:nth-of-type(7) header{background:var(--accent1) var(--header-img7);}
.calendar:nth-of-type(8) header{background:var(--accent1) var(--header-img8);}
.calendar:nth-of-type(9) header{background:var(--accent1) var(--header-img9);}
.calendar:nth-of-type(10) header{background:var(--accent1) var(--header-img10);}
.calendar:nth-of-type(11) header{background:var(--accent1) var(--header-img11);}
.calendar:nth-of-type(12) header{background:var(--accent1) var(--header-img12);}

/* DAY HEADERS */

/* DAYS */

.block{width:calc((100% / 7) - (var(--margin) * 2));border:1px solid var(--borders);margin:var(--margin);}

.spacer{border:1px dashed var(--borders);opacity:0.5;}

.day{background:var(--content);padding:var(--padding);height:calc(((100vh - var(--header-height) - var(--dayname-height) - 6vw) - ((var(--margin) * 2) * var(--day-rows))) / var(--day-rows));}

.date{display:block;text-align:right;font-size:var(--date-text);}
.icon{margin:0 0 -3px 0;max-height:16px;max-width:16px;}
.day a{font-weight:bold;}

</style>

</head>

<body>

<header><b>Month</b> 2020</header>

<div class="spacer block"></div>

</article>

<a href="http://tessisamess.insanejournal.com/" id="credit">TESSISAMESS</a>

</body>
</html>

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) and have fun!

♡ After checking what day of the week your month starts on, add spacer blocks to fill the unneeded days, then remove the additional 31st day block at the end of the calendar if creating for a shorter month.
♡ Use <img src="URL" class="icon"> to add a tiny icon next to your event reminder text.
♡ A standard link is all you need to link an external page in an event reminder.

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

HTML Page: Customizable Calendar

Information

Coding: Single Month

Coding: Multiple Months

Installation Guide

Terms of Use

Post a comment in response: