|
JavaScript - Best Approach To Achieve Pop-up Calendar
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. Similar TutorialsGood day, quite a strange problem, but can't solve it on my own Let's say, I have Google Mail login page, saved locally to C: disk. I want to edit its source so, that when entered username and password and clicked on "Login" button it did absolutelly nothing, but the form did not reset. I tried deleting from the source "form action = https"//....", "method = post", "onsubmit = ...". So, when the form is submitted, nothing happens(as I want it to be), but the field values are reset(what I want to avoid). Any ideas, please? I also tried inserting to source code "form onsubmit = return false", but the username and password values are still reset. I hope my question is understandable Gljpartners.com this site has a interesting scrolling feature. for the images.. does anyone know how it's done? Hi and hope you can help, I'm doing some course work and the current lesson I'm doing is about substituting images depending on onclick functions. I've attached the HTML / JavaScript as a txt file, this is their sample file and it is rather bulky and repetetive. I was wondering whether it would be possible to simplify the code as there is a lot of repetition, there are 8 question functions and 8 answer functions, I'm wondering if this could be simplified into 1 question and 1 answer function. Thanks for your interest, R Hey guys, here's my code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
#box {
background: red;
width: 300px;
height: 300px;
display: none;
}
#box2 {
background: green;
width: 300px;
height: 300px;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a.about').click(function() {
$('#box').stop().slideToggle(2000);
});
});
$(function() {
$('a.contact').click(function() {
$('#box2').stop().slideToggle(2000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<a href="#" class="about" />about</a>
<a href="#" class="contact" />contact</a>
</body>
</html>
Basically I want to make it so that if you click about, and about is open, once you click contact it closes about before opening contact? I'm not sure how to approach this though whether I should use if statements or something? I'm pretty new to jquery I'm learning JavaScript, but want to make an accounting program(site) for my brother. It will be backed by php and mysql. I've found that javascript doesn't "really" have multidimensional arrays. The ways I figure to collect name, address, phone, etc could be any of these: 1. Create a customer object (customer.name, customer.address) 2. Use the mutidimensional array that JavaScript does offer. (var customers [ [], [] ]) 3. Create bunches of variables (var customerName, var customerAddress) or any other method I have found (will find). The information will for a customer will be filled out via HTML forms, processed by JavaScript then sent up to the PHP/MySQL database. OR should I just use PHP to deal with these directly? My impression is to use client side technology as much as possible or is this wrong? -Matt Hi All, I am working on a page with a webform and a subform. I have two related tables where my main form will populate the one side of the relationship and the subform will be for the many side. I am thinking about using an HTML table to hold my subform fields with javascript to dynamically add rows for additional records. I am having trouble with the design of the form processing script, however as since the index on the parent record does not exist at the time of processing I can't think of a way to populate the link field for the child records. The only thing I can think of is to have my page's onload event create a "blank" record (generating the index and storing it in a hidden field) and then essentially make the proceesing script be an update rather than a create. This of course would involve creating some sort of delete function if the user leaves the page without submiting the form. I am not sure this is the best approach but it is all I can come up with. I am open to any ideas or guidance from the community on either my subform idea or processing script idea and I thank you in advance. Kind regards, Ken I'm almost positive this question will make you groan "neewwwbie!".... I have a simple javascript that decides which 'div' to make visible, based on another element within the html. What i want now is to create a page where someone can view all the possible divs in that javascript that might appear and edit them (including href's, ital, bold and image tags.) Much like a CMS system, but the information is within a javascript, not a database. I would assume it's possible. What's a good way to approach this? It sounds like Javascript cannot edit .txt files. Is there a way to have the user access and edit an .xml file and just pull that into the div tag, instead of text? I have many radio buttons associated with questions on a page with Yes/No options. Depending on if Yes or No is selected (varies with question), I need to prevent the user from going off of the page and somehow "mark" the questions that are answered "incorrectly/not preferred". I could probably put validation on each individual radio button and display a message when going off the page, but I'm looking to make this more dynamic. One idea I had was to put a function on each radio button's onChange event and build an array using .push() to construct the array with all the radio button IDs that are answered incorrectly. I ran into problems when deleting from the array when the radio button was changed back to a correct response though. What may be best is to somehow indicate which radio buttons need looked at when leaving the page and then run a function or case statement over all the radio buttons to build an object? I'm not sure what approach to take. Any thoughts are appreciated. Thanks. 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?
hi 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. 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!!! 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. 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>");
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 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... 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! 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>
|
|||||||