I'm trying to find a way to create a calendar like on http://www.outfitevents.com/, where you hover over a date and in a separate box, events show up. However, they are using Flash to create that. On a site that i'm designing on, Prototype framework is being utilized. So, I'd like to find out if something like that is possible to do, and if yes, can someone point me in a right direction or how to go about getting it done using Prototype JS.
Basically, what I'm trying to do is have a calendar, so that when a visitor hovers over the date, event for that date shows up either in a separate div or as a "tooltip".
It's entirely possible.
And doesn't look difficult to do.
I'm sure you will get lots of help from people on here if you get stuck.
I don't know where you can find a tutorial or anything but all you need is basic DOM functions, tiny bit of css knowledge, and some html too.
HTML table for the calendar, and maybe a div element for the event text.
Javascript to make things happen when you move the mouse over dates or click things - onclick and onmouseover
CSS to make it look nice
The only thing you might need to think about is how you save the events for each date and how you get them.
If you have any more questions I'm sure me or somebody else will be able to help.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#txt {
width:100px;height:20px;border:solid black 1px;
}
/* the Calendar */
.cal {
width:180px;color:red;background-Color:#FFFFCC;border:solid black 1px;
}
/* the Calendar Title */
.caltitle {
color:red;font-Size:16px;text-Align:center;
}
/* the Calendar Forward Button */
.calfwd {
left:160px;top:3px;background-Color:red;width:13px;height:13px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/right.gif);
}
/* the Calendar Forward Back */
.calback {
left:10px;top:3px;background-Color:red;width:13px;height:13px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/left.gif);
}
/* the Calendar Day Name Row */
.caldayrow {
background-Color:#663300;color:#FFCC33;font-Size:12px;text-Align:center;
}
/* the Calendar Day Fields */
.caldays {
height:20px;background-Color:#CCFFFF;color:#000099;font-Size:12px;text-Align:center;
}
/* the Calendar Day Fields not reqired*/
.caldaynr {
height:20px;background-Color:#DDDDDD;font-Size:12px;text-Align:center;
}
/* the Calendar Memo Field */
.memo {
background-Color:#FFFFCC;
font-Weight:bold;
color:#FFCC66;
cursor:pointer;
}
/* the Calendar Memo Day Fields MouseOver Style*/
.caldayover {
background-Color:#000099;color:#CCFFFF;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Memo CalendarII (23-December-2008)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// Customising Variables
var MemoAry=[];
MemoAry[0]=['2008/12/20','Message 1'];
var zxcMonths=['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
var zxcDays=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var zxcDateFormat='mm/dd/yyyy/a'; // 'mm/dd/yyyy' or 'dd/mm/yyyy', add 'a' for alpa month.
// Functional Code(4.3K) - NO NEED TO CHANGE
var zxcCal;
var zxcFormat=zxcDateFormat.charAt(0)=='d'?1:0;
function zxcMemoCalendar(txtid,mary,lft,top){
var obj=document.getElementById(txtid);
if (!zxcCal) zxcMemoMakeCal();
zxcES(zxcCal,{visibility:'visible',left:zxcPos(obj)[0]+(lft?lft:obj.offsetWidth)+'px',top:zxcPos(obj)[1]+(top?top:obj.offsetHeight)+'px'});
zxcCal.obj=obj;
zxcConfigure('','','',mary);
}
function zxcConfigure(hd,cm,cy,mary){
if (!zxcCal) zxcMemoMakeCal();
if (!zxcCal.mary) zxcCal.mary=mary;
var now=new Date();
if (!cm) cm=now.getMonth()+1;
cm--;
if (!cy) cy=now.getFullYear();
zxcCal.date=[cm,cy];
zxcCal.my.firstChild.data=zxcMonths[cm]+' '+cy;
var fday=new Date(cy,cm,1).getDay()-zxcFormat;
var ldate=new Date(cy,cm+1,1,-1).getDate();
for (var z0=0;z0<42;z0++){
var cls=zxcCal.days[z0].className.split(' ')[0]+' ';
zxcCal.days[z0].className=cls;
if (z0>=fday&&z0<fday+ldate){
var date=new Date(cy,cm,z0-fday+1);
zxcCal.days[z0].date=cy+'/'+(cm+1>9?cm+1:'0'+cm+1)+'/'+(z0>9?z0:'0'+z0);
zxcCal.days[z0].firstChild.data=z0-fday+1;
zxcCal.days[z0].memo=false;
var date=cy+'/'+(cm+1>9?cm+1:'0'+cm+1)+'/'+(z0>9?z0:'0'+z0);
for (var z1=0;z1<zxcCal.mary.length;z1++){
if (zxcCal.mary[z1][0]==date){
zxcCal.days[z0].className=cls+' memo';
zxcCal.days[z0].memo=zxcCal.mary[z1][1];
}
}
}
else {
zxcCal.days[z0].className=cls+' caldaynr';
zxcCal.days[z0].firstChild.data=' ';
}
}
}
function zxcMemoMakeCal(){
zxcCal=zxcES('DIV',{position:'absolute',overflow:'hidden',visibility:'hidden',left:'400px',top:'50px',height:'100px'},document.body);
zxcCal.className='cal';
zxcCal.my=zxcES('DIV',{position:'relative'},zxcCal,'December');
zxcCal.my.className='caltitle'
var but=zxcES('DIV',{position:'absolute',overflow:'hidden'},zxcCal.my);
but.className='calback';
but.onclick=function(){ zxcMemoBackFwd(-1); }
var but=zxcES(but.cloneNode(true),{},zxcCal.my);
but.className='calfwd';
but.onclick=function(){ zxcMemoBackFwd(1); }
zxcDays.push(zxcDays[0]);
var dayrow=zxcES('DIV',{position:'relative'},zxcCal);
for (var div,z0=0+zxcFormat;z0<7+zxcFormat;z0++){
div=zxcES('DIV',{position:'absolute',left:(zxcCal.offsetWidth/7)*(z0-zxcFormat)+'px',width:zxcCal.offsetWidth/7+1+'px'},dayrow,zxcDays[z0]);
div.className='caldayrow';
}
zxcES(dayrow,{height:div.offsetHeight+'px'});
zxcCal.days=[];
var days=zxcES('DIV',{position:'relative'},zxcCal);
for (var z1=0;z1<42;z1++){
div=zxcES('DIV',{position:'absolute',left:(zxcCal.offsetWidth/7)*(z1%7)+'px',width:zxcCal.offsetWidth/7+1+'px'},days,z1||' ');
div.className='caldays';
zxcES(div,{top:Math.floor(z1/7)*div.offsetHeight+'px'});
zxcCal.days.push(div);
div.onmouseover=function(){ zxcMemoMse(this,true); }
div.onmouseout=function(){ zxcMemoMse(this,false); }
div.onclick=function(){ zxcMemoClick(this); }
}
zxcES(days,{height:div.offsetTop+div.offsetHeight+'px'});
zxcES(zxcCal,{height:days.offsetTop+days.offsetHeight+'px'});
}
function zxcMemoBackFwd(ud){
zxcCal.date[0]+=ud;
if (zxcCal.date[0]<0) zxcCal.date=[11,zxcCal.date[1]+=ud];
else if (zxcCal.date[0]>11) zxcCal.date=[0,zxcCal.date[1]+=ud];
zxcConfigure('',zxcCal.date[0]+1,zxcCal.date[1]);
}
function zxcMemoClick(obj){
if (obj.memo){
zxcCal.obj.innerHTML=obj.memo
}
}
function zxcMemoMse(obj,ud){
obj.style.cursor='default';
var cls=obj.className.replace(' caldayover','').split(' ');
if (obj.memo&&ud&&obj.firstChild.data!=' '&&(!cls[1]||cls[1]!='caldaynr')){
cls[cls.length]='caldayover';
obj.style.cursor='pointer';
}
obj.className=cls.join(' ');
}
function zxcES(ele,style,par,txt){
if (typeof(ele)=='string'){ ele=document.createElement(ele); }
for (key in style){ ele.style[key]=style[key]; }
if (par){ par.appendChild(ele); }
if (txt){ ele.appendChild(document.createTextNode(txt)); }
return ele;
}
function zxcPos(obj){
var rtn=[obj.offsetLeft,obj.offsetTop];
while(obj.offsetParent!=null){
var objp=obj.offsetParent;
rtn[0]+=objp.offsetLeft-objp.scrollLeft;
rtn[1]+=objp.offsetTop-objp.scrollTop;
obj=objp;
}
return rtn;
}
/*]]>*/
</script></head>
<body onload="zxcMemoCalendar('txt',MemoAry,-42,25)">
<center><div id="txt" ></div>
</center></body>
</html>
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![cdata[*/
#txt {
width:100px;height:20px;border:solid black 1px;
}
/* the calendar */
.cal {
width:180px;color:red;background-color:#ffffcc;border:solid black 1px;
}
/* the calendar title */
.caltitle {
color:red;font-size:16px;text-align:center;
}
/* the calendar forward button */
.calfwd {
left:160px;top:3px;background-color:red;width:13px;height:13px;background-image:url(http://www.vicsjavascripts.org.uk/stdimages/right.gif);
}
/* the calendar forward back */
.calback {
left:10px;top:3px;background-color:red;width:13px;height:13px;background-image:url(http://www.vicsjavascripts.org.uk/stdimages/left.gif);
}
/* the calendar day name row */
.caldayrow {
background-color:#663300;color:#ffcc33;font-size:12px;text-align:center;
}
/* the calendar day fields */
.caldays {
height:20px;background-color:#ccffff;color:#000099;font-size:12px;text-align:center;
}
/* the calendar day fields not reqired*/
.caldaynr {
height:20px;background-color:#dddddd;font-size:12px;text-align:center;
}
/* the calendar memo field */
.memo {
background-color:#ffffcc;
font-weight:bold;
color:#ffcc66;
cursor:pointer;
}
/* the calendar memo day fields mouseover style*/
.caldayover {
background-color:#000099;color:#ccffff;
}
/*]]>*/
</style>
<script language="javascript" type="text/javascript">
/*<![cdata[*/
// memo calendarii (23-december-2008)
// by vic phillips http://www.vicsjavascripts.org.uk
// customising variables
var memoary=[];
memoary[0]=['2008/12/20','message 1'];
var zxcmonths=['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
var zxcdays=['sun','mon','tue','wed','thu','fri','sat'];
var zxcdateformat='mm/dd/yyyy/a'; // 'mm/dd/yyyy' or 'dd/mm/yyyy', add 'a' for alpa month.
// functional code(4.3k) - no need to change
var zxccal;
var zxcformat=zxcdateformat.charat(0)=='d'?1:0;
function zxcmemocalendar(txtid,mary,lft,top){
var obj=document.getelementbyid(txtid);
if (!zxccal) zxcmemomakecal();
zxces(zxccal,{visibility:'visible',left:zxcpos(obj)[0]+(lft?lft:obj.offsetwidth)+'px',top:zxcpos(obj)[1]+(top?top:obj.offsetheight)+'px'});
zxccal.obj=obj;
zxcconfigure('','','',mary);
}
function zxcconfigure(hd,cm,cy,mary){
if (!zxccal) zxcmemomakecal();
if (!zxccal.mary) zxccal.mary=mary;
var now=new date();
if (!cm) cm=now.getmonth()+1;
cm--;
if (!cy) cy=now.getfullyear();
zxccal.date=[cm,cy];
zxccal.my.firstchild.data=zxcmonths[cm]+' '+cy;
var fday=new date(cy,cm,1).getday()-zxcformat;
var ldate=new date(cy,cm+1,1,-1).getdate();
for (var z0=0;z0<42;z0++){
var cls=zxccal.days[z0].classname.split(' ')[0]+' ';
zxccal.days[z0].classname=cls;
if (z0>=fday&&z0<fday+ldate){
var date=new date(cy,cm,z0-fday+1);
zxccal.days[z0].date=cy+'/'+(cm+1>9?cm+1:'0'+cm+1)+'/'+(z0>9?z0:'0'+z0);
zxccal.days[z0].firstchild.data=z0-fday+1;
zxccal.days[z0].memo=false;
var date=cy+'/'+(cm+1>9?cm+1:'0'+cm+1)+'/'+(z0>9?z0:'0'+z0);
for (var z1=0;z1<zxccal.mary.length;z1++){
if (zxccal.mary[z1][0]==date){
zxccal.days[z0].classname=cls+' memo';
zxccal.days[z0].memo=zxccal.mary[z1][1];
}
}
}
else {
zxccal.days[z0].classname=cls+' caldaynr';
zxccal.days[z0].firstchild.data=' ';
}
}
}
function zxcmemomakecal(){
zxccal=zxces('div',{position:'absolute',overflow:'hidden',visibility:'hidden',left:'400px',top:'50px',height:'100px'},document.body);
zxccal.classname='cal';
zxccal.my=zxces('div',{position:'relative'},zxccal,'december');
zxccal.my.classname='caltitle'
var but=zxces('div',{position:'absolute',overflow:'hidden'},zxccal.my);
but.classname='calback';
but.onclick=function(){ zxcmemobackfwd(-1); }
var but=zxces(but.clonenode(true),{},zxccal.my);
but.classname='calfwd';
but.onclick=function(){ zxcmemobackfwd(1); }
zxcdays.push(zxcdays[0]);
var dayrow=zxces('div',{position:'relative'},zxccal);
for (var div,z0=0+zxcformat;z0<7+zxcformat;z0++){
div=zxces('div',{position:'absolute',left:(zxccal.offsetwidth/7)*(z0-zxcformat)+'px',width:zxccal.offsetwidth/7+1+'px'},dayrow,zxcdays[z0]);
div.classname='caldayrow';
}
zxces(dayrow,{height:div.offsetheight+'px'});
zxccal.days=[];
var days=zxces('div',{position:'relative'},zxccal);
for (var z1=0;z1<42;z1++){
div=zxces('div',{position:'absolute',left:(zxccal.offsetwidth/7)*(z1%7)+'px',width:zxccal.offsetwidth/7+1+'px'},days,z1||' ');
div.classname='caldays';
zxces(div,{top:math.floor(z1/7)*div.offsetheight+'px'});
zxccal.days.push(div);
div.onmouseover=function(){ zxcmemomse(this,true); }
div.onmouseout=function(){ zxcmemomse(this,false); }
div.onclick=function(){ zxcmemoclick(this); }
}
zxces(days,{height:div.offsettop+div.offsetheight+'px'});
zxces(zxccal,{height:days.offsettop+days.offsetheight+'px'});
}
function zxcmemobackfwd(ud){
zxccal.date[0]+=ud;
if (zxccal.date[0]<0) zxccal.date=[11,zxccal.date[1]+=ud];
else if (zxccal.date[0]>11) zxccal.date=[0,zxccal.date[1]+=ud];
zxcconfigure('',zxccal.date[0]+1,zxccal.date[1]);
}
function zxcmemoclick(obj){
if (obj.memo){
zxccal.obj.innerhtml=obj.memo
}
}
function zxcmemomse(obj,ud){
obj.style.cursor='default';
var cls=obj.classname.replace(' caldayover','').split(' ');
if (obj.memo&&ud&&obj.firstchild.data!=' '&&(!cls[1]||cls[1]!='caldaynr')){
cls[cls.length]='caldayover';
obj.style.cursor='pointer';
}
obj.classname=cls.join(' ');
}
function zxces(ele,style,par,txt){
if (typeof(ele)=='string'){ ele=document.createelement(ele); }
for (key in style){ ele.style[key]=style[key]; }
if (par){ par.appendchild(ele); }
if (txt){ ele.appendchild(document.createtextnode(txt)); }
return ele;
}
function zxcpos(obj){
var rtn=[obj.offsetleft,obj.offsettop];
while(obj.offsetparent!=null){
var objp=obj.offsetparent;
rtn[0]+=objp.offsetleft-objp.scrollleft;
rtn[1]+=objp.offsettop-objp.scrolltop;
obj=objp;
}
return rtn;
}
/*]]>*/
</script></head>
<body onload="zxcmemocalendar('txt',memoary,-42,25)">
<center><div id="txt" ></div>
</center></body>
</html>
Now I'm trying to figure out how to implement the code that you've provided.
As I've mentioned earlier, I have the main "shell" - top banner, menu and then one DIV where everything gets loaded into through ajax.updater using prototype framework, when user clicks on the nav buttons. I've modified your code so that it looks and functions the way i want to. On it's own page, it works, but when i call upon that page through ajax.updater, it doesn't show up. everything else does, but the calendar doesn't.
its all according how ajax.updater fills the div and whar modification you have madde to my script.
the ajax.updater may be deleting the calendar.
The only things that i've modified was CSS.
what do you mean by how does ajax.updater fills the div?
Code:
<script>
function updateWithFile(file){
var url = file;
var pars = '';
var myAjax = new Ajax.Updater(
'glow', url,
{method: 'get', parameters: pars, evalScripts: true});
}
addEvent(window, 'load', function() {
updateWithFile('home.html')
});
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
var myGlobalHandlers = {
onCreate: function(){
Element.show('loadingdiv');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('loadingdiv');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
</script>
not sure if this will help.
I've broken down your code into separate .js and .css files. On a page on its own, it creates the calendar using those 2 files, but when I call upon that home.html page through Ajax, it doesn't create anything, it's just an empty spot. Do i need to "pre-load" those .js and .css files before, i.e. in a main "shell"...or do i include them into the home.html page? I've tried both ways and it didn't work, unless i did something wrong.
[RESOLVED] Calendar of Events
Reply With Quote
?
Thank you!!!
Originally Posted by vwphillips
Bookmarks