Created
December 12, 2023 18:14
-
-
Save TedTschopp/b4000bbf3e6215d1a8c437a3f6658d73 to your computer and use it in GitHub Desktop.
A Little Calendar App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
body { | |
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; | |
} | |
.calendar{ | |
background-color: #F5F5F5; | |
} | |
.EndOfMonth { | |
background-color: #ADD8E6; | |
padding: 0 .1em 0 .1em; | |
} | |
.EndOfYear { | |
background-color: Green; | |
padding: 0 .1em 0 .1em; | |
} | |
.NotEndOfMonth { | |
padding: 0 .1em 0 .1em; | |
} | |
.NotEndOfYear { | |
padding: 0 .1em 0 .1em; | |
} | |
.today { | |
background-color: #E6E6FA; | |
} | |
.weekend { | |
color: Silver; | |
font-size: .75em; | |
} | |
.calendarDate { | |
width: 30px; | |
padding: .25em 0em .25em 0em; | |
margin: .25em 0em .25em 0em; | |
text-align: center; | |
} | |
.calendarheader { | |
width: 30px; | |
padding: .25em 0em .25em 0em; | |
margin: .25em 0em .25em 0em; | |
text-align: center; | |
background-color: Gray; | |
color: White; | |
font-weight: bold; | |
text-transform: uppercase; | |
} | |
.calendarheader .weekend { | |
width: 30px; | |
padding: .25em 0em .25em 0em; | |
margin: .25em 0em .25em 0em; | |
text-align: center; | |
background-color: silver; | |
color: White; | |
font-weight: bold; | |
text-transform: lowercase; | |
} | |
.Notes { | |
text-align: left; | |
font-weight: normal; | |
} | |
.NotesMonth { | |
background-color: #ADD8E6; | |
} | |
</style> | |
<script> | |
sunday = 0; | |
monday = 1; | |
tuesday = 2; | |
wednesday = 3; | |
thursday = 4; | |
friday = 5; | |
saturday = 6; | |
/* Convert to Date Properity */ | |
var Month = new Array(); | |
Month[0] = "Janurary"; | |
Month[1] = "Feburary"; | |
Month[2] = "March"; | |
Month[3] = "April"; | |
Month[4] = "May"; | |
Month[5] = "June"; | |
Month[6] = "July"; | |
Month[7] = "August"; | |
Month[8] = "September"; | |
Month[9] = "October"; | |
Month[10] = "November"; | |
Month[11] = "December"; | |
function startCalendar(date) { | |
document.write('<table class="calendar" cellpadding="0" cellspacing="0"><tr class="calendarheader">'); | |
document.write('<td class="Notes">Month</td>'); | |
document.write('<td class="NotEndOfYear"></td><td class="NotEndOfMonth"></td>'); | |
document.write('<td class="weekend sunday weekend" id="sunday" title="Sunday" abbr="Sunday">s</td>'); | |
document.write('<td class="NotEndOfYear"></td><td class="NotEndOfMonth"></td>'); | |
document.write('<td class="monday" id="monday" title="Monday" abbr="Monday">m</td>'); | |
document.write('<td class="NotEndOfYear"></td><td class="NotEndOfMonth"></td>'); | |
document.write('<td class="tuesday" id="tuesday" title="Tuesday" abbr="Tuesday">t</td>'); | |
document.write('<td class="NotEndOfYear"></td><td class="NotEndOfMonth"></td>'); | |
document.write('<td class="wednesday" id="wednesday" title="Wednesday" abbr="Wednesday">w</td>'); | |
document.write('<td class="NotEndOfYear"></td><td class="NotEndOfMonth"></td>'); | |
document.write('<td class="thursday" id="thursday" title="Thursday" abbr="Thursday">þ</td>'); | |
document.write('<td class="NotEndOfYear"></td><td class="NotEndOfMonth"></td>'); | |
document.write('<td class="friday" id="friday" title="Friday" abbr="Friday">f</td>'); | |
document.write('<td class="NotEndOfYear"></td><td class="NotEndOfMonth"></td>'); | |
document.write('<td class="weekend saturday weekend" title="Saturday" id="saturday" abbr="Saturday">s</td>'); | |
} | |
function finishCalendar(date) { | |
document.write('</td></tr></table>'); | |
} | |
function output_calendar_day(date) { | |
var outputclass = " calendarDate "; | |
/* Output a day in a calendar */ | |
if(date.getDay()==sunday || date.getDay()==saturday ) { | |
outputclass = outputclass + " weekend "; | |
} | |
if(date.getDay()==sunday) { | |
outputclass = outputclass + " sunday "; | |
} | |
if(date.getDay()==monday) { | |
outputclass = outputclass + " monday "; | |
} | |
if(date.getDay()==tuesday) { | |
outputclass = outputclass + " tuesday "; | |
} | |
if(date.getDay()==wednesday) { | |
outputclass = outputclass + " wednesday "; | |
} | |
if(date.getDay()==thursday) { | |
outputclass = outputclass + " thursday "; | |
} | |
if(date.getDay()==friday) { | |
outputclass = outputclass + " friday "; | |
} | |
if(date.getDay()==saturday) { | |
outputclass = outputclass + " saturday "; | |
} | |
if (date.toDateString() == today.toDateString() ){ | |
outputclass = outputclass + " today "; | |
} | |
document.write('<td title="' + date.toLocaleDateString() +'" class="'+outputclass+'">'+date.getDate()+"</td>"); | |
} | |
function output_end_of_week(date) { | |
/* Handle the End of the week */ | |
document.write('</tr><tr><td class="Notes"></td>'); | |
} | |
function output_end_of_month(date) { | |
/* Handle the output for the end of the Month */ | |
document.write('<td class="EndOfMonth" id="'+date.getYear()+Month[date.getMonth()]+'" title="'+Month[date.getMonth()]+'"></td>'); | |
var thisMonth=date.getYear()+Month[date.getMonth()]; | |
d=document.getElementById(thisMonth); | |
d.parentNode.childNodes[0].innerHTML = Month[date.getMonth()]; | |
d.parentNode.childNodes[0].className = d.parentNode.childNodes[0] + " NotesMonth "; | |
} | |
function output_not_end_of_month(date) { | |
/* Handle the output for the end of the Month */ | |
document.write('<td class="NotEndOfMonth"></td>'); | |
} | |
function output_end_of_year(date) { | |
/* Handle the output for the end of the Month */ | |
document.write('<td class="EndOfYear" title="'+date.getYear()+'"></td>'); | |
} | |
function output_not_end_of_year(date) { | |
/* Handle the output for the end of the Month */ | |
document.write('<td class="NotEndOfYear"></td>'); | |
} | |
var oneDay = (60 * 60 * 24 * 1000) | |
today = new Date(); | |
start = new Date(); | |
finish = new Date(); | |
DateOutput = new Date(); | |
DateOutputYesterday = new Date(); | |
start.setMonth(today.getMonth()-3); | |
finish.setMonth(today.getMonth()+9); | |
start.setDate(start.getDate() - start.getDay()); | |
startCalendar(start); | |
for(i = start.valueOf(); i < finish.valueOf(); i=i+oneDay) { | |
DateOutput.setTime(i) | |
DateOutputYesterday.setTime(i-oneDay); | |
if (DateOutputYesterday.getDay()==6) { | |
output_end_of_week(DateOutput); | |
} | |
if (DateOutput.getYear() !== DateOutputYesterday.getYear()) { | |
output_end_of_year(DateOutput); | |
}else{ | |
output_not_end_of_year(DateOutput); | |
} | |
if (DateOutput.getMonth() !== DateOutputYesterday.getMonth()) { | |
output_end_of_month(DateOutput); | |
}else{ | |
output_not_end_of_month(DateOutput); | |
} | |
output_calendar_day(DateOutput); | |
} | |
finishCalendar(finish); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment