www.webdeveloper.com
Results 1 to 11 of 11

Thread: Select Multiple days from a calendar.

  1. #1
    Join Date
    Jul 2010
    Posts
    6

    Select Multiple days from a calendar.

    I'm trying to build an application that allows the users to have their "hours of availability" during a specific month/year/ etc.

    I'm looking for a script that allows me to select multiple days from a calendar using Javascript.

    Ideally it would be similar to a windows App where they can click CTRL and select individual dates. Entire weeks. or only a few days at a time.

    Does anyone know of a script like this?

    I'd like to take the results of the selection and insert them into a mysql database.

    Thank you in advance.
    Scott

  2. #2
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    I have a JavaScript routine which I think can help you, but it is too long to post here. Please e-mail me at jalarie0@yahoo.com requesting my datepop2.js file.
    Please give me a hand at http://www.gofundme.com/bkzr98.

  3. #3
    Join Date
    Feb 2014
    Posts
    2
    Quote Originally Posted by jalarie View Post
    I have a JavaScript routine which I think can help you, but it is too long to post here. Please e-mail me at jalarie0@yahoo.com requesting my datepop2.js file.
    i also need something like this..

  4. #4
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    Go to http://spruce.flint.umich.edu/~jalarie/jaa_kca.htm, drop down to the "needed by" line near the bottom, click on the "checkbox" item, and tell me (at jalarie0@gmail.com) if that is close to what you want.
    Please give me a hand at http://www.gofundme.com/bkzr98.

  5. #5
    Join Date
    Feb 2014
    Posts
    2
    Quote Originally Posted by jalarie View Post
    Go to http://spruce.flint.umich.edu/~jalarie/jaa_kca.htm, drop down to the "needed by" line near the bottom, click on the "checkbox" item, and tell me (at jalarie0@gmail.com) if that is close to what you want.
    yes that is similar. yours doesn't seem to work on that page.. i need to be able to select multiple days and then pass those days back to my php program..

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb

    Not as fancy, but you can add whatever CSS you want to make it pretty...

    Add your own submission validation checks.

    Main script: selectDatesCal.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <meta charset="UTF-8" />
    <HEAD>
    <TITLE> Calendar Date Selections </TITLE>
    <style type="text/css">
     #SingleCal { cursor:pointer; float:left; }
     #cal_actions { float:left; }
    </style>
    <script type="text/javascript" src="CalSelect.js"></script>
    <script type='text/javascript'>
    
    function $_(IDS) { return document.getElementById(IDS); }
    
    function GotSubmission() {
    // add validation checks
      return false;  // true if OK
    }
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str = sel[i].value;  fnd = i; }
      }
      return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
    } 
    </script>
    
    </HEAD>
    
    <BODY bgcolor=#ffffff>
    <FORM METHOD="POST" ACTION="javascript:alert('Success')" onsubmit="return GotSubmission()">
    <center>
    <table border="1">
     <tr>
     <th valign="top"> Click Date(s) Requested:<br>
    
      <div id="SingleCal"></div>
      <div id="cal_actions">
       <button class="btnCal" onclick="curyear-=1;ShowMonth(curmonth,curyear);return false">
       <span style="font-size:0.8em">&lt;Yr</span> </button><p>
       <button class="btnCal" onclick="curmonth--;if (curmonth<1) { curmonth=12; curyear-=1; };ShowMonth(curmonth,curyear);return false">
       <span style="font-size:0.8em">&lt;Mo</span> </button><p>
       <button class="btnCal" onclick="getNow();ShowMonth(curmonth,curyear);return false">
       <span style="font-size:0.8em">Now</span></button><p>
       <button class="btnCal" onclick="curmonth++;if (curmonth>12) { curmonth=1; curyear+=1; };ShowMonth(curmonth,curyear);return false">
       <span style="font-size:0.8em">Mo&gt;</span> </button><p>
       <button class="btnCal" onclick="curyear+=1;ShowMonth(curmonth,curyear);return false">
       <span style="font-size:0.8em">Yr&gt;</span> </button>
      </div>
     </th>
    
     <th valign="top" align="left">
      <span style="font-size:0.8em">MM/DD/YYYY</span><br>
      <textarea id="Dates" name="Dates" rows="8" cols="16"></textarea><br>Comments
      <button onclick="$_('Dates').value='';return false">Clear</button>
     </th>
    </tr>
    </table>
    
    <table border="0" width="40%"><tr>
    <th> <INPUT TYPE="reset" VALUE="Clear Form"> </th>
    <th> <INPUT TYPE="submit" VALUE="Submit Request"></th>
    </tr></table>
    
    </center>
    </FORM>
    <script type="text/javascript">
    var todaydate = new Date();
    var curmonth = 0;
    var curyear = 0;
    
    function getNow() {
      todaydate=new Date()
      curmonth=todaydate.getMonth()+1 //get current month (1-12)
      curyear=todaydate.getFullYear() //get current year
    }
    function ShowMonth(curmonth,curyear) {
      $_('SingleCal').innerHTML = buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1);
    }
    
    getNow();  ShowMonth(curmonth,curyear);
    </script>
    </BODY>
    </HTML>
    Javascript: CalSelect.js (modified slightly from original)
    Code:
    /* CalSelect.js */
    /***********************************************
    * Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
    * Script featured on Dynamic Drive (http://www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    function buildCal(m, y, cM, cH, cDW, cD, brdr){
      var mn=['January','February','March','April','May','June',
      		  'July','August','September','October','November','December'];
      var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
    
      var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
      oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
    
      var todaydate=new Date() //DD added
      var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
    
      dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
      var t='';
      t += t='<div class="'+cM+'">';
      t += '<table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0">';
      t += '<tr align="center">';
      t += '<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
      for (s=0;s<7;s++) t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
        t+='</tr><tr align="center">';
        for(i=1;i<=42;i++){
          var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : '&nbsp;';
          var xt = '';  if (x==scanfortoday) xt='<span id="today">'+x+'</span>' //DD added
          if (xt == '') xt = x;
    
    //      t+='<td class="'+cD+'" onclick="alert('+formatMDY(m,x,y)+')">'+xt+'</td>';
          t+='<td class="'+cD+'" onclick="updateSelDates('+m+','+x+','+y+');">'+xt+'</td>';
    
          if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
      }
      return t+='</tr></table></div>';
    }
    function formatMDY(m,x,y) {
      var MM = (m<10)?'0'+m:m;
    //  alert('*'+x+'*');  if (x == 0) { return ''; }
      var DD = (x<10)?'0'+x:x;
      return MM+'/'+DD+'/'+y;
    }
    function updateSelDates(m1,x1,y1) {
    // use following with 'textarea'
    	document.getElementById('Dates').value+= formatMDY(m1,x1,y1)+ '\n';
    // use following with type="text"
    //	document.getElementById('selectedDates').value= formatMDY(m1,x1,y1);
    }
    Last edited by JMRKER; 02-12-2014 at 02:11 PM.

  7. #7
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    Quote Originally Posted by tyankee View Post
    yes that is similar. yours doesn't seem to work on that page.. i need to be able to select multiple days and then pass those days back to my php program..
    It correctly sends the selected dates back to the calling page (to the "needed by" field) for me. What OS and browser are you using that doesn't work?
    Please give me a hand at http://www.gofundme.com/bkzr98.

  8. #8
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    My web host seems to have changed their server system to Unix and caused my site some problems. That page now works in Opera, Firefox, and IE; I still have a problem in Safari and have not checked it in Chrome. Please try it, again.
    Please give me a hand at http://www.gofundme.com/bkzr98.

  9. #9
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    Safari is working, now.
    Please give me a hand at http://www.gofundme.com/bkzr98.

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,366
    Quote Originally Posted by jalarie View Post
    My web host seems to have changed their server system to Unix and caused my site some problems. That page now works in Opera, Firefox, and IE; I still have a problem in Safari and have not checked it in Chrome. Please try it, again.
    Any change by your host should not translate to your site, PHP on a *nix or on a Windows based operating system, only difference ar the way paths are calculated and if you have used absolute path addressing, then thats where the problem is.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    Quote Originally Posted by \\.\ View Post
    Any change by your host should not translate to your site, PHP on a *nix or on a Windows based operating system, only difference ar the way paths are calculated and if you have used absolute path addressing, then thats where the problem is.
    Windows-based systems match pathnames without regard to capitalization; Unix systems require an exact match. It is, of course, my fault that I had used different capitalization. It has worked properly for over fifteen years, but.... I found the problems and fixed them.
    Please give me a hand at http://www.gofundme.com/bkzr98.

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