Tessisamess

Information

Hey guys! I've had a few requests for calendar codes, so I finally got one put together. I just wasn't sure if there was interest, but clearly there is lmao. This is super easily customizable using Replace All and you should be able to fully resize this to suit any taste in just a minute or two using the function and the values included below. Enjoy! 💖

Need an HTML page version? I've got you covered right here!

The Coding

<lj-raw><div style="max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;text-align:center;font-family:trebuchet ms,sans-serif;font-size:11px;color:#222;"> <!--MONTH--> <div style="width:100%;margin:2px;height:120px;display:flex;align-items:center;justify-content:center;background:#853717 url(HEADER_BG)center top;background-size:cover;color:#fff;font-size:27px;line-height:1;letter-spacing:5px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);"><div> <b>MONTH</b> 2020 </div></div> <!--DAY NAMES--> <b style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#FBE6CC;padding:8px 0;box-sizing:border-box;color:#853717;">SUNDAY</b> <b style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#FBE6CC;padding:8px 0;box-sizing:border-box;color:#853717;">MONDAY</b> <b style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#FBE6CC;padding:8px 0;box-sizing:border-box;color:#853717;">TUESDAY</b> <b style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#FBE6CC;padding:8px 0;box-sizing:border-box;color:#853717;">WEDNESDAY</b> <b style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#FBE6CC;padding:8px 0;box-sizing:border-box;color:#853717;">THURSDAY</b> <b style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#FBE6CC;padding:8px 0;box-sizing:border-box;color:#853717;">FRIDAY</b> <b style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#FBE6CC;padding:8px 0;box-sizing:border-box;color:#853717;">SATURDAY</b> <!--EMPTY SPACER--> <div style="width:calc((100% / 7) - (2px * 2));border:1px dashed rgba(0,0,0,0.1);margin:2px;min-height:100px;box-sizing:border-box;opacity:0.5;"></div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">1</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">2</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">3</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">4</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">5</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">6</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">7</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">8</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">9</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">10</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">11</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">12</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">13</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">14</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">15</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">16</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">17</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">18</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">19</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">20</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">21</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">22</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">23</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">24</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">25</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">26</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">27</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">28</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">29</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">30</div> <!--INFO--> </div> <!--DAY--> <div style="width:calc((100% / 7) - (2px * 2));border:1px solid rgba(0,0,0,0.1);margin:2px;background:#fff;padding:5px;min-height:100px;box-sizing:border-box;"> <div style="text-align:right;font-size:10px;">31</div> <!--INFO--> </div> <div style="width:100%;margin:2px;text-align:left;letter-spacing:2px;font-size:8px;"><a href="http://tessisamess.insanejournal.com/130261.html" style="color:#999;text-decoration:none;">CODING</a></div></div></lj-raw>

Installation Guide

Paste into an entry and have fun!

After checking what day of the week your month starts on, add spacer blocks to fill the unneeded days. Example: If your month starts on Thursday, you'll want four spacer blocks to take up Sunday through Wednesday. This way all your active days of the month fall onto the correct days.

Remove the additional 31st day block at the end of the calendar if creating for a shorter month.

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

trebuchet ms,sans-serif - All text

DIMENSIONS

1000px - Container width
120px - Month header height
100px - Day min height

2px - Margin spacing
8px - Day name padding

11px - Overall font size
10px - Date number font size
27px - Month header font size

PREMADE ITEMS

<img src="https://icons.iconarchive.com/icons/icons8/ios7/16/Food-Birthday-Cake-icon.png" style="margin:0 0 -3px 0;"> <b>Char</b> Bday
<img src="https://icons.iconarchive.com/icons/icons8/ios7/16/User-Interface-Error-icon.png" style="margin:0 0 -3px 0;"> <b>App</b> Due
<img src="https://icons.iconarchive.com/icons/iconsmind/outline/16/Yes-icon.png" style="margin:0 0 -3px 0;"> <b>Game</b> Activity

Icon set by Icons8

ICON EVENTS

<img src="URL" style="margin:0 0 -3px 0;max-width:16px;max-height:16px;"> Text
(Link and bold/italicize/underline as needed!)

LINKED EVENTS

<a href="URL" style="color:#853717;text-decoration:none;">Text</a>

COLORS

#fff

Day background

#FBE6CC

Light accent color

#853717

Accent color

#222

Text

rgba(0,0,0,0.1)

Borders

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!