calendar

want a calendar similar to mine? here is all the code necessary for it!

---

• First, you'll need to make a new page! I called mine "cal.html" but like... Call it whatever you want.
• On that new page, you'll need to put the following code into the "style" tags.
  body,html { font-family: FONTHERE; color: black; padding:0; margin:0; overflow: hidden; } table { width:100%; height:auto; padding: 0px; border:1px solid darkgray; border-radius:5px; background: rgb(255, 255, 255); } td{ border: 1px solid transparent; border-radius: 10px; padding: 1px; font-size: 16px; background-color: rgb(211, 243, 223); } td.weekend{ background: rgb(144, 219, 173); font-size: 5vw; border:none; } td.day-of-week { background: rgb(171, 231, 194); font-size: 5vw; border:none; } .header { background-color: rgb(144, 219, 173); border:none; }
  And edit it according to your own tastes and aesthetics!
• Then, before the closing body tag (/body), you'll want to add this script! There are a few options in there that you can edit, so take a look if you feel brave enough!
  <script language="JavaScript"> monthnames = new Array( "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var linkcount=0; function addlink(month, day, href) { var entry = new Array(3); entry[0] = month; entry[1] = day; entry[2] = href; this[linkcount++] = entry; } Array.prototype.addlink = addlink; linkdays = new Array(); monthdays = new Array(12); monthdays[0]=31; monthdays[1]=28; monthdays[2]=31; monthdays[3]=30; monthdays[4]=31; monthdays[5]=30; monthdays[6]=31; monthdays[7]=31; monthdays[8]=30; monthdays[9]=31; monthdays[10]=30; monthdays[11]=31; todayDate=new Date(); thisday=todayDate.getDay(); thismonth=todayDate.getMonth(); thisdate=todayDate.getDate(); thisyear=todayDate.getYear(); thisyear = thisyear % 100; thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) ||(thisyear % 400 == 0)) monthdays[1]++; startspaces=thisdate; while (startspaces > 7) startspaces-=7; startspaces = thisday - startspaces + 1; if (startspaces < 0) startspaces+=7; document.write("<table border=0 bgcolor=white "); document.write("bordercolor=black>"); document.write("<tr><td colspan=7><center><font color='black'><div class='header'>" + monthnames[thismonth] + " " + thisyear + "</font></strong></center></td></tr>"); document.write("<tr>"); document.write("<td align=center class='weekend'>Sun</td>"); document.write("<td align=center class='day-of-week'>Mon</td>"); document.write("<td align=center class='day-of-week'>Tue</td>"); document.write("<td align=center class='day-of-week'>Wed</td>"); document.write("<td align=center class='day-of-week'>Thu</td>"); document.write("<td align=center class='day-of-week'>Fri</td>"); document.write("<td align=center class='weekend'>Sat</td>"); document.write("</tr>"); document.write("<tr>"); for (s=0;s<startspaces;s++) { document.write("<td> </td>"); } count=1; while (count <= monthdays[thismonth]) { for (b = startspaces; b < 7; b++) { linktrue = false; document.write("<td class='" + (count <= monthdays[thismonth] ? "" : "empty") + "'>"); for (c=0;c<linkdays.length;c++) { if (linkdays[c] != null) { if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) { document.write("<a href=\"" + linkdays[c][2] + "\">"); linktrue=true; } } } if (count==thisdate) { document.write("<font color='#04AA6D'><strong>"); } if (count <= monthdays[thismonth]) { document.write(count); } else { document.write(" "); } if (count==thisdate) { document.write("</strong></font>"); } if (linktrue) document.write("</a>"); document.write("</td>"); count++; } document.write("</tr>"); document.write("<tr>"); startspaces=0; } document.write("</table></p>"); // End --> </script> <script type="text/javascript"><!-- var fc2footerparam = 'charset=' + encodeURIComponent(document.charset ? document.charset : document.characterSet) + '&url=' + encodeURIComponent(document.location) + '&service=0&r=' + Math.floor(Math.random()*99999999999); var fc2footertag = '<' + 'script src="//vip.chps-api.fc2.com/apis/footer/?' + fc2footerparam + '" charset="UTF-8"><' + '/script>'; document.write(fc2footertag); </script>
• Then, you should display the calendar through an iframe on your index! Or wherever you wanna put it, really. Copy the code below and edit where necessary!
  <iframe src="CALENDAR URL HERE"></iframe>
• And... That should be it! Enjoy your new fancy calendar B^)...