|
JavaScript - Calendar Not Working
Code:
<?
if (isset($_COOKIE["ValidUserAdmin"]))
{
require "config.php";
require "config1.php";// connection to database
include "header_purchase.php";
$auth = ($_COOKIE["ValidUserAdmin"]);
$sys_date1= date("Y/m/d");
?>
<html><head><title></title>
<style rel="stylesheet" type="text/css">
table.calendar {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.8em;
border-collapse: collapse;
background-color: white;
border: solid #999999 1px;
background-color: white;
width: 200px;
text-align: center;
/*prevent user from selecting text in Mozilla & Safari - check calendar constructor for IE code)*/
-moz-user-select: none;
/*-khtml-user-select: none;*/
}
table.calendar input, table.calendar select {
font-size: 10px;
}
table.calendar td {
border: 0;
font-size: 10px;
text-align: center;
}
div.mainheading {
margin: 2px;
}
table.caldayheading {
border-collapse: collapse;
cursor: pointer;
empty-cells: show;
margin: 0 6px 0 6px;
}
table.caldayheading td {
border: solid #CCCCCC 1px;
text-align: left;
color: #0054E3;
font-weight: bold;
width: 22px; /*should match calendar cell's width*/
}
table.caldayheading td.wkhead {
border-right: double #CCCCCC 3px;
}
table.calcells {
border-collapse: collapse;
cursor: pointer;
margin: 0 6px 0 6px;
}
table.calcells td {
border: solid #CCCCCC 1px;
vertical-align: top;
text-align: left;
font-weight: bold;
width: 22px;
height: 20px; /*IE doesn't like ems*/
}
table.calcells td div {
padding: 1px;
margin: 0;
}
table.calcells td.wkhead {
background-color: white;
text-align: center;
border-right: double #CCCCCC 3px;
color: #0054E3;
}
table.calcells td.wkday {
background-color: #DDDDDD;
}
table.calcells td.wkend {
background-color: #DDDDDD;
}
table.calcells td.curdate {
}
table.calcells td.cell_selected {
background-color: #99CCFF;
color: black;
}
table.calcells td.notmnth {
background-color: #FFFFFF;
color: #CCCCCC;
}
table.calcells td.notallowed {
background-color: white;
color: #EEEEEE;
font-style: italic;
}
table.calcells td.hover {
background-color: #999999;
}
</style>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
var bas_cal,dp_cal,ms_cal;
window.onload = function () {
dp_cal = new Epoch('epoch_popup','popup',document.getElementById('sale_date'));
dp_cal = new Epoch('epoch_popup','popup',document.getElementById('invc_date'));
}
</script>
<script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script>
</head>
<body >
<table id="page">
<tr><td>
<br>
<a name="AddNew"></a>
Enter the details on the new Outgoing Transaction in the spaces below. You only need to add the amount in Rs click on the 'Add Outgoing' button.<br>
<BR> <form name="form1" method="post">
<input name="op" type="hidden" value="OutgoingTransactionAdd">
<input name="DateAdded" type="hidden" value="<?php print "$dateadded"; ?>">
<TABLE class="tbl" width="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="1" BGCOLOR="#E4EEE3">
<TR>
<TD colspan="4"><strong>Purchase Details </strong></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Vendor <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <? $query1 = "SELECT distinct ven_name from aa_vendor1 where cleared='cleared' ";
$result1 = mysql_query($query1);
if(!$result1)
{
echo "The query failed " . mysql_error();
} else {
echo "<select name='dropdown1' onChange='AjaxFunction(document.form1.dropdown1.options[document.form1.dropdown1.selectedIndex].text);'>";
?> <option value=""> Select One </option> <?
while($row = mysql_fetch_array($result1, MYSQL_ASSOC))
{
$select= $row['Bank_custom'];
echo"<option value='". $row['ven_name']."'>" .$row['ven_name'] . "</option>";
}
echo"</select>";
}
?>
</TD>
<td bgcolor="#FFFFFF">Product <span style="color:#FF0000"> * </span></td>
<td bgcolor="#FFFFFF"> <select name="product"> </select></td>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Vendor Invoice No <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="TEXT" name="ven_inv_no" size="15" maxlength="15"></TD>
<td bgcolor="#FFFFFF">Invoice Amount <span style="color:#FF0000"> * </span></td>
<td bgcolor="#FFFFFF"> <input type="TEXT" name="ven_inv_amnt" size="15" maxlength="15"></td>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Invoice Date <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF" colspan="3"> <INPUT id="invc_date" NAME="invc_date" TYPE="text" size="15" readonly="yes" />
<INPUT NAME="rec_date" TYPE="hidden" size="20" value="<? echo $todaydate ?>" /></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"> Comments </TD>
<TD BGCOLOR="#FFFFFF" colspan="3">
<span> </span><textarea white-space:nowrap;overflow:auto; rows="3" cols="40" type="TEXT" name="comment_prchs"></textarea>
</TD>
</TR>
<TR> <TD colspan="4"><a name="AddNew"><strong>Sale Details </strong></a></TD> </TR>
<TR>
<TD height="24" BGCOLOR="#FFFFFF">Client Name <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="text" name="client_name" size="30" onClick="make_blank();"></TD>
<TD BGCOLOR="#FFFFFF">Sale Invoice No <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="TEXT" name="sales_inv_no" size="15"> </TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Sale Amount <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="TEXT" name="sale_amt" size="15" > </TD>
<TD BGCOLOR="#FFFFFF">Sale Date <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <INPUT id="sale_date" NAME="sale_date" TYPE="text" size="15" readonly="yes" /></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Status <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <select id="sts" name="status" onChange="paid(document.form1.status.options[document.form1.status.selectedIndex].text);">
<option>Pending</option>
<option>Paid</option>
<option>Defaulted</option>
</select>
</TD>
<td bgcolor="#FFFFFF"><div id="rcp1" style="display:none">Receipt<span style="color:#FF0000"> * </span></div></td>
<td bgcolor="#FFFFFF"><div id="rcp2" style="display:none"> <input id="rcp3" type="TEXT" name="receipt" size="15" ></div></td>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"> Comments </TD>
<TD BGCOLOR="#FFFFFF" colspan="3">
<span> </span><textarea white-space:nowrap;overflow:auto; rows="3" cols="40" type="TEXT" name="comment1" ></textarea>
</TD>
</TR>
<TR>
<TD align="center" colspan="4"> <input name="SUBMIT" type="SUBMIT" value="Add" onClick="return validate();"></TD>
</TR>
</TABLE>
</FORM>
<script language="JavaScript" type="text/javascript">
function validate(){
var frmvalidator = new Validator("form1");
var stts = document.getElementById("sts")
var rcpp = document.getElementById("rcp3")
frmvalidator.addValidation("client_name","req","Please enter your Client Name");
frmvalidator.addValidation("client_name","maxlen=100",
"Max length for client name is 100");
frmvalidator.addValidation("client_name","alphanumeric_space");
frmvalidator.addValidation("sale_amt","maxlen=50");
frmvalidator.addValidation("sale_amt","dec");
frmvalidator.addValidation("sale_amt","req","Please enter your Sales Amount");
frmvalidator.addValidation("sales_inv_no","maxlen=10");
frmvalidator.addValidation("sales_inv_no","alnum");
frmvalidator.addValidation("sales_inv_no","req","Please enter your Sales Invoice Number");
frmvalidator.addValidation("sale_date","req","Please enter your Sales Date");
frmvalidator.addValidation("dropdown1","req","Please select your Vendor Name");
frmvalidator.addValidation("ven_inv_no","maxlen=10");
frmvalidator.addValidation("ven_inv_no","alnum");
frmvalidator.addValidation("ven_inv_no","req","Please enter your Vendor Invoice Number");
frmvalidator.addValidation("ven_inv_amnt","maxlen=10");
frmvalidator.addValidation("ven_inv_amnt","dec");
frmvalidator.addValidation("ven_inv_amnt","req","Please enter your Vendor Invoice Amount");
frmvalidator.addValidation("invc_date","maxlen=10");
frmvalidator.addValidation("invc_date","req","Please enter your Vendor Invoice Date");
if(stts.value == "Paid" && rcpp.value=="")
{
alert("Enter Your Receipt no.");
return false;
}
}
</script>
<BR>
<br>
<?php
if (isset($_POST["op"]) && ($_POST["op"]=="OutgoingTransactionAdd"))
{
if(empty($_POST['client_name'])){
echo "<b style='color:red'>*Fields Are Empty</b>";
exit;
}
mysql_connect($server, $DBusername, $DBpassword) or die ("$DatabaseError - 33");
mysql_select_db($database);
mysql_query("INSERT INTO $incoming_table1(id,DateAdded,client_name,sale_amt,sale_date,sales_inv_no,rec_date,ven_name,product,ven_inv_no,ven_inv_amnt,status,comment1,prepared_by,inv_date,rec_no,sys_date1,comment_prchs)
VALUES ('',
'".$_POST['DateAdded']."',
'".$_POST['client_name']."',
'".$_POST['sale_amt']."',
'".$_POST['sale_date']."',
'".$_POST['sales_inv_no']."',
'".$_POST['rec_date']."',
'".$_POST['dropdown1']."',
'".$_POST['product']."',
'".$_POST['sales_inv_no']."',
'".$_POST['ven_inv_amnt']."',
'".$_POST['status']."',
'".$_POST['comment1']."',
'".$username."',
'".$_POST['invc_date']."',
'".$_POST['receipt']."',
'".$sys_date1."',
'".$_POST['comment_prchs']."')") or die ("$DatabaseError - 35");
print "<p align=\"center\"><font color=red>The Transaction has been added to the system</font></p>";
print "<p align=\"center\"><a href=\"123.php\">Refresh Details</a></p>";
}
?>
</td>
</tr>
</table>
<TABLE WIDTH="100%" CELLPADDING="1" CELLSPACING="1" BGCOLOR="<?php print "$HRColour"; ?>">
<TR>
<TD></TD>
</TR>
</TABLE>
<P ALIGN="CENTER" CLASS="copyright"><?php print "$Copyright"; ?></P>
</body>
</html>
<?
}
else
{
print "<p>Unauthorised Admin access - <a href=\"http://expense.webhop.org\">Click Here to Login</></p>";
}
?>
Similar Tutorialshi all, I need one script for the change of month & year the data of the month and year is changed in iframe. like when ever we select the month and date the calender is changing like that i frame content t be change. I don't have any knowledge of apps but would like to get one like this and be able to change/add info to it myself, where/how can I go about doing this please?
I have a page of dates in a form field which currently are being entered manually and wish to have a calendar pop up for each one to make it a bit easier. i have managed to use a calendar routine 'tigra calendar' i found online but now after working out not to get it working within my own template i faced the problem on multiple date fields. i currently use a numbers field 1-10 or how every many there needs to be on that page. but how would i integrate this within the coding from 'tigra calendar' can anyone suggest a better way to do this. if needed i can sort out a zip file of the files i have for tigra calendar. Hi guys, I'm a newbie so bear with me please. I downloaded this calendar which is now working great: JavaScript Calendar - Digital Christian Design (http://www.javascriptkit.com). Does anyone know how to change the date format from mm/dd/yyyy to dd/mm/yyyy? Also, is it possible to have links on such a calendar? I.e. in the event descriptions? Thanks. Hey All, I've currently working on making a calendar for my website. How do I go about creating a password for it? So that the admin can add events to it. Cheers Guys!!! I have a calendar that gets pulled up via javascript. It allows someone to pick a date in a form with this little calendar icon that pops up. However, I am trying to make certain days of the week not available. If I wanted to make Tuesdays and Thursdays not available, where would I edit it? Here is the lengthy code http://www.happydogwebproductions.com/CFcalendar.js It was too long to post here. Thanks for any help Hi everyone, I am looking to insert a 225x200 pixel monthly calendar on a webpage. I would like it to just show one month but you can click a down arrow to show a different month. I also would like each day to be changed to a different color (I am going to put in a legend at the bottom with different topics color-coded where the user can see the date and click the topic to learn more). If anyone can help with this code it would be much appreciated! Thanks DvdBonan I am supposed to create a calendar and have the calendar show up in the top right of the screen while also highlighting the current date set on it. Nothing shows up... HTM: Code: <?xml version="1.0" encoding="UTF-8" ?>
<!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">
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
The Chamberlain Civic Center
Author:
Date:
Filename: ccc.htm
Supporting files: back.jpg, calendar.css, calendar.js, ccc.css, ccc.jpg, logo.gif
-->
<title>The Chamberlain Civic Center</title>
<link href="ccc.css" rel="stylesheet" type="text/css" />
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="head">
<script type="text/javascript">
calendar("March 25, 2011");
</script>
<img src="ccc.jpg" alt="Chamberlain Civic Center" />
</div>
<div id="links">
<table><tr>
<td><a href="#">Home</a></td><td><a href="#">Tickets</a></td>
<td><a href="#">Events</a></td><td><a href="#">Tour</a></td>
<td><a href="#">Directions</a></td><td><a href="#">Hours</a></td>
<td><a href="#">Packages</a></td><td><a href="#">Contact Us</a></td>
</tr></table>
</div>
<div id="main">
<p id="firstp"><img src="photo.jpg" alt="" />March is another banner month
at the Chamberlain Civic Center, with performances of the award-winning
musical, <span>The Producers</span> by the Broadway Touring Company on
March 4, 5, and 6. Tickets are going fast, so order yours today.</p>
<p>Celebrate the season on March 11 with the Chamberlain Symphony and their
special selection of classical music with Spring themes. The next day,
March 12, exercise your mind by attending the Charles Dickens mystery
<span>Edwin Drood</span>.</p>
<p>Jazz lovers have a lot to celebrate in March with a visit from <span>The
Jazz Masters</span> on the 17th. Then on March 24, enjoy the music of The
Duke with <span>An Ellington Tribute</span> performed by the Jazz Company
of Kansas City.</p>
<p>Pins, bottles, plates, and chairs are flying at the Chamberlain Civic
Center in March. <span>The Taiwan Acrobats</span> return with another
amazing performance on Sunday, March 13. On March 20, the <span>Madtown
Jugglers</span> get into the act with their unique blend of comedy, juggling,
and madness.</p>
<p>Enjoy a classical brunch every Sunday afternoon with music provided by the
Carson Quartet. Seating is limited, so please reserve your table.</p>
</div>
<address>
The Chamberlain Civic Center ·
2011 Canyon Drive ·
Chamberlain, SD 57325 ·
(800) 555-8741
</address>
</body>
</html>
Java Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Author:
Date:
Function List:
calendar(calendarDay)
Creates the calendar table for the month specified in the
calendarDay parameter. The current date is highlighted in
the table.
writeCalTitle(calendarDay)
Writes the title row in the calendar table
writeDayTitle()
Writes the weekday title rows in the calendar table
daysInMonth(calendarDay)
Returns the number of days in the month from calendarDay
writeCalDays(calendarDay)
Writes the daily rows in the calendar table, highlighting
calendarDay
*/
function calendar(calendarDay) {
if (calendarDay == null) calDate=new Date()
else calDate = new Date(calendarDay);
document.write("<table id='calendar_table'>");
writeCalTitle(calDate);
writeDayNames();
writeCalDays(calDate);
document.write("</table>");
}
function writeCalTitle(calendarDay) {
var monthName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "Octoboer", "November", "December");
var thisMonth=calendarDay.getMonth();
var thisYear=calendarDay.getFullYear();
document.write("<tr>");
document.write("<th id='calendar_head' colspan='7'>");
document.write(monthName[thisMonth]+" "+thisYear);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
document.write("<tr>");
for (var i=0; i < dayName.length; i++) {
document.write("<th class='calendar_weekdays'> "+dayName[i]+"</th>");
}
document.write("</tr>");
}
function daysInMonth(calendarDay) {
var thisYear = calendarDay.getFullYear();
var thisMonth = calendarDay.getMonth();
var dayCount = new Array (31,28,31,30,31,30,31,31,30,31,30,31);
if (thisYear % 4 == 0) {
if ((thisYear % 100 != 0) || (thisYear % 400 == 0)) {
dayCount[1] = 29;
}
}
return dayCount[thisMonth];
}
function writeCalDays(calendarDay) {
var currentDay = calendarDay.getDate();
var dayCount = 1;
var totalDays = daysInMonth(calendarDay);
calendarDay.setDate(1);
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i=0; i < weekDay; i++) {
document.write("<td></td>");
}
while (dayCount <= totalDays) {
if (weekDay == 0) document.write("<tr>");
if (dayCount == currentDay) {
document.write("<td class='calendar_dates' id='calendar_today'>"+dayCount+"</td>");
} else {
document.write("<td class='calendar_dates'>"+dayCount+"</td>");
}
if (weekDay == 6) document.write("</tr>");
dayCount++;
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
}
document.write("</tr>");
}
CSS (calendar) Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Filename: calendar.css
This file contains styles applied to the calendar table
*/
#calendar_table {float: right; background-color: white; font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
border-style: outset; border-width: 5px; margin: 0px 0px 5px 5px}
#calendar_head {background-color: rgb(223,29,29); color: ivory; letter-spacing: 2px}
.calendar_weekdays {width: 30px; font-size: 10pt; border-bottom-style: solid}
.calendar_dates {text-align: center; background-color: white}
#calendar_today {font-weight: bold; color: rgb(223,29,29); background-color: ivory;
border: 1px solid black}
CSS (page) Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Filename: ccc.css
This file contains styles used in the ccc.htm file
*/
body {margin: 0px; background: white url(back.jpg) repeat-y scroll 820px 0px}
#head {width: 750px; height: 150px; padding: 5px}
#links {clear: right; width: 750px; padding: 0px}
#links table {width: 750px; font-family: Arial, Helvetica, sans-serif;
font-size: 8pt; margin: 0px}
#links table td {text-align: center; background-color: white;
border: 1px solid black; letter-spacing: 5; padding: 2px}
#links table a {text-decoration: none; color: rgb(223,29,29); width: 100%}
#links table a:hover {color: white; background-color: rgb(223,29,29)}
#main {width: 750px; font-family: Arial, Helvetica, sans-serif; padding: 10px}
#main p {text-align: justify; font-size: 9pt}
#firstp:first-line {font-variant: small-caps}
#main img {float: right; margin: 0px 0px 10px 10px}
#main p span {color: rgb(223,29,29)}
address {width: 750px; font-size: 8pt; font-style: normal; color: rgb(223,29,29);
font-family: Arial, Helvetica, sans-serif; text-align: center;
border-top: 1px solid rgb(223,29,29); padding-bottom: 10px}
Can anyone see something wrong? This is really frustrating me as I'm not very good with javascript but thought I did this one right... So i have some code that will show a pop up calendar for a date field in my web form. After the date is selected from the calendar it displays in the input box in the form mm-dd-yyyy. I need it to be in the form yyyy-mm-dd, i've looked through the code and tried to figure it out but havent had any luck yet. Any ideas? Code: function positionInfo(object) {
var p_elm = object;
this.getElementLeft = getElementLeft;
function getElementLeft() {
var x = 0;
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
while (elm != null) {
if(elm.style.position == 'relative') {
break;
}
else {
x += elm.offsetLeft;
elm = elm.offsetParent;
}
}
return parseInt(x);
}
this.getElementWidth = getElementWidth;
function getElementWidth(){
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetWidth);
}
this.getElementRight = getElementRight;
function getElementRight(){
return getElementLeft(p_elm) + getElementWidth(p_elm);
}
this.getElementTop = getElementTop;
function getElementTop() {
var y = 0;
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
while (elm != null) {
if(elm.style.position == 'relative') {
break;
}
else {
y+= elm.offsetTop;
elm = elm.offsetParent;
}
}
return parseInt(y);
}
this.getElementHeight = getElementHeight;
function getElementHeight(){
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetHeight);
}
this.getElementBottom = getElementBottom;
function getElementBottom(){
return getElementTop(p_elm) + getElementHeight(p_elm);
}
}
function CalendarControl() {
var calendarId = 'CalendarControl';
var currentYear = 0;
var currentMonth = 0;
var currentDay = 0;
var selectedYear = 0;
var selectedMonth = 0;
var selectedDay = 0;
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var dateField = null;
function getProperty(p_property){
var p_elm = calendarId;
var elm = null;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if (elm != null){
if(elm.style){
elm = elm.style;
if(elm[p_property]){
return elm[p_property];
} else {
return null;
}
} else {
return null;
}
}
}
function setElementProperty(p_property, p_value, p_elmId){
var p_elm = p_elmId;
var elm = null;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if((elm != null) && (elm.style != null)){
elm = elm.style;
elm[ p_property ] = p_value;
}
}
function setProperty(p_property, p_value) {
setElementProperty(p_property, p_value, calendarId);
}
function getDaysInMonth(year, month) {
return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
}
function getDayOfWeek(year, month, day) {
var date = new Date(year,month-1,day)
return date.getDay();
}
this.clearDate = clearDate;
function clearDate() {
dateField.value = '';
hide();
}
this.setDate = setDate;
function setDate(year, month, day) {
if (dateField) {
if (month < 10) {month = "0" + month;}
if (day < 10) {day = "0" + day;}
var dateString = month+"-"+day+"-"+year;
dateField.value = dateString;
hide();
}
return;
}
this.changeMonth = changeMonth;
function changeMonth(change) {
currentMonth += change;
currentDay = 0;
if(currentMonth > 12) {
currentMonth = 1;
currentYear++;
} else if(currentMonth < 1) {
currentMonth = 12;
currentYear--;
}
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}
this.changeYear = changeYear;
function changeYear(change) {
currentYear += change;
currentDay = 0;
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}
function getCurrentYear() {
var year = new Date().getYear();
if(year < 1900) year += 1900;
return year;
}
function getCurrentMonth() {
return new Date().getMonth() + 1;
}
function getCurrentDay() {
return new Date().getDate();
}
function calendarDrawTable() {
var dayOfMonth = 1;
var validDay = 0;
var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
var daysInMonth = getDaysInMonth(currentYear, currentMonth);
var css_class = null; //CSS class for each day
var table = "<table cellspacing='0' cellpadding='0' border='0'>";
table = table + "<tr class='header'>";
table = table + " <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'><</a> <a href='javascript:changeCalendarControlYear(-1);'>«</a></td>";
table = table + " <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
table = table + " <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>»</a> <a href='javascript:changeCalendarControlMonth(1);'>></a></td>";
table = table + "</tr>";
table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";
for(var week=0; week < 6; week++) {
table = table + "<tr>";
for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
if(week == 0 && startDayOfWeek == dayOfWeek) {
validDay = 1;
} else if (validDay == 1 && dayOfMonth > daysInMonth) {
validDay = 0;
}
if(validDay) {
if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
css_class = 'current';
} else if (dayOfWeek == 0 || dayOfWeek == 6) {
css_class = 'weekend';
} else {
css_class = 'weekday';
}
table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
dayOfMonth++;
} else {
table = table + "<td class='empty'> </td>";
}
}
table = table + "</tr>";
}
table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
table = table + "</table>";
return table;
}
this.show = show;
function show(field) {
can_hide = 0;
// If the calendar is visible and associated with
// this field do not do anything.
if (dateField == field) {
return;
} else {
dateField = field;
}
if(dateField) {
try {
var dateString = new String(dateField.value);
var dateParts = dateString.split("-");
selectedMonth = parseInt(dateParts[0],10);
selectedDay = parseInt(dateParts[1],10);
selectedYear = parseInt(dateParts[2],10);
} catch(e) {}
}
if (!(selectedYear && selectedMonth && selectedDay)) {
selectedMonth = getCurrentMonth();
selectedDay = getCurrentDay();
selectedYear = getCurrentYear();
}
currentYear = selectedYear;
currentMonth = selectedMonth;
currentDay = selectedDay;
if(document.getElementById){
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
setProperty('display', 'block');
var fieldPos = new positionInfo(dateField);
var calendarPos = new positionInfo(calendarId);
var x = fieldPos.getElementLeft();
var y = fieldPos.getElementBottom();
setProperty('left', x + "px");
setProperty('top', y + "px");
if (document.all) {
setElementProperty('display', 'block', 'CalendarControlIFrame');
setElementProperty('left', x + "px", 'CalendarControlIFrame');
setElementProperty('top', y + "px", 'CalendarControlIFrame');
setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
}
}
}
this.hide = hide;
function hide() {
if(dateField) {
setProperty('display', 'none');
setElementProperty('display', 'none', 'CalendarControlIFrame');
dateField = null;
}
}
this.visible = visible;
function visible() {
return dateField
}
this.can_hide = can_hide;
var can_hide = 0;
}
var calendarControl = new CalendarControl();
function showCalendarControl(textField) {
// textField.onblur = hideCalendarControl;
calendarControl.show(textField);
}
function clearCalendarControl() {
calendarControl.clearDate();
}
function hideCalendarControl() {
if (calendarControl.visible()) {
calendarControl.hide();
}
}
function setCalendarControlDate(year, month, day) {
calendarControl.setDate(year, month, day);
}
function changeCalendarControlYear(change) {
calendarControl.changeYear(change);
}
function changeCalendarControlMonth(change) {
calendarControl.changeMonth(change);
}
document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='CalendarControl'></div>");
I am looking to add a calendar to my website in order to list events for each day on the calendar you click on. For example, the link below shows a calendar on the left, that when you click on a day it lists all the events that day. I have done a few searches, but am not sure if I can find a calendar that acts like this... Calendar Example Any help would be greatly appreciated! I have been working on this picker calendar all day and I am completely stumped. The calendar will show. Any help with this code would be REALLY appreciated!! Thank you!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Central Valley Snowboarding</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> </head> <body> <h1>Central Valley Snowboarding</h1> <h2>Group Reservations</h2><hr /> <form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"> <h3>Snowboarding Date</h3> <p><input type="text" name="reservationDate" /> <a href="" onclick="displayCalendar()">Select Date</a></p> <h3>Group Leader</h3> <table border="0"> <tr valign="top"> <td>Last name<br /> <input type="text" name="leaderLastName" size="50" /> <br /> First name<br /> <input type="text" name="leaderFirstName" size="50" /> <br /> Telephone<br /> <input type="text" name="leaderTelephone" size="50" /> <br /> Address<br /> <input type="text" name="leaderAddress" size="50" /><br /> City, State, Zip<br /> <input type="text" name="leaderCity" size="34" /> <input type="text" name="leaderState" size="2" maxlength="2" /> <input type="text" name="leaderZip" size="5" maxlength="5" /></td> </tr></table> <script type="text/javascript"> /* <![CDATA[ */ var dateObject = new Date(); var month = dateObject.getMonth(); var monthArray = new Array("January","February","March","April","May","June", "July","August","September","October","November","December"); var dateToday = monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear(); document.forms[0].reservationDate.value = dateToday; function displayCalendar(whichMonth) { calendarWin = window.open("", "CalWindow", "status=no,resizable=yes,width=400,height=320,left=200, top=200"); calendarWin.focus(); calendarWin.document.write("<!DOCTYPE html PUBLIC '-//W3C// DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd'><html xmlns='http://www.w3.org/ 1999/xhtml'> <head><title>Central Valley Snowboarding</title><meta http-equiv='content-type' content='text/html; charset=iso-8859-1' /> <link rel='stylesheet' href='js_styles.css' type='text/ css' /></head><body>"); calendarWin.document.write("<table cellspacing='0' border='1' width='100%'>"); } if (whichMonth == -1) dateObject.setMonth(dateObject.getMonth()-1); else if (whichMonth == 1) dateObject.setMonth(dateObject.getMonth()+1); var month = dateObject.getMonth(); calendarWin.document.write("<tr><td colspan='2'><a href='' onclick='self.opener.displayCalendar(-1);return false'> Previous</a></td><td colspan='3' align='center'><strong>" + monthArray[month] + " " + dateObject.getFullYear() + "</strong></td><td colspan='2' align='right'><a href='' onclick='self.opener.displayCalendar(1);return false'> Next</a></td></tr>"); + "</strong></td></td></tr>"); calendarWin.document.write("<tr align='center'><td>Sun</td> <td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td> <td>Sat</td></tr>"); calendarWin.document.write("<tr align='center'>"); dateObject.setDate(1); var dayOfWeek = dateObject.getDay(); for (var i=0; i<dayOfWeek; ++i) { calendarWin.document.write("<td> </td>"); } var daysWithDates = 7 - dayOfWeek; var dateCounter = 1; for(var i=0; i<daysWithDates; ++i) { var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear(); calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0] .reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "</a></td>"); ++dateCounter; } var numDays = 0; // January, March, May, July, August, October, December if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) numDays = 31; // February else if (month == 1) numDays = 28; // April, June, September, November else if (month == 3 || month == 5 || month == 8 || month == 10) numDays = 30; for (var rowCounter = 0; rowCounter < 5; ++rowCounter) { var weekDayCounter = 0; calendarWin.document.write("<tr align='center'>"); while (weekDayCounter < 7) { var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear(); if (dateCounter <= numDays) calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0]. reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "</a></td>"); else calendarWin.document.write("<td> </td>"); ++weekDayCounter; ++dateCounter; } calendarWin.document.write("</tr>"); } calendarWin.document.write("</table></body></html>"); calendarWin.document.close(); /* ]]> */ </script> <p><input type="submit" value="Submit Group Reservation" /></p> </form> </body> </html> Hello friends... i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page. In registration page to register the portal the birth date of user is required . so i have added the calendar control using javascript. I want that whenever user clicks on the calendar the birth date is displayed in the textfield. but it cannot displayed the birth date... So please tell me the sloution... following is the code for calendar control <p> <meta content="text/html;" http-equiv="Content-Type" /> <style type="text/css"> #calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; } #calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; } #calenderTableHead TR { background-color: #5FB404; } #calenderTableDays TR { background-color: #B40404; color: #E6E6E6; } .normalDay { border: 1px dotted black; cursor: pointer; } .hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; } .toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; } .choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; } </style> <link rel="stylesheet" type="text/css" href="calendar.css" /> <script language="javaScript" type="text/javascript" src="calendar.js"> // Array of max days in month in a year and in a leap year monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; hideSelectTags = []; function getRealYear(dateObj) { return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900); } function getDaysPerMonth(month, year) { /* Check for leap year. These are some conditions to check year is leap year or not... 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 ((year % 4) == 0) { if ((year % 100) == 0 && (year % 400) != 0) return monthMaxDays[month]; return monthMaxDaysLeap[month]; } else return monthMaxDays[month]; } function createCalender(year, month, day) { // current Date var curDate = new Date(); var curDay = curDate.getDate(); var curMonth = curDate.getMonth(); var curYear = getRealYear(curDate) // if a date already exists, we calculate some values here if (!year) { var year = curYear; var month = curMonth; } var yearFound = 0; for (var i=0; i<document.getElementById('selectYear').options.length; i++) { if (document.getElementById('selectYear').options[i].value == year) { document.getElementById('selectYear').selectedIndex = i; yearFound = true; break; } } if (!yearFound) { document.getElementById('selectYear').selectedIndex = 0; year = document.getElementById('selectYear').options[0].value; } document.getElementById('selectMonth').selectedIndex = month; // first day of the month. var fristDayOfMonthObj = new Date(year, month, 1); var firstDayOfMonth = fristDayOfMonthObj.getDay(); continu = true; firstRow = true; var x = 0; var d = 0; var trs = [] var ti = 0; while (d <= getDaysPerMonth(month, year)) { if (firstRow) { trs[ti] = document.createElement("TR"); if (firstDayOfMonth > 0) { while (x < firstDayOfMonth) { trs[ti].appendChild(document.createElement("TD")); x++; } } firstRow = false; var d = 1; } if (x % 7 == 0) { ti++; trs[ti] = document.createElement("TR"); } if (day && d == day) { var setID = 'calenderChoosenDay'; var styleClass = 'choosenDay'; var setTitle = 'this day is currently selected'; } else if (d == curDay && month == curMonth && year == curYear) { var setID = 'calenderToDay'; var styleClass = 'toDay'; var setTitle = 'this day today'; } else { var setID = false; var styleClass = 'normalDay'; var setTitle = false; } var td = document.createElement("TD"); td.className = styleClass; if (setID) { td.id = setID; } if (setTitle) { td.title = setTitle; } td.onmouseover = new Function('highLiteDay(this)'); td.onmouseout = new Function('deHighLiteDay(this)'); if (targetEl) td.onclick = new Function('pickDate('+year+', '+month+', '+d+')'); else td.style.cursor = 'default'; td.appendChild(document.createTextNode(d)); trs[ti].appendChild(td); x++; d++; } return trs; } function showCalender(elPos, tgtEl) { targetEl = false; if (document.getElementById(tgtEl)) { targetEl = document.getElementById(tgtEl); } else { if (document.forms[0].elements[tgtEl]) { targetEl = document.forms[0].elements[tgtEl]; } } var calTable = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(elPos, positions); calTable.style.left = positions[0]+'px'; calTable.style.top = positions[1]+'px'; calTable.style.display='block'; var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$'); var m = matchDate.exec(targetEl.value); if (m == null) { trs = createCalender(false, false, false); showCalenderBody(trs); } else { if (m[1].substr(0, 1) == 0) m[1] = m[1].substr(1, 1); if (m[2].substr(0, 1) == 0) m[2] = m[2].substr(1, 1); m[2] = m[2] - 1; trs = createCalender(m[3], m[2], m[1]); showCalenderBody(trs); } hideSelect(document.body, 1); } function showCalenderBody(trs) { var calTBody = document.getElementById('calender'); while (calTBody.childNodes[0]) { calTBody.removeChild(calTBody.childNodes[0]); } for (var i in trs) { calTBody.appendChild(trs[i]); } } function setYears(sy, ey) { // current Date var curDate = new Date(); var curYear = getRealYear(curDate); if (sy) startYear = curYear; if (ey) endYear = curYear; document.getElementById('selectYear').options.length = 0; var j = 0; for (y=ey; y>=sy; y--) { document.getElementById('selectYear')[j++] = new Option(y, y); } } function hideSelect(el, superTotal) { if (superTotal >= 100) { return; } var totalChilds = el.childNodes.length; for (var c=0; c<totalChilds; c++) { var thisTag = el.childNodes[c]; if (thisTag.tagName == 'SELECT') { if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear') { var calenderEl = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(thisTag, positions); // nieuw var thisLeft = positions[0]; var thisRight = positions[0] + thisTag.offsetWidth; var thisTop = positions[1]; var thisBottom = positions[1] + thisTag.offsetHeight; var calLeft = calenderEl.offsetLeft; var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth; var calTop = calenderEl.offsetTop; var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight; if ( ( /* check if it overlaps horizontally */ (thisLeft >= calLeft && thisLeft <= calRight) || (thisRight <= calRight && thisRight >= calLeft) || (thisLeft <= calLeft && thisRight >= calRight) ) && ( /* check if it overlaps vertically */ (thisTop >= calTop && thisTop <= calBottom) || (thisBottom <= calBottom && thisBottom >= calTop) || (thisTop <= calTop && thisBottom >= calBottom) ) ) { hideSelectTags[hideSelectTags.length] = thisTag; Tag.style.display = 'none'; } } } else if(thisTag.childNodes.length > 0) { hideSelect(thisTag, (superTotal+1)); } } } function closeCalender() { for (var i=0; i<hideSelectTags.length; i++) { hideSelectTags[i].style.display = 'block'; } hideSelectTags.length = 0; document.getElementById('calenderTable').style.display='none'; } function highLiteDay(el) { el.className = 'hlDay'; } function deHighLiteDay(el) { if (el.id == 'calenderToDay') el.className = 'toDay'; else if (el.id == 'calenderChoosenDay') el.className = 'choosenDay'; else el.className = 'normalDay'; } function pickDate(year, month, day) { month++; day = day < 10 ? '0'+day : day; month = month < 10 ? '0'+month : month; if (!targetEl) { alert('target for date is not set yet'); } else { targetEl.value= day+'-'+month+'-'+year; closeCalender(); } } function getParentOffset(el, positions) { positions[0] += el.offsetLeft; positions[1] += el.offsetTop; if (el.offsetParent) positions = getParentOffset(el.offsetParent, positions); return positions; } </script> <link rel="stylesheet" type="text/css" href="calendar.css" /></p> <form> <input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&groupId=10136&t=1294233035464" /></a> </form> <!-- Calender Script --> <table id="calenderTable"> <tbody id="calenderTableHead"> <tr> <td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));"> <option value="0" selected="selected">Jan</option> <option value="1">Feb</option> <option value="2">Mar</option> <option value="3">Apr</option> <option value="4">May</option> <option value="5">Jun</option> <option value="6">Jul</option> <option value="7">Aug</option> <option value="8">Sep</option> <option value="9">Oct</option> <option value="10">Nov</option> <option value="11">Dec</option> </select></td> <td colspan="2" align="center"><select id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td> <td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td> </tr> </tbody> <tbody id="calenderTableDays"> <tr> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td> </tr> </tbody> <tbody id="calender"> </tbody> </table> <!-- End Calender Script --> Thanking you... Hello Friends... I am working on the healthcare project.So in that project there are different html pages for the user interaction & Events,such as user registration,patient profiles,doctor registration. So in the patient registration page i want to add the calendar control the requirement is whenever i click on the calendar control the user selected date is displayed in the textbox in the ddmmyyyy format.. So please tell me the answer... Thanking you..... Umesh Hi, I want to build a custom calendar using javascript. On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month. There are 3 button below the calendar as prev mnth,create schedule,next mnth. when prev is clicked it should works same as on load for previous month, similarly for next mnth. Pls help its urgent. Thanks I would like to personalise the Events calendar [http://www.wsabstract.com/script/scr...alendar.shtml] Every time I try to change the title text, paste in onto my own page or add a background, even with the same URL, the script stops displaying. Can anybody help me as the designers link is defunct! Many thanks, For some reason after I modified the events.js script for my events, the events.js is not being read. I have reloaded the page, cleared the cache, and reinstalled the .js file. What is wrong? how to create a customizable event based calender i need to create a grid calender where user can edit the fields of the dates and he can block some dates ! is it possible please help to me i hope u will help to me thanking you reply soon I am using the following script to have a calander displayed in my form. It displays a calender on which a user can select a date. If the date is a friday, something else should happen in the form than when selecting other days (see final 15 lines, no need to be specific). The problem is that the code only works for months with 30 days in it. E.g. The september month works fine, when a friday is selected (javascript:setCalendarControlDate(2009,9,25)) the correct changes occur. For the October month (31 days) the same changes that occur correct in september occur in october when selecting thursday, but these should be when selecting friday instead! For November (30 days) everything works fine again, but then for December (31 days) the changes occur again at thursday instead of friday For February (2010) I need to select sunday to get the needed changes. Like I said, I think it has something to do with the amount of days in a month. Since the code works fine on months with 30 days, but not on months with other amounts of days. Can anyone tell me what's wrong in the code? Code: function positionInfo(object)
{ var p_elm = object;
this.getElementLeft = getElementLeft;
function getElementLeft()
{ var x = 0;
var elm;
if(typeof(p_elm) == "object")
{ elm = p_elm;
}
else
{ elm = document.getElementById(p_elm);
}
while (elm != null)
{ x+= elm.offsetLeft;
elm = elm.offsetParent;
}
return parseInt(x);
}
this.getElementWidth = getElementWidth;
function getElementWidth()
{ var elm;
if(typeof(p_elm) == "object")
{ elm = p_elm;
}
else
{ elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetWidth);
}
this.getElementRight = getElementRight;
function getElementRight()
{ return getElementLeft(p_elm) + getElementWidth(p_elm);
}
this.getElementTop = getElementTop;
function getElementTop()
{ var y = 0;
var elm;
if(typeof(p_elm) == "object")
{ elm = p_elm;
}
else
{ elm = document.getElementById(p_elm);
}
while (elm != null)
{ y+= elm.offsetTop;
elm = elm.offsetParent;
}
return parseInt(y);
}
this.getElementHeight = getElementHeight;
function getElementHeight()
{ var elm;
if(typeof(p_elm) == "object")
{ elm = p_elm;
}
else
{ elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetHeight);
}
this.getElementBottom = getElementBottom;
function getElementBottom()
{ return getElementTop(p_elm) + getElementHeight(p_elm);
}
}
function CalendarControl()
{ var calendarId = 'CalendarControl';
var currentYear = 0;
var currentMonth = 0;
var currentDay = 0;
var selectedYear = 0;
var selectedMonth = 0;
var selectedDay = 0;
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var dateField = null;
function getProperty(p_property)
{ var p_elm = calendarId;
var elm = null;
if(typeof(p_elm) == "object")
{ elm = p_elm;
}
else
{ elm = document.getElementById(p_elm);
}
if (elm != null)
{ if(elm.style)
{ elm = elm.style;
if(elm[p_property])
{ return elm[p_property];
}
else
{ return null;
}
}
else
{ return null;
}
}
}
function setElementProperty(p_property, p_value, p_elmId)
{ var p_elm = p_elmId;
var elm = null;
if(typeof(p_elm) == "object")
{ elm = p_elm;
}
else
{ elm = document.getElementById(p_elm);
}
if((elm != null) && (elm.style != null))
{ elm = elm.style;
elm[ p_property ] = p_value;
}
}
function setProperty(p_property, p_value)
{ setElementProperty(p_property, p_value, calendarId);
}
function getDaysInMonth(year, month)
{ return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
}
function getDayOfWeek(year, month, day)
{ var date = new Date(year,month-1,day)
var DayOfWeek = date.getDay();
if(DayOfWeek == 0)
DayOfWeek = 6;
else
DayOfWeek--;
return DayOfWeek;
}
this.setDate = setDate;
function setDate(year, month, day)
{ if (dateField)
{ if (month < 10) { month = "0" + month; }
if (day < 10) { day = "0" + day; }
var dateString = day+"-"+month+"-"+year;
dateField.value = dateString;
hide();
}
return;
}
this.changeMonth = changeMonth;
function changeMonth(change)
{ currentMonth += change;
currentDay = 0;
if(currentMonth > 12)
{ currentMonth = 1;
currentYear++;
}
else if(currentMonth < 1)
{ currentMonth = 12;
currentYear--;
}
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}
function getCurrentYear()
{ var year = new Date().getYear();
if(year < 1900) year += 1900;
return year;
}
function getCurrentMonth()
{ return new Date().getMonth() + 1;
}
function getCurrentDay()
{ return new Date().getDate();
}
function calendarDrawTable()
{ var dayOfMonth = 1;
var validDay = 0;
var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
var daysInMonth = getDaysInMonth(currentYear, currentMonth);
var css_class = null; //CSS class for each day
var table = "<table cellspacing='0' cellpadding='0' border='0'>";
table = table + "<tr class='header'>";
table = table + " <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'><</a></td>";
table = table + " <td colspan='3' class='caltitle'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
table = table + " <td colspan='2' class='next'> <a href='javascript:changeCalendarControlMonth(1);'>></a></td>";
table = table + "</tr>";
table = table + "<tr><th>Mon.</th><th>Tues.</th><th>Wed.</th><th>Thurs.</th><th>Fri.</th><th>Sat.</th><th>Sun.</th></tr>";
for(var week=0; week < 6; week++)
{ table = table + "<tr>";
for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++)
{ if(week == 0 && startDayOfWeek == dayOfWeek)
{ validDay = 1;
}
else if (validDay == 1 && dayOfMonth > daysInMonth)
{ validDay = 0;
}
if(validDay)
{ if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth)
{ css_class = 'current';
}
else if (dayOfMonth == getCurrentDay() && currentYear == getCurrentYear() && currentMonth == getCurrentMonth())
{ css_class = 'today';
}
else if ((dayOfWeek == 5 || dayOfWeek == 6) && (dayOfMonth > getCurrentDay() || currentMonth > getCurrentMonth() || currentYear > getCurrentYear()))
{ css_class = 'weekend';
}
else
{ css_class = 'weekday';
}
if (((dayOfMonth < getCurrentDay() && currentMonth <= getCurrentMonth()) && currentYear <= getCurrentYear()) || currentYear < getCurrentYear())
{
table = table + "<td><span class='dayinpast'>"+dayOfMonth+"</span></td>";
}
else
{
table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
}
dayOfMonth++;
}
else
{ table = table + "<td class='empty'> </td>";
}
}
table = table + "</tr>";
}
table = table + "<tr class='header'><th colspan='7' style='padding: 3px; text-align:center;'><a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
table = table + "</table>";
return table;
}
this.show = show;
function show(field)
{ if (dateField == field)
{ hide();
return;
}
else
{ dateField = field;
}
if(dateField)
{ try
{ var dateString = new String(dateField.value);
var dateParts = dateString.split("-");
selectedDay = parseInt(dateParts[0],10);
selectedMonth = parseInt(dateParts[1],10);
selectedYear = parseInt(dateParts[2],10);
}
catch(e)
{}
}
if (!(selectedYear && selectedMonth && selectedDay))
{ selectedMonth = getCurrentMonth();
selectedDay = getCurrentDay();
selectedYear = getCurrentYear();
}
currentMonth = selectedMonth;
currentDay = selectedDay;
currentYear = selectedYear;
if(document.getElementById)
{ calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
setElementProperty('display', 'block', 'CalendarControlIFrame');
setProperty('display', 'block');
var fieldPos = new positionInfo(dateField);
var calendarPos = new positionInfo(calendarId);
var x = fieldPos.getElementLeft() - document.getElementById('table_left').scrollLeft;
var y = fieldPos.getElementBottom() - document.getElementById('table_left').scrollTop;
var w = calendarPos.getElementWidth();
var h = calendarPos.getElementHeight();
var ch = document.getElementById('table_left').style.height;
ch = parseInt(ch.substring(0, ch.length-2)) + 143;
var cw = document.getElementById('table_left').style.width;
cw = parseInt(cw.substring(0, cw.length-2)) + 150;
if(y+h > ch) y = ch - h;
if(x+w > cw) x = cw - w;
setProperty('left', x + "px");
setProperty('top', y + "px");
setElementProperty('left', x + "px", 'CalendarControlIFrame');
setElementProperty('top', y + "px", 'CalendarControlIFrame');
setElementProperty('width', w + "px", 'CalendarControlIFrame');
setElementProperty('height', h + "px", 'CalendarControlIFrame');
}
}
this.hide = hide;
function hide()
{ if(dateField)
{ setProperty('display', 'none');
setElementProperty('display', 'none', 'CalendarControlIFrame');
dateField = null;
}
getSelectedDate('cd_pickup_date')
}
}
var calendarControl = new CalendarControl();
function showCalendarControl(textField)
{ calendarControl.show(textField);
}
function hideCalendarControl()
{ calendarControl.hide();
}
function setCalendarControlDate(year, month, day)
{ calendarControl.setDate(year, month, day);
}
function changeCalendarControlMonth(change)
{ calendarControl.changeMonth(change);
}
document.write("<div id='CalendarControl'></div>");
function getSelectedDate(value)
{
var selectedDate = document.getElementById('cd_pickup_date').value;
var selectedDateArray = selectedDate.split("-");
var convertedDate = new Date(selectedDateArray[2],selectedDateArray[1],selectedDateArray[0]);
var selectedDay = convertedDate.getDay();
var weekDay = new Array("Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday");
if(weekDay[selectedDay] == "Friday")
{
document.collectionform.cd_saturday[0].checked = true;
document.collectionform.cd_saturday[0].disabled = false;
document.collectionform.cd_saturday[1].disabled = true;
getAlternateAddress('Yes');
}
else
{
document.collectionform.cd_saturday[1].checked = true;
document.collectionform.cd_saturday[1].disabled = false;
document.collectionform.cd_saturday[0].disabled = true;
getAlternateAddress('No');
}
}
Hey all i have this piece of code before that disables the given dates i put into an array. This works great for day 2-30 (out of a 31 day month) but it does not seem to work when i select either day 1 or day 31. For day 1 it blocks out day 1 and i do not want that. The user should be able to select that day since it was selected. It does not do this for any other day. If the user selects day 2 then day 2 is selected on the calender and is not blocked. As for day 31, i don't know whats wrong with it because it never shows me an error. It's the type of error that shuts down the website with "System Unavailable" for about a minute before i can connect to the page again. Here is my code: Code: var disabledDays = ['3-31-2010','3-30-2010','3-29-2010','3-28-2010','3-27-2010','3-26-2010','3-25-2010','3-24-2010','3-23-2010','3-22-2010','3-21-2010','3-20-2010','3-19-2010','3-18-2010','3-17-2010','3-16-2010','3-15-2010','3-14-2010','3-13-2010','3-12-2010','3-11-2010','3-10-2010','3-9-2010','3-8-2010','3-7-2010','3-6-2010','3-05-2010'];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
function noWeekendsOrHolidays(date) {
return nationalDays(date);
}
function ArrayIndexOf(array,item,from){
var len = array.length;
for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
if (array[i] === item) return i;
}
return -1;
}
function ArrayContains(array,item,from){
return ArrayIndexOf(array,item,from) != -1;
}
Any help would be great! David I am seeking a way to restyle the google calendar by trying to add a different background color to each day of the month, closest I am getting is this code: Code: @namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://www.google.com/calendar") {
.tg-today, .bg-exists .tg-today, .st-bg-today {
background-color:#53abdf !important;
}
.lv-today {
/* background-color:#ffffcc !important;*/
}
}
taken from this small artticle: http://userstyles.org/styles/20934/g...-color-obvious The way I see it, if this code can change the bg color for one day then why can't it work for ANY day "ahead" of time? |
|||||||