extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-24 17:04:14 +01:00
Code Issues Packages Projects Releases Wiki Activity
cecef59550
egroupware_official/phpgwapi/js/jscalendar/cal.html

382 lines
15 KiB
HTML
Raw Normal View History

reimported jsCal into phpgwapi/js now
2003-08-28 18:44:06 +02:00
<!--
< ? xml version="1.0" encoding="iso-8859-2" ? >
< ! DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<!-- $Id$ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">
<head>
<title>The Coolest DHTML Calendar - Online Demo</title>
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-blue.css" title="winter" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-brown.css" title="summer" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-green.css" title="green" />
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-1.css" title="win2k-1" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-2.css" title="win2k-2" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-cold-2.css" title="win2k-cold-2" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-system.css" title="system" />
<!-- for ro -->
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-2" />
<!-- import the calendar script -->
<script type="text/javascript" src="calendar.js"></script>
<!-- import the language module -->
<script type="text/javascript" src="lang/calendar-en.js"></script>
<!-- <script type="text/javascript" src="lang/calendar-ro.js"></script> -->
<!-- <script type="text/javascript" src="lang/calendar-da.js"></script> -->
<!-- <script type="text/javascript" src="lang/calendar-it.js"></script> -->
<!-- <script type="text/javascript" src="lang/calendar-fr.js"></script> -->
<!-- other languages might be available in the lang directory; please check
your distribution archive. -->
<!-- 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
}
// 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) {
var el = document.getElementById(id);
if (calendar != null) {
// we already have some calendar created
calendar.hide(); // so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(false, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
calendar.setDateFormat(format); // set the specified date format
calendar.parseDate(el.value); // try to parse the text in field
calendar.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.
calendar.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(false, null, flatSelected);
// hide week numbers
cal.weekNumbers = false;
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("DD, M d");
// 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>
<style type="text/css">
.ex { font-weight: bold; background: #fed; color: #080 }
.help { color: #080; font-style: italic; }
body { background: #fea; }
a { color: #00f; }
a:visited { color: #00f; }
a:hover { color: #f00; background: #fefaf0; }
a:active { color: #08f; }
.key { border: 1px solid #000; background: #fff; color: #008;
padding: 0px 5px; cursor: default; font-size: 80%; }
</style>
</head>
<body onload="showFlatCalendar()">
<h2>The coolest DHTML calendar, v. 0.9.3 "It's still alife"</h2>
<p>Theme
[
<a href="#" onclick="return setActiveStyleSheet(this, 'winter');">winter</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'summer');">summer</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'green');">green</a>
|
<a href="#" id="defaultTheme" onclick="return setActiveStyleSheet(this, 'win2k-1');">win2k-1</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-2');">win2k-2</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-1');">win2k-cold-1</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'win2k-cold-2');">win2k-cold-2</a>
|
<a href="#" onclick="return setActiveStyleSheet(this, 'system');">system</a>
<script type="text/javascript">
setActiveStyleSheet(document.getElementById("defaultTheme"), "win2k-1");
</script>
]
<br />
<a href="release-notes.html">Release notes for 0.9.3</a>
<br />
Setup a calendar in minutes:
<a href="simple-1.html">popup calendar</a>,
<a href="simple-2.html">flat calendar</a>.
<br />
Documentation:
<a href="doc/html/reference.html">HTML</a>,
<a href="doc/reference.pdf">PDF</a>
</p>
<div style="
float: right;
padding: 5px;
margin: 5px;
border: 1px solid #984;
background: #ed9;
">
<div style="background: #984; color: #fea;
font-weight: bold; padding: 2px; text-align: center">
Flat calendar
</div>
<p style="width: 12em"><small>A non-popup version will appear below as soon
as the page is loaded. Note that it doesn't show the week number.</small></p>
<!-- the calendar will be inserted here -->
<div id="display"></div>
<div id="preview" style="font-size: 80%; text-align: center; padding: 2px"></div>
<p style="width: 12em"><small>
The example above uses the <code>setDisabledHandler()</code> member function
to setup a handler that would only enable days withing a range of 10 days,
forward or backward, from the current date.
</small></p>
</div>
<div style="padding-left:20px; font-size: 90%; font-style: italic;">
<p><span style="color: red">Easy I18N</span>: all messages are separate JS
files (see <a href="lang/calendar-en.js">calendar-en.js</a> for an example).
Check the lang directory in your distribution archive to see what languages
are available. You just need to include the right one from the HTML
page.</p>
<p><span style="color: red">NOTE:</span> I made the English and Romanian
versions only. The other lang files were submitted by people. I thank them
very much, and you should too! :) Unfortunately, I lost track of these files
and the persons who sent them, so if you send me a translation file please
include a small comment with your name and email address, as you are the
author. Also, a statement that the file is distributed under the GNU LGPL
would be welcome :)</p>
</div>
<form action="#">
<div style="background: #ffa; padding: 5px; border: 1px solid #995;">
<div style="background: #995; color: #ffa;
font-weight: bold; padding: 2px;">
Popup examples
</div>
<br />
<b>Date #1:</b> <input type="text" name="date1" id="sel1" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel1', 'y-m-d [ww]');"> [<b>y-m-d [ww]</b>] -- single
click<br />
<b>Date #2:</b> <input type="text" name="date2" id="sel2" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel2', 'DD, MM d, y');"> [<b>DD, MM d, y</b>]
-- double click
<br /><br />
<!--
if you remove this comment and leave the following HTML code
you will see a horrible effect, in all supported browsers (IE and Mozilla).
-->
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
this select should hide when the calendar is above it.
<br /><br />
<b>Date #3:</b> <input type="text" name="date3" id="sel3" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel3', 'dd/mm/y');"> [<b>dd/mm/y</b>]
-- single click
<br />
<b>Date #4:</b> <input type="text" name="date4" id="sel4" size="30"
><input type="reset" value=" ... "
onclick="return showCalendar('sel4', 'D, M d, y');"> [<b>D, M d, y</b>] --
double click
</div>
</form>
<p>You can find more information about this script (and how to use/customize
it) <a href="http://students.infoiasi.ro/~mishoo/site/calendar.epl">on my
page</a>.</p>
<p>This is release <b>0.9.3</b>. Works on MSIE 5.0, 5.5, 6.0, Opera 7,
Mozilla, Netscape 6.x, 7.0 and all other Gecko-s.</p>
<p class="help">You can click on "Mo"/"Su" (first day name displayed) to
change the first day of week (Sunday/Monday) (since 0.8 this is also mapped
on the "-" button in the top-left corner). Use the navigation buttons
("&lt;&lt;", "&lt;", "Today", "&gt;", "&gt;&gt;") to move to the prev/next
year/month. Keep the mouse button pressed for a short time over one of
these buttons to get a menu for faster selection. You can drag the "status
bar" (that's where the tooltips appear) or title bar (that's where the
currently selected month/year shows up) to move the whole calendar.</p>
<h4>Keyboard navigation</h4>
<p>Starting with version 0.9.2, you can also use the keyboard to select
dates (only for popup calendars; does <em>not</em> work with Opera
7). The following keys are available:</p>
<ul>
<li><span class="key">&larr;</span> , <span class="key">&rarr;</span> ,
<span class="key">&uarr;</span> , <span class="key">&darr;</span> -- select date</li>
<li><span class="key">CTRL</span> + <span class="key">&larr;</span> ,
<span class="key">&rarr;</span> -- select month</li>
<li><span class="key">CTRL</span> + <span class="key">&uarr;</span> ,
<span class="key">&darr;</span> -- select year</li>
<li><span class="key">SPACE</span> -- go to <em>today</em> date</li>
<li><span class="key">ENTER</span> -- accept the currently selected date</li>
<li><span class="key">ESC</span> -- cancel selection</li>
</ul>
<h4>Date formatting</h4>
<small>
<ul>
<li><b>d</b> -- the date ( ex: <span class="ex">1 .. 31</span> )
<li><b>dd</b> -- the date, zero padded ( ex: <span class="ex">01 .. 31</span> )
<li><b>m</b> -- month as a number ( ex: <span class="ex">1 .. 12</span> )
<li><b>mm</b> -- month, zero padded ( ex: <span class="ex">01 .. 12</span> )
<li><b>y</b> -- 4 digit year ( ex: <span class="ex">1979</span> )
<li><b>yy</b> -- 2 digit year, <bb>yy</bb> - 1900 ( ex: <span class="ex">79</span> ) (USING THIS IS NOT RECOMMENDED)
<li><b>w</b> -- the number of the week in the year (1 or 2 digits)
<li><b>ww</b> -- the number of the week, zero padded (2 digits)
<li><b>D</b> -- short weekday name ( ex: <span class="ex">Sun, Wed, Fri</span> )
<li><b>DD</b> -- long weekday name ( ex: <span class="ex">Sunday, Wednesday, Friday</span> )
<li><b>M</b> -- short month name ( ex: <span class="ex">Mar, Jan, Oct</span> )
<li><b>MM</b> -- long month name ( ex: <span class="ex">March, January, October</span> )
</ul>
</small>
<h4>Date parsing</h4>
<p>The algorithm will first try to read the date in the specified
format.</p>
<p>If it doesn't work, it will try different methods to recognize a valid
date -- general behavior is: if some part of the input is the <em>name</em>
of a month, i.e. "Mar", then that will be considered the month, the
next/previous 1 .. 31 number will be considered the date and the next big
number (hopefully there) will be the year; if it's missing we assume the
current year. If no such name exists, then the first 1 .. 12 number will be
taken as the month, the next 1 .. 31 as the date; year selection is the same
as discussed.</p>
<p>Examples: <span class="ex">3/8/1979</span> as well as <span class="ex">03
08 79</span> as well as <span class="ex">1979 mar 8</span>, as well as <span
class="ex">79+3+8</span> will all lead to the same date: my birthday (March
8, 1979). To try the algo, just input the date using whatever format you
like in one of the fields above and click on the "..." button. The calendar
that shows up should contain your date, otherwise you and this algorithm
don't get too well together :)</p>
<hr /><address> Author: <a href="http://students.infoiasi.ro/~mishoo/">Mihai
Bazon</a> &copy; 2002<br /> Feel free to use / redistribute under the <a
href="http://www.gnu.org/licenses/lgpl.html">GNU LGPL</a>.<br /> Please no
<b>not</b> remove or alter the comment at the script start.</address>
<p style="font-size: smaller">If you use this script on a public page it
would be nice if you would <a href="mailto:mishoo@infoiasi.ro">let me
know</a>.</p>
</body></html>
Reference in New Issue Copy Permalink