Forum TourDeJeu -> Script De Calendrier En Javascript

TourDeJeu, le réseau des jeux en ligne alternatifs : jeux web multijoueurs, jeux par forum. En savoir +

En ligne : + de 500 jeux, + de 7000 news, + de 26000 commentaires

Forum TourDeJeu · Règles du forum	Aide Recherche Membres
Bienvenue invité ( Connexion \| Inscription )	Recevoir à nouveau l'email de validation

Forum TourDeJeu -> La création et la gestion de jeux -> Programmer

Flux RSS des discussions du forum :

pour les joueurs, et

pour les créateurs et MJ

Script De Calendrier En Javascript, j'en cherche un tout simple

Suivre ce sujet | Envoyer ce sujet | Imprimer ce sujet

zumba	Ecrit le : Mercredi 13 Juin 2007 à 15h23
Ouf Groupe : Membre Messages : 496	Hello, qqun pourrait il me conseiller un script HTML/JS générant un petit calendrier, de préférence dans un div flottant et pas une nouvelle fenêtre. Je cherche un truc vraiment ultra simple a utiliser (juste pouvoir choisir une date et la balancer dans un champ) et surtout simple à integrer dans son code. Merci ! -------------------- Z

Kalan

Ecrit le : Mercredi 13 Juin 2007 à 15h42

Ouf

Groupe : Membre
Messages : 566

CODE

/*


















//\ overLIB 3.50 -- This notice must remain untouched at all times.
//\ Copyright Erik Bosrup 1998-2001. All rights reserved.
//\ By Erik Bosrup (erik@bosrup.com). Last modified 2001-08-28.
//\ Portions by Dan Steinman (dansteinman.com). Additions by other people are
//\ listed on the overLIB homepage.
//\ Get the latest version at http://www.bosrup.com/web/overlib/
*/

/*

Modified to work well with BugTracker.NET. Specifically,
calls "on_change()" method when date value changes - corey trager 12/02

*/

var weekend = [0,6];
var weekendColor = "#e0e0e0";
var fontface = "Verdana";
var fontsize = 8; // in "pt" units; used with "font-size" style element

var gNow = new Date();
var ggWinContent;
var ggPosX = -1;
var ggPosY = -1;

Calendar.Months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];

// Non-Leap year Month days..
Calendar.DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Leap year Month days..
Calendar.lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function Calendar(p_item, p_month, p_year, p_format) {
if ((p_month == null) && (p_year == null)) return;

if (p_month == null) {
this.gMonthName = null;
this.gMonth = null;
this.gYearly = true;
} else {
this.gMonthName = Calendar.get_month(p_month);
this.gMonth = new Number(p_month);
this.gYearly = false;
}

this.gYear = p_year;
this.gFormat = p_format;
this.gBGColor = "white";
this.gFGColor = "black";
this.gTextColor = "black";
this.gHeaderColor = "black";
this.gReturnItem = p_item;
}

Calendar.get_month = Calendar_get_month;
Calendar.get_daysofmonth = Calendar_get_daysofmonth;
Calendar.calc_month_year = Calendar_calc_month_year;

function Calendar_get_month(monthNo) {
return Calendar.Months[monthNo];
}

function Calendar_get_daysofmonth(monthNo, p_year) {
/*
Check for leap year ..
1.Years evenly divisible by four are normally leap years, except for...
2.Years also evenly divisible by 100 are not leap years, except for...
3.Years also evenly divisible by 400 are leap years.
*/
if ((p_year % 4) == 0) {
if ((p_year % 100) == 0 && (p_year % 400) != 0)
return Calendar.DOMonth[monthNo];

return Calendar.lDOMonth[monthNo];
} else
return Calendar.DOMonth[monthNo];
}

function Calendar_calc_month_year(p_Month, p_Year, incr) {
/*
Will return an 1-D array with 1st element being the calculated month
and second being the calculated year
after applying the month increment/decrement as specified by 'incr' parameter.
'incr' will normally have 1/-1 to navigate thru the months.
*/
var ret_arr = new Array();

if (incr == -1) {
// B A C K W A R D
if (p_Month == 0) {
ret_arr[0] = 11;
ret_arr[1] = parseInt(p_Year) - 1;
}
else {
ret_arr[0] = parseInt(p_Month) - 1;
ret_arr[1] = parseInt(p_Year);
}
} else if (incr == 1) {
// F O R W A R D
if (p_Month == 11) {
ret_arr[0] = 0;
ret_arr[1] = parseInt(p_Year) + 1;
}
else {
ret_arr[0] = parseInt(p_Month) + 1;
ret_arr[1] = parseInt(p_Year);
}
}

return ret_arr;
}

function Calendar_calc_month_year(p_Month, p_Year, incr) {
/*
Will return an 1-D array with 1st element being the calculated month
and second being the calculated year
after applying the month increment/decrement as specified by 'incr' parameter.
'incr' will normally have 1/-1 to navigate thru the months.
*/
var ret_arr = new Array();

if (incr == -1) {
// B A C K W A R D
if (p_Month == 0) {
ret_arr[0] = 11;
ret_arr[1] = parseInt(p_Year) - 1;
}
else {
ret_arr[0] = parseInt(p_Month) - 1;
ret_arr[1] = parseInt(p_Year);
}
} else if (incr == 1) {
// F O R W A R D
if (p_Month == 11) {
ret_arr[0] = 0;
ret_arr[1] = parseInt(p_Year) + 1;
}
else {
ret_arr[0] = parseInt(p_Month) + 1;
ret_arr[1] = parseInt(p_Year);
}
}

return ret_arr;
}

// This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.
new Calendar();

Calendar.prototype.getMonthlyCalendarCode = function() {
var vCode = "";
var vHeader_Code = "";
var vData_Code = "";

// Begin Table Drawing code here..
vCode += ("<div align=center><TABLE BORDER=1 BGCOLOR=\"" + this.gBGColor + "\" style='font-size:" + fontsize + "pt;'>");

vHeader_Code = this.cal_header();
vData_Code = this.cal_data();
vCode += (vHeader_Code + vData_Code);

vCode += "</TABLE></div>";

return vCode;
}

Calendar.prototype.show = function() {
var vCode = "";

// build content into global var ggWinContent
ggWinContent += ("");
ggWinContent += (this.gMonthName + " " + this.gYear);
ggWinContent += " ";

// Show navigation buttons
var prevMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, -1);
var prevMM = prevMMYYYY[0];
var prevYYYY = prevMMYYYY[1];

var nextMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, 1);
var nextMM = nextMMYYYY[0];
var nextYYYY = nextMMYYYY[1];

ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
ggWinContent += ("[<A style='font-size: 8pt' HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go back one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)-1) + "', '" + this.gFormat + "'" +
");" +
"\"><<Year<\/A>]</TD><TD ALIGN=center>");
ggWinContent += ("[<A style='font-size: 8pt' HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go back one month'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + prevMM + "', '" + prevYYYY + "', '" + this.gFormat + "'" +
");" +
"\"><Mon<\/A>]</TD><TD ALIGN=center>");
ggWinContent += " </TD><TD ALIGN=center>";
ggWinContent += ("[<A style='font-size: 8pt' HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go forward one month'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + nextMM + "', '" + nextYYYY + "', '" + this.gFormat + "'" +
");" +
"\">Mon><\/A>]</TD><TD ALIGN=center>");

ggWinContent += ("[<A style='font-size: 8pt' HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go forward one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)+1) + "', '" + this.gFormat + "'" +
");" +
"\">Year>><\/A>]</TD></TR></TABLE> ");

// Get the complete calendar code for the month, and add it to the
// content var
vCode = this.getMonthlyCalendarCode();
ggWinContent += vCode;
}

Calendar.prototype.showY = function() {
var vCode = "";
var i;

ggWinContent += ""
ggWinContent += ("Year : " + this.gYear);
ggWinContent += " ";

// Show navigation buttons
var prevYYYY = parseInt(this.gYear) - 1;
var nextYYYY = parseInt(this.gYear) + 1;

ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go back one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +
");" +
"\"><<Year<\/A>]</TD><TD ALIGN=center>");
ggWinContent += " </TD><TD ALIGN=center>";
ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
"onMouseOver=\"window.status='Go forward one year'; return true;\" " +
"onMouseOut=\"window.status=''; return true;\" " +
"onClick=\"Build(" +
"'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +
");" +
"\">Year>><\/A>]</TD></TR></TABLE> ");

// Get the complete calendar code for each month.
// start a table and first row in the table
ggWinContent += ("<TABLE WIDTH='100%' BORDER=0 CELLSPACING=0 CELLPADDING=5 style='font-size:" + fontsize + "pt;'><TR>");
var j;
for (i=0; i<12; i++) {
// start the table cell
ggWinContent += "<TD ALIGN='center' VALIGN='top'>";
this.gMonth = i;
this.gMonthName = Calendar.get_month(this.gMonth);
vCode = this.getMonthlyCalendarCode();
ggWinContent += (this.gMonthName + "/" + this.gYear + " ");
ggWinContent += vCode;
ggWinContent += "</TD>";
if (i == 3 || i == 7) {
ggWinContent += "</TR><TR>";
}

}

ggWinContent += "</TR></TABLE> ";
}

Calendar.prototype.cal_header = function() {
var vCode = "";

vCode = vCode + "<TR>";
vCode = vCode + "<TD WIDTH='14%'>Sun</TD>";
vCode = vCode + "<TD WIDTH='14%'>Mon</TD>";
vCode = vCode + "<TD WIDTH='14%'>Tue</TD>";
vCode = vCode + "<TD WIDTH='14%'>Wed</TD>";
vCode = vCode + "<TD WIDTH='14%'>Thu</TD>";
vCode = vCode + "<TD WIDTH='14%'>Fri</TD>";
vCode = vCode + "<TD WIDTH='16%'>Sat</TD>";
vCode = vCode + "</TR>";

return vCode;
}

Calendar.prototype.cal_data = function() {
var vDate = new Date();
vDate.setDate(1);
vDate.setMonth(this.gMonth);
vDate.setFullYear(this.gYear);

var vFirstDay=vDate.getDay();
var vDay=1;
var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);
var vOnLastDay=0;
var vCode = "";

/*
Get day for the 1st of the requested month/year..
Place as many blank cells before the 1st day of the month as necessary.
*/
vCode = vCode + "<TR>";
for (i=0; i<vFirstDay; i++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "> </TD>";
}

// Write rest of the 1st week
for (j=vFirstDay; j<7; j++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + ">" +
"<A HREF='javascript:void(0);' " +
"onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
"onMouseOut=\"window.status=' '; return true;\" " +
// Corey Trager Jul 2005 - changed
// to allow form fields whose names have spaces in them
// "onClick=\"document." + this.gReturnItem + ".value='" +
"onClick=\"document.getElementById('"
+ (this.gReturnItem.substr(this.gReturnItem.indexOf(".")+1))
+ "').value='" +
this.format_data(vDay) +
"'; try{on_change()} catch(e){} ggPosX=-1;ggPosY=-1;nd();nd();\">" +
this.format_day(vDay) +
"</A>" +
"</TD>";
vDay=vDay + 1;
}
vCode = vCode + "</TR>";

// Write the rest of the weeks
for (k=2; k<7; k++) {
vCode = vCode + "<TR>";

for (j=0; j<7; j++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + ">" +
"<A HREF='javascript:void(0);' " +
"onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
"onMouseOut=\"window.status=' '; return true;\" " +
// Corey Trager Jul 2005 - changed
// to allow form fields whose names have spaces in them
// "onClick=\"document." + this.gReturnItem + ".value='" +
"onClick=\"document.getElementById('"
+ (this.gReturnItem.substr(this.gReturnItem.indexOf(".")+1))
+ "').value='" +
this.format_data(vDay) +
"'; try{on_change()} catch(e){} window.scroll(0,ggPosY);ggPosX=-1;ggPosY=-1;nd();nd();\">" +
this.format_day(vDay) +
"</A>" +
"</TD>";
vDay=vDay + 1;

if (vDay > vLastDay) {
vOnLastDay = 1;
break;
}
}

if (j == 6)
vCode = vCode + "</TR>";
if (vOnLastDay == 1)
break;
}

// Fill up the rest of last week with proper blanks, so that we get proper square blocks
for (m=1; m<(7-j); m++) {
if (this.gYearly)
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
"> </TD>";
else
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
">" + m + "</TD>";
}

return vCode;
}

Calendar.prototype.format_day = function(vday) {
var vNowDay = gNow.getDate();
var vNowMonth = gNow.getMonth();
var vNowYear = gNow.getFullYear();

if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
return ("" + vday + "");
else
return (vday);
}

Calendar.prototype.write_weekend_string = function(vday) {
var i;

// Return special formatting for the weekend day.
for (i=0; i<weekend.length; i++) {
if (vday == weekend[i])
return (" BGCOLOR=\"" + weekendColor + "\"");
}

return "";
}

Calendar.prototype.format_data = function(p_day) {
var vData;
var vMonth = 1 + this.gMonth;
vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;
var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();
var vFMon = Calendar.get_month(this.gMonth).toUpperCase();
var vY4 = new String(this.gYear);
var vY2 = new String(this.gYear.substr(2,2));
var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;

// corey - changed the date format specifiers to match C#

switch (this.gFormat) {
case "MM\/dd\/yyyy" :
vData = vMonth + "\/" + vDD + "\/" + vY4;
break;
case "MM\/dd\/yy" :
vData = vMonth + "\/" + vDD + "\/" + vY2;
break;
case "MM-dd-yyyy" :
vData = vMonth + "-" + vDD + "-" + vY4;
break;
case "yyyy-MM-dd" :
vData = vY4 + "-" + vMonth + "-" + vDD;
break;
case "MM-dd-yy" :
vData = vMonth + "-" + vDD + "-" + vY2;
break;
case "dd\/MMM\/yyyy" :
vData = vDD + "\/" + vMon + "\/" + vY4;
break;
case "dd\/MMM\/yy" :
vData = vDD + "\/" + vMon + "\/" + vY2;
break;
case "dd-MMM-yyyy" :
vData = vDD + "-" + vMon + "-" + vY4;
break;
case "dd-MMM-yy" :
vData = vDD + "-" + vMon + "-" + vY2;
break;
case "dd\/MMMM\/yyyy" :
vData = vDD + "\/" + vFMon + "\/" + vY4;
break;
case "dd\/MMMM\/yy" :
vData = vDD + "\/" + vFMon + "\/" + vY2;
break;
case "dd-MMMM-yyyy" :
vData = vDD + "-" + vFMon + "-" + vY4;
break;
case "dd-MMMM-yy" :
vData = vDD + "-" + vFMon + "-" + vY2;
break;
case "dd\/MM\/yyyy" :
vData = vDD + "\/" + vMonth + "\/" + vY4;
break;
case "dd\/MM\/yy" :
vData = vDD + "\/" + vMonth + "\/" + vY2;
break;
case "dd-MM-yyyy" :
vData = vDD + "-" + vMonth + "-" + vY4;
break;
case "dd.MM.yyyy" :
vData = vDD + "." + vMonth + "." + vY4;
break;
case "dd-MM-yy" :
vData = vDD + "-" + vMonth + "-" + vY2;
break;
case "dd.MM.yy" :
vData = vDD + "." + vMonth + "." + vY2;
break;
default :
vData = vMonth + "\/" + vDD + "\/" + vY4;
}

return vData;
}

function Build(p_item, p_month, p_year, p_format) {
gCal = new Calendar(p_item, p_month, p_year, p_format);

// Customize your Calendar here..
gCal.gBGColor="white";
gCal.gLinkColor="black";
gCal.gTextColor="black";
gCal.gHeaderColor="darkgreen";

// initialize the content string
ggWinContent = "";

// Choose appropriate show function
if (gCal.gYearly) {
// and, since the yearly calendar is so large, override the positioning and fontsize
// warning: in IE6, it appears that "select" fields on the form will still show
// through the "over" div; Note: you can set these variables as part of the onClick
// javascript code before you call the show_yearly_calendar function
if (ggPosX == -1) ggPosX = 10;
if (ggPosY == -1) ggPosY = 10;
if (fontsize == 8) fontsize = 6;
// generate the calendar
gCal.showY();
}
else {
gCal.show();
}

// if this is the first calendar popup, use autopositioning with an offset
if (ggPosX == -1 && ggPosY == -1) {
overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
CAPTION, "Select a date", OFFSETX, 20, OFFSETY, -20);
// save where the 'over' div ended up; we want to stay in the same place if the user
// clicks on one of the year or month navigation links
if ( (ns4) || (ie4) ) {
ggPosX = parseInt(over.left);
ggPosY = parseInt(over.top);
} else if (ns6) {
ggPosX = parseInt(over.style.left);
ggPosY = parseInt(over.style.top);
}
}
else {
// we have a saved X & Y position, so use those with the FIXX and FIXY options
overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
CAPTION, "Select a date", FIXX, ggPosX, FIXY, ggPosY);
}
window.scroll(ggPosX, ggPosY);
}

function show_calendar() {
/*
p_month : 0-11 for Jan-Dec; 12 for All Months.
p_year : 4-digit year
p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)
p_item : Return Item.
*/

p_item = arguments[0];
if (arguments[1] == null)
p_month = new String(gNow.getMonth());
else
p_month = arguments[1];
if (arguments[2] == "" || arguments[2] == null)
p_year = new String(gNow.getFullYear().toString());
else
p_year = arguments[2];
if (arguments[3] == null)
p_format = "YYYY-MM-DD";
else
p_format = arguments[3];

Build(p_item, p_month, p_year, p_format);
}

--------------------

Kalan de Vitall - Eternel roi de Scandinavie et d'Europe
Gloire et Pouvoir

naholyr	Ecrit le : Jeudi 14 Juin 2007 à 00h51
Ouf Groupe : Membre Messages : 423	En très simple et rapide (mais personnalisable) tu as ceci : http://www.mattkruse.com/javascript/calendarpopup/ En très propre et qui bouge (jQuery oblige ) tu as ceci : http://marcgrabanski.com/code/jquery-calendar/

zumba	Ecrit le : Jeudi 14 Juin 2007 à 10h49
Ouf Groupe : Membre Messages : 496	mille mercis, messeigneurs. tant que j'y suis une petite question technique : j'ai l'impression que le type de donnée timestamp de mysql n'a rien a voir avec les timestamp unix PHP, je me trompe ? en tout cas quand j'écris dans une cellule mysql une valeur générée avec la fonction php mktime(), la valeur en base est systématiquement 00-00-0000 00:00:00 D'ou ma question : dans quel type de donnée mysql faut il stocker un timestamp php ? -------------------- Z

Haiken	Ecrit le : Jeudi 14 Juin 2007 à 14h44
Ouf Groupe : Membre Messages : 360	INT. Le timestamp PHP, c'est un nombre, le timestamp mysql c'est plutôt une date (d'où le '00-00-0000 00:00:00') -------------------- Association Nainwak, aide & hébergement des jeux web Le Blog de l'assoc', encore mieux que l'assoc' tomate !

zumba	Ecrit le : Jeudi 14 Juin 2007 à 14h52
Ouf Groupe : Membre Messages : 496	ok merci, m'en doutais mais j'osais pas. tu me confirmes que int a un range assez grand pour stocker une date ? -------------------- Z

naholyr	Ecrit le : Jeudi 14 Juin 2007 à 17h23
Ouf Groupe : Membre Messages : 423	Tiens d'ailleurs puisqu'on a changé de sujet, quelqu'un a déjà fait la comparaison entre ces deux méthodes ? - un champ mysql INT pour stocker des timestamps, et le formatage pré-affichage via php/date() - un champ mysql DATETIME pour stocker des dates format "Y-m-d H:i:s", pour stocker une date formatée par php/date(), et le formatage pré-affichage via mysql/date_format() Au niveau technique on voit les intérêts/inconvénients (perso je préfère la seconde méthode, question de goûts j'imagine) mais au niveau perf ?

zumba	Ecrit le : Vendredi 15 Juin 2007 à 09h09
Ouf Groupe : Membre Messages : 496	j'imagine que ca dépend de l'usage enfin plutôt de la proportion d'usage entre utilisation visuelle (auquel cas je les stockerai plutôt en datetime) et utilisation logique (comparaison). Quoi que pour l'utilisation là encore ça dépend si elle est faite dans le php (ou il vaudrait mieux un timestamp int) ou dans les requetes (je pense que mysql doit avoir les opérateurs de comparaison sur les datetime)... bref, j'en sais foutrement rien. -------------------- Z

« Sujets + anciens | Programmer | Sujets + récents »