Lịch cơ bản (Basic Calender)

Thảo luận trong 'Lập trình Web' bắt đầu bởi dinoking, 30/7/05.

Trạng thái chủ đề:
Không mở trả lời sau này.
  1. dinoking
    Offline

    dinoking Technician Admin

    402
    0
    670
    Bước 1: tạo 1 file calendar.js với đoạn code sau:

    <!-- Begin
    // SET ARRAYS
    var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
    var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

    // DECLARE AND INITIALIZE VARIABLES
    var Calendar = new Date();

    var year = Calendar.getYear(); // Returns year
    var month = Calendar.getMonth(); // Returns month (0-11)
    var today = Calendar.getDate(); // Returns day (1-31)
    var weekday = Calendar.getDay(); // Returns day (1-31)

    var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
    var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
    var cal; // Used for printing

    Calendar.setDate(1); // Start the calendar day at '1'
    Calendar.setMonth(month); // Start the calendar month at now


    /* VARIABLES FOR FORMATTING
    NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
    tags to customize your caledanr's look. */

    var TR_start = '<TR>';
    var TR_end = '</TR>';
    var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
    var highlight_end = '</CENTER></TD></TR></TABLE></B>';
    var TD_start = '<TD WIDTH="30"><CENTER>';
    var TD_end = '</CENTER></TD>';

    /* BEGIN CODE FOR CALENDAR
    NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
    tags to customize your calendar's look.*/

    cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';
    cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;
    cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><B>';
    cal += month_of_year[month] + ' ' + year + '</B>' + TD_end + TR_end;
    cal += TR_start;

    // DO NOT EDIT BELOW THIS POINT //

    // LOOPS FOR EACH DAY OF WEEK
    for(index=0; index < DAYS_OF_WEEK; index++)
    {

    // BOLD TODAY'S DAY OF WEEK
    if(weekday == index)
    cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;

    // PRINTS DAY
    else
    cal += TD_start + day_of_week[index] + TD_end;
    }

    cal += TD_end + TR_end;
    cal += TR_start;

    // FILL IN BLANK GAPS UNTIL TODAY'S DAY
    for(index=0; index < Calendar.getDay(); index++)
    cal += TD_start + ' ' + TD_end;

    // LOOPS FOR EACH DAY IN CALENDAR
    for(index=0; index < DAYS_OF_MONTH; index++)
    {
    if( Calendar.getDate() > index )
    {
    // RETURNS THE NEXT DAY TO PRINT
    week_day =Calendar.getDay();

    // START NEW ROW FOR FIRST DAY OF WEEK
    if(week_day == 0)
    cal += TR_start;

    if(week_day != DAYS_OF_WEEK)
    {

    // SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
    var day = Calendar.getDate();

    // HIGHLIGHT TODAY'S DATE
    if( today==Calendar.getDate() )
    cal += highlight_start + day + highlight_end + TD_end;

    // PRINTS DAY
    else
    cal += TD_start + day + TD_end;
    }

    // END ROW FOR LAST DAY OF WEEK
    if(week_day == DAYS_OF_WEEK)
    cal += TR_end;
    }

    // INCREMENTS UNTIL END OF THE MONTH
    Calendar.setDate(Calendar.getDate()+1);

    }// end for loop

    cal += '</TD></TR></TABLE></TABLE>';

    // PRINT CALENDAR
    document.write(cal);

    // End -->

    Bước 2: chèn đoạn script sau vo thẻ BODY nơi nào tùy thích

    <SCRIPT SRC="calendar.js"></SCRIPT>
     
Trạng thái chủ đề:
Không mở trả lời sau này.

Chia sẻ trang này