Results 1 to 3 of 3

Thread: Year-view calendar

  1. #1
    Join Date
    Jan 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Year-view calendar

    hi folks

    i am using fullCalendar (jquery) for calendar uses, but now I have a need for the year to be displayed in a format of rows/strips per month.

    here is an example: Attachment 5115

    anyone know of something like this?

    many thanks!

    Edit: mod's edit:
    In the future, please do not double-post. This is the appropriate forum for your question; I have deleted your other thread.


    Edit: snooper's edit:
    I understand, but actually both solutions could have worked for me: either a JavaScript-based one, -or- ASP based, that's why i posted in both. anyway - thanks
    Last edited by snooper; 06-27-2013 at 05:25 AM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    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[*/
    #tst {
      position:relative;width:1105px;height:510px;background-Color:#FFFFCC;border:solid black 1px;
    }
    
    /* the Calendar Months*/
    .month {
      left:5px;width:80px;color:red;background-Color:#FFFFCC;border:solid black 1px;text-Align:center;
    }
    
    /* the Calendar Row*/
    .calendarrow {
      left:100px;top:5px;width:180px;color:red;background-Color:#FFFFCC;border:solid red 1px;margin-Bottom:5px;
    }
    
    /* 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 MouseOver Style*/
    .caldaysover {
      height:20px;background-Color:#FFFFCC;color:red;font-Size:12px;text-Align:center;
    }
    
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <input type="button" value="Year +ve" onmouseup="zxcYearCalendar.Year('tst',1);" />
    <input type="button" value="Year -ve" onmouseup="zxcYearCalendar.Year('tst',-1);" />
    <input type="button" value="GoTo 2013" onmouseup="zxcYearCalendar.GoToYear('tst',2013);" />
    <div id="tstyear" ></div>
    <div id="tst"></div>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </form>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Year Calendar (27-June-2013) DRAFT
    // by Viv Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcYearCalendar={
    
     Year:function(id,ud){
      var o=zxcYearCalendar['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      o?this.year(o,o.y+ud):null;
     },
    
     GoToYear:function(id,y){
      var o=zxcYearCalendar['zxc'+id],y=typeof(y)=='number'&&y>1970?y:false;
      y&&o?this.year(o,y):null;
     },
    
     init:function(o){
      var id=o.DaysID,p=document.getElementById(id),f=o.Format,z0=0;
      o.p=p;
      o.ary=[];
      o.f=typeof(f)=='string'&&f.charAt(0).toUpperCase()=='D'?1:0;
      o.over=typeof(o.MouseOver)=='function'?o.OnClick:false;
      for (var z0=0;z0<12;z0++){
       o.ary[z0]=[];
       this.make(o,z0);
      }
      zxcYearCalendar['zxc'+id]=o;
      this.year(o,new Date().getFullYear());
     },
    
     year:function(o,y){
      o.y=y;
      for (var z0=0;z0<12;z0++){
       this.dates(o,o.y,z0);
      }
      typeof(o.OnYear)=='function'?o.OnYear(o.y):null;
     },
    
     dates:function(o,cy,cm){
      var fday=new Date(cy,cm,1).getDay()-o.f;
      fday=fday<0?7+fday:fday;
      var ldate=new Date(cy,cm+1,1,-1).getDate(),d,z0=0;
      for (var z0=0;z0<o.ary[cm].length;z0++){
       d=z0>=fday&&z0<fday+ldate?z0-fday+1:'';
       o.ary[cm][z0][1]=d?[cy,cm+1,z0-fday+1]:'';
       o.ary[cm][z0][0].innerHTML=d&&d<10?'0'+d:d;
      }
     },
    
     make:function(o,nu){
      var r=document.createElement('DIV'),nme=r.cloneNode(false),days=r.cloneNode(false),m=r.cloneNode(false),dsz=o.DayWidth,dn,d,sz=37,z0=o.f;
      r.style.position='relative';
      r.className=o.RowClass;
      o.p.appendChild(r);
      days.style.position=nme.style.position='relative';
      r.appendChild(nme);
      r.appendChild(days);
      for (;z0<=sz;z0++){
       dn=r.cloneNode(false);
       dn.style.position='absolute';
       dn.style.left=(dsz)*(z0-o.f)+'px';
       dn.style.width=dsz+'px';
       dn.innerHTML=o.Days[z0%7];
       dn.className=o.DayNameClass;
       nme.appendChild(dn);
       d=dn.cloneNode(false);
       d.className=o.DayClass;
       d.innerHTML=z0;
       days.appendChild(d);
       d=[d];
       typeof(o.OnClick)=='function'?this.addevt(d[0],'click','click',o,d):null;
       typeof(o.MouseOver)=='function'?this.addevt(d[0],'mouseover','over',o,d):false;
       typeof(o.MouseOut)=='function'?this.addevt(d[0],'mouseout','out',o,d):false;
       o.ary[nu].push(d);
      }
      r.style.width=dsz*sz+(o.f==0?dsz:0)+'px';
      days.style.width=nme.style.width=r.style.width;
      nme.style.height=dn.offsetHeight+'px';
      days.style.height=d[0].offsetHeight+'px';
      m.style.position='absolute';
      m.className=o.MonthClass;
      m.style.top=r.offsetTop+'px';
      m.innerHTML=o.Months[nu];
      o.p.appendChild(m);
     },
    
     click:function(o,a){
      o.OnClick(a);
     },
    
     over:function(o,a){
      a[1]?o.MouseOver(a):null;
     },
    
     out:function(o,a){
      a[1]?o.MouseOut(a):null;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    
    }
    
    
    zxcYearCalendar.init({
     DaysID:'tst',
     Months:['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
     Days:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
     Format:'mm/dd/yyyy', // 'mm/dd/yyyy' or 'dd/mm/yyyy'.
     DayWidth:26,
     MonthClass:'month',
     RowClass:'calendarrow',
     DayNameClass:'caldayrow',
     DayClass:'caldays',
     OnClick:function(date){
    document.Show.Show0.value=date;
     },
     MouseOver:function(date){
      date[0].className='caldaysover';
     },
     MouseOut:function(date){
      date[0].className='caldays';
     },
     OnYear:function(y){
      document.getElementById('tstyear').innerHTML=y
     }
    })
    /*]]>*/
    </script>
    </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/

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    To clarify the forum rules:
    I understand, but actually both solutions could have worked for me: either a JavaScript-based one, -or- ASP based, that's why i posted in both. anyway - thanks
    Never post two threads with the same question, even if there are two possible places to ask. If you're not sure where to post, you could consider one of the more general forums like "looking for a script" or "other", or just guess at which one is (or might be) better (and we can help you to move it if needed later). Whichever way you do it, we'll do our best to help you. But posting twice takes up extra space and, more importantly, leads to two confusing half-conversations and wasted time.
    (The only exception to this would be if you wanted to have two different solutions to the same problem. Then it might be ok to ask twice, because you really have two separate questions. But then again, you could also post once asking about both solutions so that we'd save time finding out exactly what you need and also then be able to compare the solutions later.)
    However, thanks for trying to post in the right locations. If you have any questions about the forum, feel free to let us know (for example, by posting in the "feedback and announcements" section).


    But aside from that, I hope Vic's solution works for you.
    Daniel - Freelance Web Design | <?php?> | <html>| espaŮol | Deutsch | italiano | portuguÍs | catalŗ | un peu de franÁais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Similar Threads

  1. Replies: 0
    Last Post: 12-27-2012, 11:15 AM
  2. Hijri Calendar (Arabic Calendar)
    By al7ekaia in forum Looking for such a script or service
    Replies: 2
    Last Post: 07-07-2011, 07:16 PM
  3. Jason's Date Input Calendar - Calendar reappearing in IE8
    By NGJ in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-30-2011, 01:30 PM
  4. Weeks of the Scholastic year - calendar script needed
    By LThomas72 in forum Looking for such a script or service
    Replies: 3
    Last Post: 10-18-2008, 02:12 AM
  5. Replies: 0
    Last Post: 10-12-2008, 08:20 PM

Bookmarks

Posting Permissions

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