Alphadog
Neues Mitglied
Servus alle zusammen...
versuche gerade ein Formular mit einem JS Kalender zu erstellen, hab aber das Problem, dass sich der Kalender nicht da öffnet wo er sich öffnen soll ...
Er sollte normalerweise direkt unter dem Button aufgehen aber bei mir geht er am ende der Seite auf ...
Ach ja im IE geht er erst gar nich auf.
hier mal eben mein Code :
Den kalender könnt ihr euch hier:klickmich laden
vielen dank schonmal im vorraus für eure Hilfe ...
versuche gerade ein Formular mit einem JS Kalender zu erstellen, hab aber das Problem, dass sich der Kalender nicht da öffnet wo er sich öffnen soll ...
Er sollte normalerweise direkt unter dem Button aufgehen aber bei mir geht er am ende der Seite auf ...
Ach ja im IE geht er erst gar nich auf.
hier mal eben mein Code :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Brandl Callmanager</title>
<link rel="stylesheet" type="text/css" media="all" href="cal/skins/aqua/theme.css" title="Aqua" />
<style type="text/css">@import url(calendar-win2k-1.css);</style>
<script type="text/javascript" src="cal/calendar.js"></script>
<script type="text/javascript" src="cal/lang/calendar-en.js"></script>
<script type="text/javascript" src="cal/calendar-setup.js"></script>
<!-- helper script that uses the calendar -->
<script type="text/javascript">
var oldLink = null;
// code to change the active stylesheet
function setActiveStyleSheet(link, title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (oldLink) oldLink.style.fontWeight = 'normal';
oldLink = link;
link.style.fontWeight = 'bold';
return false;
}
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))
// if we add this call we close the calendar on single-click.
// just to exemplify both cases, we are using this only for the 1st
// and the 3rd field, while 2nd and 4th will still require double-click.
cal.callCloseHandler();
}
// And this gets called when the end-user clicks on the _selected_ date,
// or clicks on the "Close" button. It just hides the calendar without
// destroying it.
function closeHandler(cal) {
cal.hide(); // hide the calendar
// cal.destroy();
_dynarch_popupCalendar = null;
}
// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format, showsTime, showsOtherMonths) {
var el = document.getElementById(id);
if (_dynarch_popupCalendar != null) {
// we already have some calendar created
_dynarch_popupCalendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(1, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
if (typeof showsTime == "string") {
cal.showsTime = true;
cal.time24 = (showsTime == "24");
}
if (showsOtherMonths) {
cal.showsOtherMonths = true;
}
_dynarch_popupCalendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
_dynarch_popupCalendar.setDateFormat(format); // set the specified date format
_dynarch_popupCalendar.parseDate(el.value); // try to parse the text in field
_dynarch_popupCalendar.sel = el; // inform it what input field we use
// the reference element that we pass to showAtElement is the button that
// triggers the calendar. In this example we align the calendar bottom-right
// to the button.
_dynarch_popupCalendar.showAtElement(el.nextSibling, "Br"); // show the calendar
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
// If this handler returns true then the "date" given as
// parameter will be disabled. In this example we enable
// only days within a range of 10 days from the current
// date.
// You can use the functions date.getFullYear() -- returns the year
// as 4 digit number, date.getMonth() -- returns the month as 0..11,
// and date.getDate() -- returns the date of the month as 1..31, to
// make heavy calculations here. However, beware that this function
// should be very fast, as it is called for each day in a month when
// the calendar is (re)constructed.
function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
function flatSelected(cal, date) {
var el = document.getElementById("preview");
el.innerHTML = date;
}
function showFlatCalendar() {
var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler.
var cal = new Calendar(0, null, flatSelected);
// hide week numbers
cal.weekNumbers = false;
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("%A, %B %e");
// this call must be the last as it might use data initialized above; if
// we specify a parent, as opposite to the "showCalendar" function above,
// then we create a flat calendar -- not popup. Hidden, though, but...
cal.create(parent);
// ... we can show it here.
cal.show();
}
</script>
</head>
<body>
<?php
include 'mysql.php';
$strSQL="SELECT * FROM ".PREFIX."hp WHERE ID=".$_GET['ID'];
$erg=mysql_query($strSQL);
$daten=mysql_fetch_Array($erg);
?>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center">
<h1 align="center"><?php echo $daten[1]." - ".$daten[2]; ?></h1>
<form id="form2" name="form2" method="post" action=<?php echo "update.php?ID=".$daten[0] ?>>
<label>Seriennummer</label>
<p>
<input type="text" name="sn" value="<?php echo $daten[3]; ?>"/>
</p>
<label>Case-ID</label>
<p>
<input type="text" name="caseid" value="<?php echo $daten[7]; ?>"/>
</p>
<label>Vertragsnummer</label>
<p>
<input type="text" name="vn" value="<?php echo $daten[4]; ?>"/>
</p>
<label>Service - Agreement - ID</label>
<p>
<input type="text" name="said" value="<?php echo $daten[5]; ?>"/>
</p>
<label>Reaktionszeit</label>
<p>
<input type="text" name="rz" value="<?php echo $daten[8]; ?>"/>
</p>
<label>Ablaufbeschreibung</label>
<p>
<textarea name="todo" cols="50" rows="10"><?php echo $daten[9]; ?></textarea>
</p>
<label>Austausch </label>
<p>
<input type="text" name="austausch" id="austausch" size="30" value="<?php echo $daten[11]; ?>"/>
<input type="reset" value=" ... " onclick="return showCalendar('austausch', '%Y-%m-%d %H:%M:%S', '24', true);"><br />
</p>
<label>Rückruf</label>
<p>
<input name="rueckruf" type="checkbox" value="TRUE" />
</p>
<label>Erledigt</label>
<p>
<input name="erledigt" type="checkbox" value="TRUE" />
</p>
<label>Notizen</label>
<p>
<textarea name="notiz" cols="50" rows="10"><?php echo $daten[10]; ?></textarea>
</p>
<p>
<input name="Und ab dafür !" type="submit" id="Und ab dafür !" value="Und ab dafür !" />
</p>
</form> </td>
</tr>
</table>
</body>
</html>Den kalender könnt ihr euch hier:klickmich laden
vielen dank schonmal im vorraus für eure Hilfe ...