2010-11-20 4 views
1

Je voudrais demander s'il y a de toute façon je peux 'déplacer' le calendrier vers le côté droit de la page? Parce que j'ai réalisé qu'il ne peut être affiché que sur le côté gauche. Je ne sais pas vraiment comment le 'déplacer' sur le côté droit ... Je ne sais pas non plus comment mettre css dedans pour le faire.javascript, calendar

Voici le code pour le calendrier ...

<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

Nous ne pouvons pas répondre C'est basé sur l'énorme mur de code que vous avez fourni. Nous aurions besoin de voir le HTML résultant. Les chances sont que c'est quelque chose d'aussi simple que "float: right;" ou "margin: 0 0 0 auto" appliqué au conteneur du calendrier. – meagar

+0

'

' ... '' pour les données non tabulaires..sur, je vais aller me tuer, je serai bientôt de retour. – JAL

+1

Vous ne devez pas implémenter cela par vous-même. Jetez un oeil à http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ par exemple. –

Répondre

2

Ajouter un align = droit à la définition de table en ligne 38.

Ainsi, vous aurez:

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

Au lieu de:

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

Je crois que le balisage daté pour modifier un script daté (sans jeu de mots) est OK. En CSS (la meilleure façon de le faire), nous utiliserons float: right; – PleaseStand