www.webdeveloper.com
Results 1 to 4 of 4

Thread: looking for javascript calendar with no images

  1. #1
    Join Date
    Mar 2006
    Posts
    146

    looking for javascript calendar with no images

    Hello,

    I am looking for a javascript calendar for my date input field that has no images in it. When I take a look at most calendars online, they have images for the buttons. I was looking for something that just had <, <<, >>, > instead.

    Does anyone have something like this?

    Thank,

    Derek

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380

    Lightbulb

    Something like this? ...

    HTML section
    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">
    <head>
    <title>Calendar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/>
    
    <style type="text/css">
    @media print { body { font-size: 16pt } }
    @media screen { body { font-size: 16px } }
    @media handheld { body { font-size: 24px } }
    @media screen, print { body { line-height: 1.2 } }
    
    div.cal {
      border: 1px solid blue;
      display: none;
    }
    </style>
    <script type="text/javascript" src="cal.js"></script>
    
    <script type="text/javascript">
    var MonthsYears = [ [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}],
                        [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}],
                        [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}] ];
    var month = 0;  var year = 0;
    var CalSize = 1;		// allows 1..12;
    var CalVert = 1;	 	// allows 1,2,3,4,6,12 as sizes
    var CalWide = 4;
    // var CalWide = CalSize / CalVert;
    
    Initialize();
    
    function InitMonth() {
      for (i=0; i<12; i++) { document.getElementById('cal'+i).style.display = 'none'; }
      for (i=0; i<CalSize; i++) { document.getElementById('cal'+i).style.display = 'block'; }
    }
    function InitYear() {
      for (i=0; i<12; i++) { document.getElementById('cal'+i).style.display = 'block'; }
    }
    
    function Initialize() {
      var now = new Date();   month = now.getMonth();  year = now.getFullYear();
      for (i=0; i<12; i++) {
        MonthsYears[i].Month = month;
        MonthsYears[i].Year = year;
      }
      Normalize(0);
    }
    function Normalize(amt) {
    // Array return idea from:
    //   http://www.webdeveloper.com/forum/showthread.php?t=167956
      var arr = new Array();
      for (i=0; i<12; i++) {
        MonthsYears[i].Month = month+i;
        MonthsYears[i].Year = year;
        arr = Adjust(amt,MonthsYears[i].Month,MonthsYears[i].Year);
        MonthsYears[i].Month = arr.AMonth;
        MonthsYears[i].Year = arr.AYear;
      }
    }
    function Adjust(Direction,M,Y) {
      M += Direction;
      if (M <  0) { M += 12;  Y = Y-1; }
      if (M > 11) { M -= 12;  Y = Y+1; }
      return {AMonth:M, AYear:Y};
    }
    function Redisplay() {
      var str = '';
      var calID = '';
      for (i=0; i<12; i++ ) {
        calID = 'cal'+i;
        str = displayCalendar(MonthsYears[i].Month+1,MonthsYears[i].Year);
        document.getElementById(calID).innerHTML = str;
      }
    }
    function AdjustMonthYear(Mamt,Yamt) {
      var arr = new Array();
      arr = Adjust(Mamt,month,year+Yamt);
       month = arr.AMonth;
       year = arr.AYear;
    }
    function prevMonthYear(Mamt,Yamt) { AdjustMonthYear(Mamt,Yamt);  Normalize(0);  Redisplay(); }
    function nextMonthYear(Mamt,Yamt) { AdjustMonthYear(Mamt,Yamt);  Normalize(0);  Redisplay(); }
    
    </script>
    </head>
    <body onLoad="InitMonth()">
    <!-- could also InitYear() if desired -->
    
    <script type="text/javascript">
      var calID = '';	 //  CalWide = CalSize / CalVert;
      var str = '<table border="0">';
      for (i=0; i<12; i++) {
        calID = 'cal'+i;
        if ((i % CalWide) == 0) { str += '<tr>'; }
        str += '<td><div id="'+calID+'" class="cal">'
        str += displayCalendar(MonthsYears[0].Month+1,MonthsYears[0].Year)+'</div></td>';
      }
      str += '<tr><th>';
      str += '<a href="#" onClick="InitMonth();Initialize();Redisplay();return false">Month</a>';
      str += ' / ';
      str += '<a href="#" onClick="InitYear();Redisplay();return false">Year</a>';
      str += '</th></tr>';
      str += '<tr><th>';
      str += '<button onClick="prevMonthYear( 0,-1);return false;">&lt;&lt;</button>';
      str += '<button onClick="prevMonthYear(-1, 0);return false;">&lt;</button>';
    //  str += '<button onClick="Initialize();Redisplay();return false;">*</button>';
      str += '<button onClick="nextMonthYear( 1, 0);return false;">&gt;</button>';
      str += '<button onClick="nextMonthYear( 0, 1);return false;">&gt;&gt;</button>';
      str += '</th></tr>';
    
      str += '</table>';
      document.write(str);
      Redisplay();
    </script>
    </body>
    </html>
    JS section
    Code:
    // Calendar Display
    var MonthOfYear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    
    function displayCalendar(month, year) {       
     month = parseInt(month);
     month--;		// adjustment when  'month' parameter passed as "1"..."12"
     year = parseInt(year);
     var i = 0;
     var days = getDaysInMonth(month+1,year);
     var firstOfMonth = new Date (year, month, 1);
     var startingPos = firstOfMonth.getDay();
     days += startingPos;
     var page = '<pre>       '+MonthOfYear[month]+' '+year;
     page += "\n Su Mo Tu We Th Fr Sa";
     page += "\n --------------------";
     for (i = 0; i < startingPos; i++) {
      if ( i%7 == 0 ) page += "\n ";
      page += "   ";
     }
     for (i = startingPos; i < days; i++) {
      if ( i%7 == 0 ) page += "\n ";
    //  if (i-startingPos+1 < 10) page += "0";
      if (i-startingPos+1 < 10) page += " ";
      page += i-startingPos+1;
     page += " ";
     }
     for (i=days; i<42; i++)  {
      if ( i%7 == 0 ) page += "\n ";
      page += "   ";
     }
     page += '</pre>';
     return page;
    }
    function getDaysInMonth(month,year)  {
     var days;
     if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)  days=31;
     else if (month==4 || month==6 || month==9 || month==11) days=30;
     else if (month==2)  {
     if (isLeapYear(year)) { days=29; }
     else { days=28; }
     }
     return (days);
    }
    function isLeapYear (Year) {
     if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); } else { return (false); }
    }

  3. #3
    Join Date
    Mar 2006
    Posts
    146
    This works pretty good. I didn't need the part that shows all the other months and now I am trying to have the numbers be inside a <td></td> or div to have a border or box like a calendar. I am trying to figure out if they click a date like july 1st, 2013 how I can get it to go inside an input field showing that what was selected. Ideally I have a text input field, when I click on it the calendar appears, they select a date and the calendar disappears and the date goes into the input field

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380

    Lightbulb

    That's another level of complexity that you did not specify in your first post.
    You should think through what it is that you want and design for that rather than try to add on at a later time.

    I only say this because too many times I have thought of some special feature I wanted to add to a simple bit of code,
    only to find out that I had to start from scratch because of too many coding conflicts as I modified the simplified code.

    See if this meets your needs. Note there is SOME similarity, but it is not just a straight line modification from simple to complex.

    HTML section:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Quick Month Calendar</title>
    
    <style type="text/css">
      div.cal { width:225px; } /* border: 1px solid blue; } */
      .date { cursor:pointer; font-size:0.9em; }  /* cursor:default; } */
    </style>
    
    <script type="text/javascript" src="./cal.js"></script>
    
    <script type="text/javascript">
    // Modified for: http://www.webdeveloper.com/forum/showthread.php?t=209904
    // Modified again for: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=283147
    
    var now = new Date();  				// normally use this
    var monthM = now.getMonth()+1;
    var yearM = now.getFullYear();
    
    function Initialize() {
      var now = new Date();  			// normally use this
      monthM = now.getMonth()+1;  	yearM = now.getFullYear();
      monthC = monthM;		yearC = yearM;
      return '';
    }
    
    </script>
    </head>
    <body onload="Initialize();CalendarRedisplay(monthM,yearM)">
    <input type="text" id="SelectedDate" value="" size="10"> 
    
    <table border="0"><tr><td>
     <table border="0">
      <tr>
      <td colspan="3">
      <div id="calM" class="cal">'
    <script type="text/javascript"> CalendarRedisplay(monthM,yearM); </script>
      </div></td></tr>
     </table>
    </td>
    <tr>
    </table>
    </body>
    </html>
    JS section:
    Code:
    // Calendar Display (cal.js)
    
    var MonthOfYear = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var DaysInMonth = ['',31,28,31,30,31,30,31,31,30,31,30,31];
    var monthC = 0;  var yearC = 0;
    
    function CalendarRedisplay(M,Y) {
      if (M < 1) { M = 12; Y--; }
      if (M > 12) { M = 1; Y++; }
      monthC = M;  yearC = Y;
      document.getElementById("calM").innerHTML =  displayCalendar(M,Y);
    }
    
    function displayCalendar(month, year) {
      month = parseInt(month);
      year = parseInt(year);
      var i = 0;
      var days = getDaysInMonth(month,year);
      var firstOfMonth = new Date (year, (month-1), 1);
      var startingPos = firstOfMonth.getDay();
      days += startingPos;
      var page = '<table border="1" width="100%"><tr><th colspan="7">';
      page += '<button onClick="CalendarRedisplay('+month+','+(year-1)+');return false">|</button> ';
      page += '<button onClick="CalendarRedisplay('+(month-1)+','+year+');return false">&lt;</button> ';
    
      page += '<button onClick="CalendarRedisplay('+monthM+','+yearM+');return false;">';
      page += MonthOfYear[month]+' '+year+'</button>';
    
      page += ' <button onClick="CalendarRedisplay('+(month+1)+','+year+');return false">&gt;</button>';
      page += ' <button onClick="CalendarRedisplay('+month+','+(year+1)+');return false">|</button>';
      page += '</th></tr>';
    
      page += '<tr><th class="date">Su</th><th class="date">Mo</th><th class="date">Tu</th><th class="date">';
      page += 'We</th><th class="date">Th</th><th class="date">Fr</th><th class="date">Sa</th></tr>';
      page += '<tr>';    
      for (i = 0; i < startingPos; i++) {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += '<th><span class="date">&nbsp;</span></th>';
      }
      for (i = startingPos; i < days; i++) {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += '<th><span class="date"';
        page += ' onclick="calAction('+"'"+pad(month)+'/'+pad(i-startingPos+1)+'/'+year+"'"+')">';
        page += (i-startingPos+1) + '</span></th>';
      }
      for (i=days; i<42; i++)  {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += "<td>&nbsp;</td>";
      }
      page += '</tr></table>';
      return page;
    }
    
    function getDaysInMonth(month,year)  {
      var days = DaysInMonth[month];
      if ((month == 2) && isLeapYear(year)) { days=29; } 
      return days;
    }
    
    function isLeapYear (Year) {
     if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); }
                                                               else { return (false); }
    }
    
    function pad(value) { return value=(value < 10)?'0'+value:value; }
    
    function calAction(info) { document.getElementById('SelectedDate').value = info; }

Thread Information

Users Browsing this Thread

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

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