• 当前位置:首页>>JavaScript教程>>JavaScript基础教程>>HTML组件之:日历主页面
  • HTML组件之:日历主页面
  • ====日历主页面===

    <head>
    <title>Calendar Example</title>
    <?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>


    </HEAD>

    <BODY>
    <P>Click a day in the calendar to add or modify your schedule.</P>

    <MYCAL:CALENDAR></MYCAL:CALENDAR>

    </BODY>
    </HTML>

    ===CALENDAR HTC===

    <HEAD>
    <?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
    <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

    <PUBLIC:COMPONENT tagName="CALENDAR">
    <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
    </PUBLIC:COMPONENT>

    <SCRIPT LANGUAGE="javascript">
    <!--
    function fnInit() {
    defaults.viewLink = document;
    }
    // -->
    </SCRIPT>

    <STYLE>
    TD {
    background-color:tan;
    width:50;
    height:50;
    }
    </STYLE>
    </HEAD>

    <BODY>
    <SCRIPT LANGUAGE="javascript">
    <!--

    // Copyright 1997 -- Tomer Shiran

    setCal();

    function leapYear(year) {
    if (year % 4 == 0) {// basic rule
    return true; // is leap year
    }
    /* else */ // else not needed when statement is "return"
    return false; // is not leap year
    }

    function getDays(month, year) {
    // create array to hold number of days in each month
    var ar = new Array(12);
    ar[0] = 31; // January
    ar[1] = (leapYear(year)) ? 29 : 28; // February
    ar[2] = 31; // March
    ar[3] = 30; // April
    ar[4] = 31; // May
    ar[5] = 30; // June
    ar[6] = 31; // July
    ar[7] = 31; // August
    ar[8] = 30; // September
    ar[9] = 31; // October
    ar[10] = 30; // November
    ar[11] = 31; // December

    // return number of days in the specified month (parameter)
    return ar[month];
    }

    function getMonthName(month) {
    // create array to hold name of each month
    var ar = new Array(12);
    ar[0] = "January";
    ar[1] = "February";
    ar[2] = "March";
    ar[3] = "April";
    ar[4] = "May";
    ar[5] = "June";
    ar[6] = "July";
    ar[7] = "August";
    ar[8] = "September";
    ar[9] = "October";
    ar[10] = "November";
    ar[11] = "December";

    // return name of specified month (parameter)
    return ar[month];
    }

    function setCal() {
    // standard time attributes
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth();
    var monthName = getMonthName(month);
    var date = now.getDate();
    now = null;

    // create instance of first day of month, and extract the day on which it occurs
    var firstDayInstance = new Date(year, month, 1);
    var firstDay = firstDayInstance.getDay();
    firstDayInstance = null;

    // number of days in current month
    var days = getDays(month, year);

    // call function to draw calendar
    drawCal(firstDay + 1, days, date, monthName, year);
    }

    function drawCal(firstDay, lastDate, date, monthName, year) {
    // constant table settings
    //var headerHeight = 50 // height of the table's header cell
    var border = 2; // 3D height of table's border
    var cellspacing = 4; // width of table's border
    var headerColor = "midnightblue"; // color of table's header
    var headerSize = "+3"; // size of tables header font
    var colWidth = 60; // width of columns in table
    var dayCellHeight = 25; // height of cells containing days of the week
    var dayColor = "darkblue"; // color of font representing week days
    var cellHeight = 40; // height of cells representing dates in the calendar
    var todayColor = "red"; // color specifying today's date in the calendar
    var timeColor = "purple"; // color of font representing current time

    // create basic table structure
    var text = ""; // initialize accumulative variable to empty string
    text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'; // table settings
    text += '<TH COLSPAN=7 HEIGHT=' + 10 + '>'; // create table header cell
    text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'; // set font for table header
    text += monthName + ' ' + year;
    text += '</FONT>'; // close table header's font settings
    text += '</TH>'; // close header cell

    // variables to hold constant settings
    var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
    openCol += '<FONT COLOR="' + dayColor + '">';
    var closeCol = '</FONT></TD>';

    // create array of abbreviated day names
    var weekDay = new Array(7);
    weekDay[0] = "Sun";
    weekDay[1] = "Mon";
    weekDay[2] = "Tues";
    weekDay[3] = "Wed";
    weekDay[4] = "Thu";
    weekDay[5] = "Fri";
    weekDay[6] = "Sat";

    // create first row of table to set column width and specify week day
    text += '<TR ALIGN="center" VALIGN="center">';
    for (var dayNum = 0; dayNum < 7; ++dayNum) {
    text += openCol + weekDay[dayNum] + closeCol;
    }
    text += '</TR>';

    // declaration and initialization of two variables to help with tables
    var dayOfMonth = 1;
    var curCell = 1;

    for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
    text += '<TR ALIGN="right" VALIGN="top">';
    for (var col = 1; col <= 7; ++col) {
    if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
    text += '<TD></TD>';
    curCell++
    } else {
    if (dayOfMonth == date) { // current cell represents today's date
    text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
    } else {
    text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';
    }
    dayOfMonth++;
    }
    }
    text += '</TR>';
    }

    // close all basic table tags
    text += '</TABLE>';
    text += '</CENTER>';

    // print accumulative HTML string
    document.write(text);
    }

    // -->
    </SCRIPT>
    </BODY>
    </HTML>

    [1]

  • 上一篇:HTML组件之:CALENDAR HTC
    下一篇:HTML组件之:ANYDAY 和 TODAY HTC(2)