|
JavaScript - Event Calendar Help
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! Similar TutorialsFirst of all, thanks for looking! I'm doing this nonprofit site for a students club in my college, and it needs an event calendar. I just have a bit of touch on javascript, and the only way this is going to be done in is javascript so I'm stuck with it. I took one of my assignments and modded it to the requirements of them. 1. A 6 month calendar. problem - I have to get thismonth, check whether its <July,then display Jan to June. Else July to December.(A semester calendar) figured it out. 2.Want to highlight a specific date, and place a link in it, so when somebody click the date, say a textarea in a form, displays the event details. problem - Have no idea on how to do it. Any help on this is warmly welcome ! My calendar.htm file Code: <html>
<head>
<title>Calendar</title>
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<script type="text/javascript">
yearly();
</script>
</div>
</body>
</html>
My css file Code: #yearly_table {border: 1px solid black; font-size: 8pt; width: 500px;
font-family: Arial, Helvetica, sans-serif; background-color: white}
#yearly_title {color: white; background-color: rgb(223,29,29); letter-spacing: 6; font-size: 12pt}
.yearly_months {vertical-align: top; border: solid 1px black}
.monthly_table {font-size: 8pt; width: 100%; background-color: white}
.monthly_title {background-color: rgb(223,29,29); color: white; letter-spacing: 4}
.monthly_weekdays {border-bottom: 1px solid black}
.monthly_dates {text-align: right}
#today {font-weight: bold; color: rgb(223,29,29); background-color:#999;
border: 1px solid black; text-align: center}
My .js file Code: tes the month name in the monthly table
writeDayNames()
Writes the weekday title rows in the calendar table
daysInMonth(calendarDay)
Returns the number of days in the month from calendarDay
writeMonthDays(calendarDay, currentTime)
Writes the daily rows in the monthly table, highlighting
the date specified in the currentTime parameter.
writeDay(weekDay, dayCount, calendarDay, currentTime)
Write the opening and close table row tags and the table
cell tag for an individual day in the calendar.
*/
function yearly(calDate) {
if (calDate == null) calendarDay=new Date();
else calendarDay = new Date(calDate);
var currentTime = calendarDay.getTime();
var thisYear = calendarDay.getFullYear();
document.write("<table id='yearly_table'>");
document.write("<tr><th id='yearly_title' colspan='4'>"+thisYear+"</th></tr>");
var semMonth=calendarDay.getMonth();
var monthNum;
if (semMonth <6) {
monthNum = -1 }
else {
monthNum = 5; }
for (var i=1; i<=2; i++) {
document.write("<tr>");
for (var j=1; j<=3; j++) {
monthNum++;
calendarDay.setDate(1);
calendarDay.setMonth(monthNum);
writeMonthCell(calendarDay, currentTime);
}
document.write("</tr>");
}
document.write("</table>");
}
function writeMonthCell(calendarDay, currentTime) {
document.write("<td class='yearly_months'>");
writeMonth(calendarDay, currentTime);
document.write("</td>");
}
function writeMonth(calendarDay, currentTime) {
document.write("<table class='monthly_table'>");
writeMonthTitle(calendarDay);
writeDayNames()
writeMonthDays(calendarDay, currentTime);
document.write("</table>");
}
function writeMonthTitle(calendarDay) {
var monthName = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
var thisMonth=calendarDay.getMonth();
document.write("<tr>");
document.write("<th class='monthly_title' colspan='7'>");
document.write(monthName[thisMonth]);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array("S", "M", "T", "W", "R", "F", "S");
document.write("<tr>");
for (var i=0;i<dayName.length;i++) {
document.write("<th class='monthly_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)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
dayCount[1] = 29;
}
return dayCount[thisMonth];
}
function writeMonthDays(calendarDay, currentTime) {
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i=0; i < weekDay; i++) {
document.write("<td></td>");
}
var totalDays = daysInMonth(calendarDay);
for (var dayCount=1; dayCount<=totalDays; dayCount++) {
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
writeDay(weekDay, dayCount, calendarDay, currentTime);
}
document.write("</tr>");
}
function writeDay(weekDay, dayCount, calendarDay, currentTime) {
if (weekDay == 0) document.write("<tr>");
if (calendarDay.getTime() == currentTime) {
document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
} else {
document.write("<td class='monthly_dates'>"+dayCount+"</td>");
}
if (weekDay == 6) document.write("</tr>");
}
I need javascript event calendar sourcecode with highlighting of colors when dates selecting from datepicker of DHTMLgoodies calendar Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? 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 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 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 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>";
}
?>
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 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. 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 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 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> 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 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? 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 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>
|
|||||||