Pruebas.

Hellooooooww~~
Hoy os traigo de parte de un request de Saku un gadget de un calendario personalizable que sirve para añadir eventos y funciona con Javascript (espero que esa haya sido la idea que me preguntabas, si no en otra entrega añadiré otros calendarios <3)

Espero que te guste, este calendario es bastante especial xDDD La verdad es que me llevó la vida entenderlo y seguro que por ahi hay más bonitos nwn Espero que no te disguste :3

A ver que tal~ *W*

1. Coloca todo este código en <body> donde tu quieras [Plantillas Clásicas], o en un gadget [Nuevas Plantillas] <3

<script type="text/javascript">
//  Begin Mensaje-------------------------------------------------------------------------------------------------------------->
/*
Created by A1 JavaScripts - http://www.a1javascripts.com/
This may be used freely as long as this msg is intact!
*/
msgFont='Arial,helvetiva';
msgFontSize="12";
msgFontColor="black"
/*
Here's the array that holds the text to change the divmessage to
when you mouseover. Change the text here
*/
function evento(dia,mes,titulo){
this.dia = dia
this.mes = mes
this.titulo = titulo
}

/*
Aqui colocas los eventos que quieras. No te olvides de cambiarle el número al casilero de eventos cuando corresponda. */

var eventos = new Array()
eventos[0] = new evento (25,4,"evento del 25 de abril jajaja")
eventos[1] = new evento (5,8,"este marca el evento del 5 agosto")
eventos[2] = new evento (15,7,"Aqui puedes poner <u><font color=ff0000>colores</font></u>")
eventos[3] = new evento (10,8,"me gustan<u><font color=ff0000> los colores</font></u>")


function b_writeIt(obj, text){
 document.getElementById(obj).innerHTML=text  
}

function changeText(num){
 b_writeIt('divMessage',eventos[num].titulo).title
}

function borrarText(){
 b_writeIt('divMessage',' ')
}
//  End Mensaje-------------------------------------------------------------------------------------------------------------->


<!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js  -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
//  SET ARRAYS
var day_of_week = new Array('Do','Lu','Ma','Mi','Ju','Vi','Sa');
var month_of_year = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Deciembre');

//  DECLARE AND INITIALIZE VARIABLES
var Calendar = new Date();
     
var month = Calendar.getMonth();    // Returns month (0-11)
var today = Calendar.getDate();    // Returns day (1-31)
var weekday = Calendar.getDay();    // Returns day (1-31)

// Returns year
if(Calendar.getFullYear){
year = Calendar.getFullYear();//IE
}else{
year = Calendar.getYear()+1900;}//Mozilla Firefox

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="20"><table CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">
<tr><td WIDTH=18><b><center>
';
var highlight_end   = '</CENTER></TD></TR>
</TABLE></B>';
var TD_start = '<td WIDTH="20"><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 style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">
<tr><td>';
cal += '<table BORDER=0 CELLSPACING=0 CELLPADDING=2 style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">' + 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++)
{
 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();
  
   // PRINTS DAY
   var iEvent;
  for(iEvent=0; iEvent < eventos.length; iEvent++)
  {
   if( ((month+1)==eventos[iEvent].mes)  && (day==eventos[iEvent].dia) )//cuando coincidan con los eventos-JAIDER
      day = "<a href='javascript:void(0)' onMouseOver='changeText(" + iEvent + "); window.status=\"Perl Site\";return true;'  onMouseOut='borrarText(); window.status=\"\";return true;'> " + day + '</a>';
  }
  
   // HIGHLIGHT TODAY'S DATE
   if( today==Calendar.getDate() )   
     cal += highlight_start + day + highlight_end + TD_end;
    else //dias normales
    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>';

//  End Calendario---------------------------------------------------------------------------------------------------------------->

<script  type="text/javascript">
//  PRINT CALENDAR
document.write(cal);
</SCRIPT><br />
<div id="divMessage" style="position:absolute; width:175px; height:80px; font-size: 12px; font-family: Arial; color:#000000;">
      Aqui se muestra el evento que señales en el Calendario!!! <br />
<br />
</div>

Lo traigo completamente como salía en el post :3 ahora voy explicando qué es cada cosa xD Lo primero de todo es que es bastante complicado de "averiguar"porque es un código directo, no es algo que tu pongas y ya está xDDD no sé si me explico <3 En fin... Voy a colocar instrucciones:

En esta línea cambias la font, tamaño y color.

*/
msgFont='Arial,helvetiva';
msgFontSize="12";
msgFontColor="black"
/*

En esta cambias los eventos que se te ocurran, puedes añadir muchísimos, tambien con colores y esas cosillas <3

var eventos = new Array()
eventos[0] = new evento (25,4,"evento del 25 de abril jajaja")
eventos[1] = new evento (5,8,"este marca el evento del 5 agosto")
eventos[2] = new evento (15,7,"Aqui puedes poner <u><font color=ff0000>colores</font></u>")
eventos[3] = new evento (10,8,"me gustan<u><font color=ff0000> los colores</font></u>")

En esta línea contienen varias variables, la que empieza con var highlight_start es para destacar con colores o el borde cómo quieres que salga el día señalado de hoy. Si quieres colocar más CCS, utiliza el atributo style que está mas adelante.

/* 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="20"><table CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'"> <tr><td WIDTH=18><b><center> '; var highlight_end   = '</CENTER></TD></TR> </TABLE></B>'; var TD_start = '<td WIDTH="20"><center> '; var TD_end = '</CENTER></TD>';

En esta línea contienen varias variables también, estas son para el diseño de la tabla, los colores, el fondo y demás. Si quieres colocar más CCS, utiliza el atributo style que está mas adelante.
/* 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 style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'"> <tr><td>'; cal += '<table BORDER=0 CELLSPACING=0 CELLPADDING=2 style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">' + 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;

Para modificar el mensaje inicial que aparece al recargar la página:

<div id="divMessage" style="position:absolute; width:175px; height:80px; font-size: 12px; font-family: Arial; color:#000000;">       Aqui se muestra el evento que señales en el Calendario!!! </div>

ACTUALIZO: Para cambiar los links de color, tipo, etc coloca esto entre las pestañas <style> o <b:skin> de tu blog:

tr td a center {....lo que quieras añadir aquí....}

* * *
Ya está! Creo que eso es todo por ahora :3 espero que os haya gustado <3

Para la siguiente buscaré más para nuevas entradas *W*
Chauuu~~

ラベル: SCRIPTS