www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Calendar of Events

  1. #1
    Join Date
    Aug 2008
    Location
    Chicago, IL
    Posts
    7

    resolved [RESOLVED] Calendar of Events

    Hello,

    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.

  2. #2
    Join Date
    Aug 2008
    Location
    Chicago, IL
    Posts
    7

    Lightbulb ?

    Anyone?

    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".

    Thank you in advance.

  3. #3
    Join Date
    Nov 2008
    Posts
    157
    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.
    Last edited by mintedjo; 12-23-2008 at 03:59 AM.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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" 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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Aug 2008
    Location
    Chicago, IL
    Posts
    7

    Talking Thank you!!!

    You are my hero!!!

    Thank you very much!!!

    :d :d :d

    Quote Originally Posted by vwphillips View Post
    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" 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>

  6. #6
    Join Date
    Aug 2008
    Location
    Chicago, IL
    Posts
    7
    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.

    Any idea what could be the problem?

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Aug 2008
    Location
    Chicago, IL
    Posts
    7
    Quote Originally Posted by vwphillips View Post
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles