|
JavaScript - How To Create A Calendar In Javascript ?
how to create a customizable event based calender
i need to create a grid calender where user can edit the fields of the dates and he can block some dates ! is it possible please help to me i hope u will help to me thanking you reply soon Similar TutorialsHi, I have the script below working fine in IE but not FF, can any one help me?? The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF Live demo: http://hotelendenia.com/sandbox/ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Calendar Text Input</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
<script type="text/javascript">
function extend(m, e){
var e = e || this;
for (var x in m) e[x] = m[x];
return e;
};
function create(type, opt, parent){
var el = document.createElement(type);
if (opt.style){
extend(opt.style,el.style);
}
delete opt.style;
extend(opt,el);
if (parent){
parent.appendChild(el);
}
return el;
}
fields = 0;
function add_input(){
document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
fields += 1;
}
</script>
</head>
<body>
<div>
<form>
<div id="input_container">
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
</body>
</html>
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 Hello friends... i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page. In registration page to register the portal the birth date of user is required . so i have added the calendar control using javascript. I want that whenever user clicks on the calendar the birth date is displayed in the textfield. but it cannot displayed the birth date... So please tell me the sloution... following is the code for calendar control <p> <meta content="text/html;" http-equiv="Content-Type" /> <style type="text/css"> #calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; } #calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; } #calenderTableHead TR { background-color: #5FB404; } #calenderTableDays TR { background-color: #B40404; color: #E6E6E6; } .normalDay { border: 1px dotted black; cursor: pointer; } .hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; } .toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; } .choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; } </style> <link rel="stylesheet" type="text/css" href="calendar.css" /> <script language="javaScript" type="text/javascript" src="calendar.js"> // Array of max days in month in a year and in a leap year monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; hideSelectTags = []; function getRealYear(dateObj) { return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900); } function getDaysPerMonth(month, year) { /* Check for leap year. These are some conditions to check year is leap year or not... 1.Years evenly divisible by four are normally leap years, except for... 2.Years also evenly divisible by 100 are not leap years, except for... 3.Years also evenly divisible by 400 are leap years. */ if ((year % 4) == 0) { if ((year % 100) == 0 && (year % 400) != 0) return monthMaxDays[month]; return monthMaxDaysLeap[month]; } else return monthMaxDays[month]; } function createCalender(year, month, day) { // current Date var curDate = new Date(); var curDay = curDate.getDate(); var curMonth = curDate.getMonth(); var curYear = getRealYear(curDate) // if a date already exists, we calculate some values here if (!year) { var year = curYear; var month = curMonth; } var yearFound = 0; for (var i=0; i<document.getElementById('selectYear').options.length; i++) { if (document.getElementById('selectYear').options[i].value == year) { document.getElementById('selectYear').selectedIndex = i; yearFound = true; break; } } if (!yearFound) { document.getElementById('selectYear').selectedIndex = 0; year = document.getElementById('selectYear').options[0].value; } document.getElementById('selectMonth').selectedIndex = month; // first day of the month. var fristDayOfMonthObj = new Date(year, month, 1); var firstDayOfMonth = fristDayOfMonthObj.getDay(); continu = true; firstRow = true; var x = 0; var d = 0; var trs = [] var ti = 0; while (d <= getDaysPerMonth(month, year)) { if (firstRow) { trs[ti] = document.createElement("TR"); if (firstDayOfMonth > 0) { while (x < firstDayOfMonth) { trs[ti].appendChild(document.createElement("TD")); x++; } } firstRow = false; var d = 1; } if (x % 7 == 0) { ti++; trs[ti] = document.createElement("TR"); } if (day && d == day) { var setID = 'calenderChoosenDay'; var styleClass = 'choosenDay'; var setTitle = 'this day is currently selected'; } else if (d == curDay && month == curMonth && year == curYear) { var setID = 'calenderToDay'; var styleClass = 'toDay'; var setTitle = 'this day today'; } else { var setID = false; var styleClass = 'normalDay'; var setTitle = false; } var td = document.createElement("TD"); td.className = styleClass; if (setID) { td.id = setID; } if (setTitle) { td.title = setTitle; } td.onmouseover = new Function('highLiteDay(this)'); td.onmouseout = new Function('deHighLiteDay(this)'); if (targetEl) td.onclick = new Function('pickDate('+year+', '+month+', '+d+')'); else td.style.cursor = 'default'; td.appendChild(document.createTextNode(d)); trs[ti].appendChild(td); x++; d++; } return trs; } function showCalender(elPos, tgtEl) { targetEl = false; if (document.getElementById(tgtEl)) { targetEl = document.getElementById(tgtEl); } else { if (document.forms[0].elements[tgtEl]) { targetEl = document.forms[0].elements[tgtEl]; } } var calTable = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(elPos, positions); calTable.style.left = positions[0]+'px'; calTable.style.top = positions[1]+'px'; calTable.style.display='block'; var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$'); var m = matchDate.exec(targetEl.value); if (m == null) { trs = createCalender(false, false, false); showCalenderBody(trs); } else { if (m[1].substr(0, 1) == 0) m[1] = m[1].substr(1, 1); if (m[2].substr(0, 1) == 0) m[2] = m[2].substr(1, 1); m[2] = m[2] - 1; trs = createCalender(m[3], m[2], m[1]); showCalenderBody(trs); } hideSelect(document.body, 1); } function showCalenderBody(trs) { var calTBody = document.getElementById('calender'); while (calTBody.childNodes[0]) { calTBody.removeChild(calTBody.childNodes[0]); } for (var i in trs) { calTBody.appendChild(trs[i]); } } function setYears(sy, ey) { // current Date var curDate = new Date(); var curYear = getRealYear(curDate); if (sy) startYear = curYear; if (ey) endYear = curYear; document.getElementById('selectYear').options.length = 0; var j = 0; for (y=ey; y>=sy; y--) { document.getElementById('selectYear')[j++] = new Option(y, y); } } function hideSelect(el, superTotal) { if (superTotal >= 100) { return; } var totalChilds = el.childNodes.length; for (var c=0; c<totalChilds; c++) { var thisTag = el.childNodes[c]; if (thisTag.tagName == 'SELECT') { if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear') { var calenderEl = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(thisTag, positions); // nieuw var thisLeft = positions[0]; var thisRight = positions[0] + thisTag.offsetWidth; var thisTop = positions[1]; var thisBottom = positions[1] + thisTag.offsetHeight; var calLeft = calenderEl.offsetLeft; var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth; var calTop = calenderEl.offsetTop; var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight; if ( ( /* check if it overlaps horizontally */ (thisLeft >= calLeft && thisLeft <= calRight) || (thisRight <= calRight && thisRight >= calLeft) || (thisLeft <= calLeft && thisRight >= calRight) ) && ( /* check if it overlaps vertically */ (thisTop >= calTop && thisTop <= calBottom) || (thisBottom <= calBottom && thisBottom >= calTop) || (thisTop <= calTop && thisBottom >= calBottom) ) ) { hideSelectTags[hideSelectTags.length] = thisTag; Tag.style.display = 'none'; } } } else if(thisTag.childNodes.length > 0) { hideSelect(thisTag, (superTotal+1)); } } } function closeCalender() { for (var i=0; i<hideSelectTags.length; i++) { hideSelectTags[i].style.display = 'block'; } hideSelectTags.length = 0; document.getElementById('calenderTable').style.display='none'; } function highLiteDay(el) { el.className = 'hlDay'; } function deHighLiteDay(el) { if (el.id == 'calenderToDay') el.className = 'toDay'; else if (el.id == 'calenderChoosenDay') el.className = 'choosenDay'; else el.className = 'normalDay'; } function pickDate(year, month, day) { month++; day = day < 10 ? '0'+day : day; month = month < 10 ? '0'+month : month; if (!targetEl) { alert('target for date is not set yet'); } else { targetEl.value= day+'-'+month+'-'+year; closeCalender(); } } function getParentOffset(el, positions) { positions[0] += el.offsetLeft; positions[1] += el.offsetTop; if (el.offsetParent) positions = getParentOffset(el.offsetParent, positions); return positions; } </script> <link rel="stylesheet" type="text/css" href="calendar.css" /></p> <form> <input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&groupId=10136&t=1294233035464" /></a> </form> <!-- Calender Script --> <table id="calenderTable"> <tbody id="calenderTableHead"> <tr> <td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));"> <option value="0" selected="selected">Jan</option> <option value="1">Feb</option> <option value="2">Mar</option> <option value="3">Apr</option> <option value="4">May</option> <option value="5">Jun</option> <option value="6">Jul</option> <option value="7">Aug</option> <option value="8">Sep</option> <option value="9">Oct</option> <option value="10">Nov</option> <option value="11">Dec</option> </select></td> <td colspan="2" align="center"><select id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td> <td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td> </tr> </tbody> <tbody id="calenderTableDays"> <tr> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td> </tr> </tbody> <tbody id="calender"> </tbody> </table> <!-- End Calender Script --> Thanking you... Hi, I want to build a custom calendar using javascript. On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month. There are 3 button below the calendar as prev mnth,create schedule,next mnth. when prev is clicked it should works same as on load for previous month, similarly for next mnth. Pls help its urgent. Thanks I downloaded a popup datepicker from javascriptkit.com. All great but can't take the time out of the footer. I only want the date to show, and once selected, I would like the field to be filled with "Day, Date, Month, Year" (no time). Code is as follows: Code:
function show_calendar(str_target, str_datetime) {
var arr_months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
var n_weekstart = 1; // day week starts from (normally 0 or 1)
var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime));
var dt_prev_month = new Date(dt_datetime);
dt_prev_month.setMonth(dt_datetime.getMonth()-1);
var dt_next_month = new Date(dt_datetime);
dt_next_month.setMonth(dt_datetime.getMonth()+1);
var dt_firstday = new Date(dt_datetime);
dt_firstday.setDate(1);
dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
var dt_lastday = new Date(dt_next_month);
dt_lastday.setDate(0);
// html generation (feel free to tune it for your particular application)
// print calendar header
var str_buffer = new String (
"<html>\n"+
"<head>\n"+
" <title>Calendar</title>\n"+
"</head>\n"+
"<body bgcolor=\"White\">\n"+
"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
"<tr><td bgcolor=\"#4682B4\">\n"+
"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
"<tr>\n <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+
"<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"previous month\"></a></td>\n"+
" <td bgcolor=\"#4682B4\" colspan=\"5\">"+
"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
" <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
+str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+
"<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"next month\"></a></td>\n</tr>\n"
);
var dt_current_day = new Date(dt_firstday);
// print weekdays titles
str_buffer += "<tr>\n";
for (var n=0; n<7; n++)
str_buffer += " <td bgcolor=\"#87CEFA\">"+
"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
week_days[(n_weekstart+n)%7]+"</font></td>\n";
// print calendar table
str_buffer += "</tr>\n";
while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
dt_current_day.getMonth() == dt_firstday.getMonth()) {
// print row heder
str_buffer += "<tr>\n";
for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
if (dt_current_day.getDate() == dt_datetime.getDate() &&
dt_current_day.getMonth() == dt_datetime.getMonth())
// print current date
str_buffer += " <td bgcolor=\"#FFB6C1\" align=\"right\">";
else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
// weekend days
str_buffer += " <td bgcolor=\"#DBEAF5\" align=\"right\">";
else
// print working days of current month
str_buffer += " <td bgcolor=\"white\" align=\"right\">";
if (dt_current_day.getMonth() == dt_datetime.getMonth())
// print days of current month
str_buffer += "<a href=\"javascript:window.opener."+str_target+
".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
else
// print days of other months
str_buffer += "<a href=\"javascript:window.opener."+str_target+
".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
"<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
dt_current_day.setDate(dt_current_day.getDate()+1);
}
// print row footer
str_buffer += "</tr>\n";
}
// print calendar footer
str_buffer +=
"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
"Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
"</table>\n" +
"</tr>\n</td>\n</table>\n" +
"</body>\n" +
"</html>\n";
var vWinCal = window.open("", "Calendar",
"width=200,height=250,status=no,resizable=yes,top=200,left=200");
vWinCal.opener = self;
var calc_doc = vWinCal.document;
calc_doc.write (str_buffer);
calc_doc.close();
}
// datetime parsing and formatting routimes. modify them if you wish other datetime format
function str2dt (str_datetime) {
var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
if (!re_date.exec(str_datetime))
return alert("Invalid Datetime format: "+ str_datetime);
return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
}
function dt2dtstr (dt_datetime) {
return (new String (
dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" "));
}
function dt2tmstr (dt_datetime) {
return (new String (
dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
}
This is called with: Code:
<html lang="en">
<head>
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<form name="tstest">
<input type="Text" name="timestamp" value="">
<a href="javascript:show_calendar('document.tstest.timestamp', document.tstest.timestamp.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>
</form>
</body>
</html>
Thanks for any help!!! Ruth Hello, I have a question about the cut and paste javascript events calendar at http://www.javascriptkit.com/script/...calendar.shtml Is there any way to add links to the event description that appears in the box below the calendar? Thanks for your help. I need javascript event calendar sourcecode with highlighting of colors when dates selecting from datepicker of DHTMLgoodies calendar Hello everyone, I am creating a small application for my memory book. I want to have one of those calendars like in Here .. that would retutn values like: day month year - seperatelly that I could use in php. Im looking for easy solution if there is one.. Simple and short script Kind regards, Aurimas How do I retrieve input/selections from this calendar widget on this site: moongarm.99k.org
Hey I got two text boxes one for start date and second for end date in that i want to fill text boxes according to Quarter of a year, as like if i put 1-4-2012 in first text box then in second text box values should be automatically 30-6-2012. So now tell me please how to do this ??????? Regards rajboy13 Contact me @ = rajboy13@gmail.com Hi i need to use an equivalent of the php function array_count_values() Any help with that please cheers ewire Hello, I'm trying to create a textarea using Javascript, the function creates a textarea in IE, but it does not create that element in Firefox and chrome. JavaScript Code:- Code: function addRow()
{
alert("function start");
var table = document.getElementById('tableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var textNode = document.createTextNode(rowCount + 1);
cell1.appendChild(textNode);
var cell2 = row.insertCell(1);
var textArea = zxcFormField('TEXTAREA','option1');
textArea.setAttribute("cols","20");
textArea.style.height = "42px";
textArea.style.width = "496px";
cell2.appendChild(textArea);
alert("function end");
}
function zxcFormField(tag,nme,type){
alert("2 function start");
var el;
try {
alert("In Try");
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
alert("In Catch");
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}
When I call this function it goes in the catch block in Firefox and Chrome, the textarea is displayed and it disappears with a flash. I've banged my head against wall trying to figure this out. Thanks, Abhishek hie everyone plz i want to know how to make tabs using javascript.... i want to make tabs like this website http://traveline.idea-sys.net/CSP/Default.aspx?A=2&P=50 --> (M/S Darakum - Description / GalleryDeck / Plan) can anyone help me plz? I'm writing a script in javascript(actually a chrome extension) and I need an object that I can write to it like this(sorry, don't know how to explain it better) and then I convert it to string with format of json. Code: id[129].weekDay[6].hour[23] = 0 Here, id is an array, that each element in it contain another array(weeksDay) and in that array each contain another array(hour). The id indices are unlimited, for weekDay 7 and hour 24. I searched in google but i couldn't find what I wanted. Actually don't know the best keyword to search.(objects in arrays?) I don't know what exactly it is called, I can write it's declaration in VB.NET if that helps you. I need to create an interactive map similar to the one on this site: http://viewers-guide.hbo.com/game-of-thrones/#!/map/ It is a map of a fictional area ( a real area but there are fictional buildings and characters on it) so I don't think google maps plugins are suitable. I don't want to reinvent the wheel, so if anybody has a good suggestion of a good jquery/javascript solution for interactive maps, please refer me to the relevant information. In other words, I need a map where by clicking the objects on the map, a popup window pops up with additional information about the 'scene' or a 'character'. In addition, the map will be dark from the beginning and more and more sites and characters will be revealed on it every week. Thanks for any tips! Hi... is there a way to create iframes using cookies and javascript ? What i need to do is to have a way to create a cookie on page one, and use the info on page two to create the iframe. Users will see a list of "external links", once they click on a link, they will be redirected to a page that will generate a iframe of the chosen link. My guess is that if there is a way, it must need to use cookies to store the info (url) to get used by the script that will create the iframe on the page that will be used to show all iframes. Any ideas or help with this will be apriciated. Sorry for my poor english. I know I can use the functions like parseFromString() to access and modify an existing XML documents, but is it possible to use JavaScript to create a blank xml document? I want to take data entered into the client, package it up as XML and use ajax to transmit it to the server. So far I've written my own class to create a simple xml document, but I'd like to do it properly with the inbuilt functions. How do I use JavaScript or JavaScript API to implement camera viewing?
Hi, I am in need of creating a image toolbox in a web browser using javascript. Please find the requirements below. 1) The toolbox will contain some images within it. The toolbox can be moved anywhere within the window. 2) It is possible to drag and drop a image clone from the toolbox to the window. 3) It should be possible to click on the image in the toolbox and can be placed when click on the window (at the clicked position). 4) on double clicking the image in the toolbox, the selected image should get cleared. Please provide suggestion as well as the code snippets to achieve the requirements. Kindly reply ASAP. Thanks, Vinoth.K |
|||||||