Search code examples
javascripthtmlhta

HTML and Javascript Calendar

How to fix this calendar? i really confused to make back button and make calendar form reference, i must change 'RsT' number per month to equate start day in a month?

Note :
- RsT: calendar start position number.
- mt: number of month.
- dy: day of today
- maxDate: End date of month.
- newMth() function: build calendar.
- onBtnPress(i) function: Button response.
- aD: (1st date - 1), actually = 0.
- CnT/CtX: For count.
- it[]: Element id.
- mm[]: Month name.

<HTML><HEAD>
<TITLE>Kalender Digital</TITLE>
<HTA:APPLICATION
APPLICATIONNAME="Calendar"
VERSION="1.0.2.1"
BORDER="THICK"
INNERBORDER="NO"
MAXIMIZEBUTTON="NO"
SCROLL="NO"
SINGLEINSTANCE="YES"
CONTEXTMENU="NO"
SELECTION="NO"/>
<STYLE TYPE='TEXT/CSS'>
TABLE{width:702px;height:350px;}
TD{font-family:arial;font-weight:bold;width:100px;height:50px;font-size:12pt;}
.header{font-family:arial;font-weight:bold;height:50px;font-size:26pt;color:orange;}
TD.dy{color:blue;}
TD.jm{color:green;}
TD.mg{color:red;}
BUTTON{width:100%;height:100%;cursor:pointer;}
</STYLE><META HTTP-EQUIV='MSThemeCompatible' CONTENT='YES'></HEAD>
<BODY TOPMARGIN='0' LEFTMARGIN='0'>
<TABLE BGCOLOR='#FFFFFF' BORDER='1' BORDERCOLOR='#000000' CELLSPACING='0px' CELLPADDING='0px' TABINDEX='0'>
<TR ALIGN='CENTER'><TD CLASS='header' COLSPAN='4' ID='dtl' STYLE='WIDTH:400px'></TD><TD COLSPAN='1'><BUTTON LANGUAGE='JavaScript' ONCLICK='onBtnPress(1)'>&lt;&lt;</BUTTON></TD><TD COLSPAN='1'><BUTTON>Today</BUTTON></TD><TD COLSPAN='1'><BUTTON LANGUAGE='JavaScript' ONCLICK='onBtnPress(0)'>&gt;&gt;</BUTTON></TD></TR>
<TR ALIGN='CENTER'><TD CLASS='dy'>Monday</TD><TD CLASS='dy'>Tuesday</TD><TD CLASS='dy'>Wednesday</TD><TD CLASS='dy'>Thursday</TD><TD CLASS='jm'>Friday</TD><TD CLASS='dy'>Saturday</TD><TD CLASS='mg'>Sunday</TD></TR>
<TR ALIGN='CENTER'><TD ID='aa' CLASS='dy'>-</TD><TD ID='ab' CLASS='dy'>-</TD><TD ID='ac' CLASS='dy'>-</TD><TD ID='ad' CLASS='dy'>-</TD><TD ID='ae' CLASS='jm'>-</TD><TD ID='af' CLASS='dy'>-</TD><TD ID='ag' CLASS='mg'>-</TD></TR>
<TR ALIGN='CENTER'><TD ID='ba' CLASS='dy'>-</TD><TD ID='bb' CLASS='dy'>-</TD><TD ID='bc' CLASS='dy'>-</TD><TD ID='bd' CLASS='dy'>-</TD><TD ID='be' CLASS='jm'>-</TD><TD ID='bf' CLASS='dy'>-</TD><TD ID='bg' CLASS='mg'>-</TD></TR>
<TR ALIGN='CENTER'><TD ID='ca' CLASS='dy'>-</TD><TD ID='cb' CLASS='dy'>-</TD><TD ID='cc' CLASS='dy'>-</TD><TD ID='cd' CLASS='dy'>-</TD><TD ID='ce' CLASS='jm'>-</TD><TD ID='cf' CLASS='dy'>-</TD><TD ID='cg' CLASS='mg'>-</TD></TR>
<TR ALIGN='CENTER'><TD ID='da' CLASS='dy'>-</TD><TD ID='db' CLASS='dy'>-</TD><TD ID='dc' CLASS='dy'>-</TD><TD ID='dd' CLASS='dy'>-</TD><TD ID='de' CLASS='jm'>-</TD><TD ID='df' CLASS='dy'>-</TD><TD ID='dg' CLASS='mg'>-</TD></TR>
<TR ALIGN='CENTER'><TD ID='ea' CLASS='dy'>-</TD><TD ID='eb' CLASS='dy'>-</TD><TD ID='ec' CLASS='dy'>-</TD><TD ID='ed' CLASS='dy'>-</TD><TD ID='ee' CLASS='jm'>-</TD><TD ID='ef' CLASS='dy'>-</TD><TD ID='eg' CLASS='mg'>-</TD></TR>
<TR ALIGN='CENTER'><TD ID='fa' CLASS='dy'>-</TD><TD ID='fb' CLASS='dy'>-</TD><TD ID='fc' CLASS='dy'>-</TD><TD ID='fd' CLASS='dy'>-</TD><TD ID='fe' CLASS='jm'>-</TD><TD ID='ff' CLASS='dy'>-</TD><TD ID='fg' CLASS='mg'>-</TD></TR>
</TABLE></BODY>
<SCRIPT LANGUAGE='JavaScript'>
dt = new Date()
it = ["aa", "ab", "ac", "ad", "ae", "af", "ag", "ba", "bb", "bc", "bd", "be", "bf", "bg", "ca", "cb", "cc", "cd", "ce", "cf", "cg", "da", "db", "dc", "dd", "de", "df", "dg", "ea", "eb", "ec", "ed", "ee", "ef", "eg", "fa", "fb", "fc", "fd", "fe", "ff", "fg"];
mm = ["January", "February", "March", "April", "May", "June", "July", "Agust", "September", "October", "November", "December"];
var mt = dt.getMonth();
var yr = dt.getFullYear();
dtl.innerHTML = mm[mt] + "&nbsp;&nbsp;" + yr
var RsT = 2;
var CnT = 0;
var aD = 0;
newMth();
function newMth () {
    var d2 = new Date(yr, (mt + 1), aD);
    maxDate = d2.getDate()
    while (CnT < maxDate) {
    aD = (aD + 1);
    RsT = (RsT+1)
    document.getElementById(it[RsT]).innerHTML = aD;
    CnT = (CnT + 1)};
}
function onBtnPress (i) {
    CnT = 0;
    aD = 0;
    CtX = 0;
    if (i == 0) {
    RsC = 28;
    while (document.getElementById(it[RsC]).innerHTML != "-" & RsC <= 41) {
        RsC = (RsC+1);
    }
    if (RsC < 35) {
        RsC = (RsC - 28)
    } else {
        RsC=(RsC-35)
    }
    RsT = (6 - (7 - RsC));
    if (mt <= 10) {
        mt = (mt + 1)
    } else {
        mt=0;yr=(yr+1);
    }
    } else if (i==1) {
        if (mt > 0) {
            mt = (mt - 1)
        } else {
            mt = 11;
            yr = (yr - 1);
        }
    }
    while (CtX < 41) {
        document.getElementById(it[CtX]).innerHTML = "-";
        CtX = (CtX + 1);
    }
    newMth();
    dtl.innerHTML = mm[mt] + "&nbsp;" + yr
}
</SCRIPT>
</HTML>
Solution

  • The first day of the month is:

    new Date('date_of_1st_day_of_some_month_in_some_year').getDay();

    This returns a dayname index (sunday == 0, monday == 1,...). With this information it should be easy to loop over "empty" days at the beginning of the month.

    FYI, you can add HTML5 support for your HTA by adding <!DOCTYPE html> as the very first line in the document, and then add <meta http-equiv="x-ua-compatible" content="ie=9" /> immediately after title. All stylesheets and links to them should be after this meta.