|
JavaScript - Where Can I Get A Calendar App Like This Please?
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?
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 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. 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 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... 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>";
}
?>
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>");
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 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! 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 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? 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 have the need to utilize a pop-up calendar about three times on one of my pages. I created the calendar in a separate html file, complete with jquery functions for pulling the date once a user clicks their desired day. What is the best approach to have that calendar pop up in small window that hovers on the page so that I can take the users clicked day and utilize it on the main page? Should I use the jquery load () function to load the calendar into a div on the main page? Or should I include the calendar file in my header? I'm just asking for some ideas and guidance. 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! I do my calendar (vertical) =) and I've done to date were down But how to do that day of the week displayed on the side of the date of Here is code: Code: <html><head><title>Calendar</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body><center>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
monthnames = new Array("January","Febrary","March","April","May","June","July","August","September","October","November","December");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write
for (s=0;s<startspaces;s++) {
document.write();
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
/////displays the date
document.write("<br width='30'>");
if (count <= 31) {
document.write(monthnames[thismonth]);
document.write(" ");
}
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write;
count++;
}
document.write;
document.write("<tr>");
startspaces=0;
}
document.write("</p>");
// End -->
</SCRIPT>
</center></body>
</html>
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, 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');
}
}
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 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? 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 |
|||||||