2010-11-20 11 views
1

Ich würde gerne fragen, ob es sowieso möglich ist, dass ich den Kalender auf die rechte Seite der Seite verschieben kann? Weil ich festgestellt habe, dass es nur auf der linken Seite angezeigt werden kann. Ich weiß nicht wirklich, wie ich es auf die rechte Seite verlagern soll ... Ich weiß auch nicht, wie ich CSS dazu bringen kann.javascript, calendar

Hier ist der Code, den Kalender zu machen ...

<script type="text/javascript"> 

// 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.getFullYear();  // 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="10"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=5><B><CENTER>'; 
    var highlight_end = '</CENTER></TD></TR></TABLE></B>'; 
    var TD_start = '<TD WIDTH="1"><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=1>' + 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; 

// 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 --> 

</script> 
+1

Wir können nicht answe Dies basiert auf der massiven Codewand, die Sie bereitgestellt haben. Wir müssten das resultierende HTML sehen. Wahrscheinlich ist es etwas so einfaches wie "float: right;" oder "margin: 0 0 0 auto" wurde auf den Container des Kalenders angewendet. – meagar

+0

'

' ... '' für nicht tabellarische Daten..Hold on, ich werde gehen gehen töten mich selbst, ich bin gleich wieder da. – JAL

+1

Sie sollten das nicht selbst implementieren. Werfen Sie einen Blick auf http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugin-s-web-designers/ für Beispiel. –

Antwort

2

eine align hinzufügen = Recht auf die Tabellendefinition auf der Leitung 38.

So werden Sie haben:

cal = '<TABLE ALIGN=RIGHT BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>'; 

Anstelle von:

cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>'; 
+1

Ich glaube, datiert Markup ein datiertes Skript (kein Wortspiel beabsichtigt) zu optimieren ist in Ordnung. In CSS (dem aktuellen Best-Practice-Weg) würden wir 'float: right;' though verwenden. – PleaseStand

Verwandte Themen