Foros del Web » Programando para Internet » Javascript »

Calendario en JS

 Estas en el tema de Calendario en JS en el foro de Javascript en Foros del Web. En la pagina de hotscripts.com encontré un calendario que parecia facil y que era lo que queria, pero no lo pude poner en practica. Quiero ...
  #1 (permalink)  
Antiguo 23/06/2004, 14:58
 
Fecha de Ingreso: mayo-2004
Mensajes: 5
Antigüedad: 20 años
Puntos: 0
Pregunta Calendario en JS
En la pagina de hotscripts.com encontré un calendario que parecia facil y que era lo que queria, pero no lo pude poner en practica.

Quiero que quede como en esta pagina: (el que dice Flat calendar)
http://dynarch.com/mishoo/calendar/

pero siguiendo las instrucciones de http://dynarch.com/mishoo/calendar/d...reference.html
no puedo lograrlo.

Alguien sabe que puede estar mal o tiene algo que sirva para hacer esto? gracias
  #2 (permalink)  
Antiguo 23/06/2004, 16:10
Avatar de PatomaS
Colaborador
  
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años, 1 mes
Puntos: 63
Hola

¿qué es lo que no te funciona?

¿podrías mostrarnos tu calendario de manera que podamos ver el problema?

Suerte

Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 23/06/2004, 18:37
 
Fecha de Ingreso: mayo-2004
Mensajes: 5
Antigüedad: 20 años
Puntos: 0
Segun el instructivo, tengo que poner unos links a un par de archivos .js (que estan dirigidos a donde los guardé) y en algun sitio tengo que poner un "<div id="calendar-container"></div>" (que es donde va a estar el calendario) y este script luego:
<script type="text/javascript">
function dateChanged(calendar) {
// Beware that this function is called even if the end-user only
// changed the month/year. In order to determine if a date was
// clicked you can use the dateClicked property of the calendar:
if (calendar.dateClicked) {
// OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth(); // integer, 0..11
var d = calendar.date.getDate(); // integer, 1..31
// redirect...
window.location = "/" + y + "/" + m + "/" + d + "/index.php";
}
};

Calendar.setup(
{
flat : "calendar-container", // ID of the parent element
flatCallback : dateChanged // our callback function
}
);
</script>"

Supuestamente con eso alcanza, pero no logro nada...

nadie conoce algun codigo que me sirva?
  #4 (permalink)  
Antiguo 24/06/2004, 03:41
 
Fecha de Ingreso: mayo-2004
Mensajes: 45
Antigüedad: 20 años
Puntos: 0
calendario en pañales...
Hola!
Bueno, aqui te pego el "esqueleto" de un posible calendario que utilizo. Luego es cuestion de darle el formato que te guste, o ponerlo fijo en la página en lugar de que aparezca la capa cuando pulsas en un enlace...

El cuadro de texto que aparece está ahi por si interesa recuperar el valor para cálculos posteriores con el mismo, ya que se actualiza al pulsar en una fecha concreta del calendario.

En fins, que he copiado una pagina htm lo suficientemente completa para que funcione por si misma en principio sin mas modificaciones... lo que no se es como se vera en el post, direcamente he hecho un copy-aste de esos...

Enga, allá va...

saludos = saludos + 1





<html>
<head>
<script language="VBScript">
Function compruebaFestivo(fecha)
Dim festivo, contadorFestivos
Dim dia, mes, anio
ReDim arrFestivos(0)

festivo = "n"

' festivos de la comunidad de Madrid, por ejemplo
ReDim Preserve arrFestivos(13)
arrFestivos(0) = "1/0/2004"
arrFestivos(1) = "6/0/2004"
arrFestivos(2) = "19/2/2004"
arrFestivos(3) = "8/3/2004"
arrFestivos(4) = "9/3/2004"
arrFestivos(5) = "1/4/2004"
arrFestivos(6) = "15/4/2004"
arrFestivos(7) = "16/7/2004"
arrFestivos(8) = "12/9/2004"
arrFestivos(9) = "1/10/2004"
arrFestivos(10) = "9/10/2004"
arrFestivos(11) = "6/11/2004"
arrFestivos(12) = "8/11/2004"
arrFestivos(13) = "25/11/2004"

For contadorFestivos = 0 To UBound(arrFestivos)
If fecha = arrFestivos(contadorFestivos) Then
festivo = "s"
End If
Next

compruebaFestivo = festivo
End Function
' -----------------------------------------------------
</script>

<script language="javascript">
var auxiliar= new Date();
var num_filas=0;
var num_annus
num_annus=3
annus_act=auxiliar.getYear();
mes_act=auxiliar.getMonth();

var annus= new Array();
for (n = 0; n <num_annus; n++) {
annus [n]= new Array();
annus [n][0]=annus_act+1-n;
}
var mes= new Array();
mes [0]= new Array();
mes [0][0]="Enero"
mes [1]= new Array();
mes [1][0]="Febrero"
mes [2]= new Array();
mes [2][0]="Marzo"
mes [3]= new Array();
mes [3][0]="Abril"
mes [4]= new Array();
mes [4][0]="Mayo"
mes [5]= new Array();
mes [5][0]="Junio"
mes [6]= new Array();
mes [6][0]="Julio"
mes [7]= new Array();
mes [7][0]="Agosto"
mes [8]= new Array();
mes [8][0]="Septiembre"
mes [9]= new Array();
mes [9][0]="Octubre"
mes [10]= new Array();
mes [10][0]="Noviembre"
mes [11]= new Array();
mes [11][0]="Diciembre"

var dias= new Array();
dias [0]= new Array();
dias [0][0]=31
dias [1]= new Array();
dias [1][0]=28
dias [2]= new Array();
dias [2][0]=31
dias [3]= new Array();
dias [3][0]=30
dias [4]= new Array();
dias [4][0]=31
dias [5]= new Array();
dias [5][0]=30
dias [6]= new Array();
dias [6][0]=31
dias [7]= new Array();
dias [7][0]=31
dias [8]= new Array();
dias [8][0]=30
dias [9]= new Array();
dias [9][0]=31
dias [10]= new Array();
dias [10][0]=30
dias [11]= new Array();
dias [11][0]=31

function escribir(){
var annus
var mes
/*1992 y 2000*/
annus=document.calendario.annus.options[document.calendario.annus.selectedIndex].value ;
mes=document.calendario.mes.options[document.calendario.mes.selectedIndex].value ;
bisiesto();
fecha_ini = new Date(annus,mes,1);
for (n = 0; n <num_filas; n++) {
objTR = t_calen.deleteRow(0);
}
var indice=0;
var fecha_hoy = new Date();

for (n = 1; n <dias[mes][0]+1; n++) {
fecha_ini = new Date(annus,mes,n)

if (n==1 || fecha_ini.getDay()==1)
{
objTR = t_calen.insertRow(indice);
objTR.id = indice;
objTR.align= 'center';
indice=indice+1;
num_filas=indice
}
if (n==1 && fecha_ini.getDay()!=1)
{
//Si el primer dia no es lunes completo
var dia
if (fecha_ini.getDay()==0)
{dia=6}
else
{dia=fecha_ini.getDay()-1;}
for(i=0; i<dia;i++)
{
objTD = objTR.insertCell();
objTD.id = 0
objTD.innerHTML =""
}
}


objTD = objTR.insertCell();

// si es sabado, domingo o festivo se pone el dia del calendario en rojo
var fecha,modo;
fecha=fecha_ini.getDate() + "/" + fecha_ini.getMonth() + "/" + fecha_ini.getYear();

if (fecha_ini.getDay() == 0 || fecha_ini.getDay() == 6 || compruebaFestivo(fecha) == 's'){
objTD.style.color = '#b22222';
} else if (fecha_ini.getMonth() == fecha_hoy.getMonth() &&
fecha_ini.getDate() == fecha_hoy.getDate() &&
fecha_ini.getYear() == fecha_hoy.getYear()) {
objTD.style.backgroundColor = 'yellow';
} else {
objTD.style.color = 'navy';
}

objTD.style.cursor = 'hand';
objTD.style.border = '1px solid white';
objTD.id = n;
objTD.innerHTML = n;
objTD.onmouseover =entrar;
objTD.onmouseout =salir;
objTD.onclick = enviar;
}
}

function enviar()
{
var anio, mes, dia;
anio = document.calendario.annus.value;
mes = parseInt(document.calendario.mes.value) + 1;
if (mes < 10)
mes = '0' + mes
dia = window.event.srcElement.innerText;
if (dia < 10)
dia = '0' + dia
var fecha = new Date(mes + "/" + dia + "/" + anio);
// var pinchar = '<%=Request("pinchar")%>';

document.all("campoFecha").value = dia + "/" + mes + "/" + anio;
}

function entrar()
{
window.event.srcElement.style.border = '1px solid navy';
}

function salir()
{
window.event.srcElement.style.border = '1px solid white';
}


function comparar(objeto){
var annus
var mes
var dia
var cadena
var error
var dia_act
error=0

annus=document.calendario.annus.options[document.calendario.annus.selectedIndex].value;
mes=document.calendario.mes.options[document.calendario.mes.selectedIndex].value;
mes=parseInt(mes)+1
dia=objeto.id;
dia_act=dia+"-"+mes+"-"+annus

if (error!=0){
//objeto.style.backgroundColor=color_normal
return false
}
else{
//objeto.style.backgroundColor=color_resaltado
return true
}
}

function compara_fechas(a,b){
var array_a
var array_b
array_a=a
array_b=b
array_a=array_a.split("-")
array_b=array_b.split("-")
var fecha_a
var fecha_b
fecha_a=new Date(array_a[2],array_a[1],array_a[0]);
fecha_b=new Date(array_b[2],array_b[1],array_b[0]);
if (fecha_a < fecha_b)
return -1;
if (fecha_a > fecha_b)
return 1;

return 0;
}
function bisiesto(){
var auxiliar
/*1992 y 2000*/
auxiliar=document.calendario.annus.options[document.calendario.annus.selectedIndex].value;
if ((auxiliar%4==0 && auxiliar%100!=0) || (auxiliar%400==0))
{dias [1][0]=29;}
else
{dias [1][0]=28}
}
function limpiar(){
escribir()
}

// ---------------------------------------------------------------------------------------------------

function ocultarCapa(capa){
document.all(capa).style.display = 'none';
}

function mostrarCapa(capa){
document.all(capa).style.display = '';
}

function mostrarCalendario(){
mostrarCapa('capaCalendario');
escribir();
}
</script>
</head>

<body>
<a href="javascript:mostrarCalendario()">ABRIR CALENDARIO...</a>
<input type="text" id="campoFecha">

<div id="capaCalendario" style="display:none;position:absolute;left:400px;t op:100px;width:200px;height:210px;BORDER-RIGHT:navy 1px solid;BORDER-TOP:navy 1px solid;BORDER-LEFT:navy 1px solid;BORDER-BOTTOM:navy 1px solid;BACKGROUND-COLOR:#ffffff">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="100%" align="right"><a href="javascript:ocultarCapa('capaCalendario')"><i mg title="Cerrar calendario" src="./images/cerrar.gif" border="0" width="16" height="14" /></a></td>
</tr>
</table>
<form NAME="calendario">
<table width="175px" border="0" align="center">
<tr>
<td>
<script language="javascript">
document.write("<select name='mes' OnChange='javascript:escribir()' class='persona' style='WIDTH:90px '>")
for (n = 0; n <mes.length; n++) {
if(n==mes_act){
document.write("<option value='"+n+"' selected>"+mes [n][0]+"</option>")
}
else{
document.write("<option value='"+n+"'>"+mes [n][0]+"</option>")
}
}
document.write("</select>")

</script>
</td>
<td>
<script language="javascript">
document.write("<select name='annus' OnChange='javascript:escribir()' class='persona' style='WIDTH:60px'>")
var auxiliar= new Date();
for (n = 0; n <annus.length; n++) {
if (annus [n][0]==annus_act){
document.write("<option value='"+annus [n][0]+"' selected>"+annus [n][0]+"</option>")
}
else{
document.write("<option value='"+annus [n][0]+"'>"+annus [n][0]+"</option>")
}
}
document.write("</select>")
</script>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left">
<table width="175px" height="130px" border="0" cellspacing="0" cellpadding="0">
<tr height="35%" valign="top">
<td>
<table width="175px" style="text-align:left;border:1px solid navy" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="175px" cellspacing="1" cellpadding="1">
<tr bgcolor="#33ccff">
<td align="center" width="25px"><b>L</b></td>
<td align="center" width="25px"><b>M</b></td>
<td align="center" width="25px"><b>X</b></td>
<td align="center" width="25px"><b>J</b></td>
<td align="center" width="25px"><b>V</b></td>
<td align="center" width="25px"><b>S</b></td>
<td align="center" width="25px"><b>D</b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" id="t_calen" cellspacing="1" cellpadding="1" border="0"></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
__________________
Et lux in tenebris lucet...
s.f.wil
  #5 (permalink)  
Antiguo 24/06/2004, 06:02
 
Fecha de Ingreso: mayo-2004
Mensajes: 5
Antigüedad: 20 años
Puntos: 0
Gracias! igual creo que encontré un error entre los archivos del que bajé, por lo que dejandole el idioma original funciona. Así que cambie los datos del array y por ahora anda bien. Muchas Gracias!!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:30.