Solved

A fully client side multi-select calendar

Posted on 2004-09-15
2
292 Views
Last Modified: 2008-01-16
Hi

I need a fully client-side calendar control in my ASP.NET developed site.  I primarily use VB and I've very little knowledge of Java.  Essentially I need a calendar that the user can interact with, selecting dates - multi-select is vital.

I've had a search through previous questions/answers, but can't find anything.

Any suggestions?  Not sure how hard this may be or not, so the points offered may be grossly off the mark!
0
Comment
Question by:PoshDog
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 5

Accepted Solution

by:
LindzK earned 125 total points
ID: 12062941
The following code will work in both IE and netscape.

It shows a calendar on the page - when the user clicks a button on the calendar, they are prompted for a calendar event.

The event text, and the date are stored in a scrollable list box, below the calendar - the actual date inside the calendar changes colour to orange, to indicate that there is an event associated with it.

This allows multi selecting, because it stored the entries in teh list box.

If you wanted to tweak it, you could enable another event on the button, which takes them (by highlighting and scrolling to the right area in the text box) to the event for the date that they cicked, you would probably also want to add some 'remove events' functionality as well,
But I thought the code in it's current form, should be enough for you to play wth, as I don't know your full requirements.

Save the code below as a html page, and give it a whirl :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title></title>
  <SCRIPT LANGUAGE="JavaScript">


function setDate(str, btn)
{

 if (str == "   ")
 {
  return;
 }

 mnth1 = document.forms[0].month.value;
 ccmnth = mnth1;
 ccmnth++;
 year = document.forms[0].year.value;
 dateStr = ccmnth+"/"+str+"/"+year;

 dateStr = trim(dateStr);
 
   // create a new option for the list box
   var value;
   value = window.prompt("Please enter a calendar event");
   var objOption = new Option(dateStr + " " + value, dateStr  + " " +  value);
   // Add the option to the list box.
   document.getElementById("dateField").options[document.getElementById("dateField").options.length] = objOption;
   btn.style.background =  "#FF6600";

 
 //document.forms[1].dateField.value = document.forms[1].dateField.value +" , "+ dateStr;


}//setDate()

<!-- This function removes spaces from the selected date.--->

function trim(str) {

 res="";

 for(var i=0; i< str.length; i++) {
   if (str.charAt(i) != " ") {
     res +=str.charAt(i);
  }
 }
   
 return res;

}//trim()
 
<!-- This method retrieves the Month name given the Month number of the year. --->

function getMonthName(ccmnth) {

 if (ccmnth == 0) {
  name = "January";
 }else if(ccmnth==1) {
  name = "February";
 }else if(ccmnth==2) {
  name = "March";
 }else if(ccmnth==3) {
  name = "April";
 }else if(ccmnth==4) {
  name = "May";
 } else if(ccmnth==5) {
  name = "June";
 } else if(ccmnth==6) {
  name = "July";
 } else if(ccmnth==7) {
  name = "August";
 } else if(ccmnth==8) {
  name = "September";
 } else if(ccmnth==9) {
  name = "October";
 } else if(ccmnth==10) {
  name = "November";
 } else if(ccmnth==11) {
  name = "December";
 }

 return name;

}//getMonthName()

<!-- Get the number of days in the month based on the year. --->

function getNoOfDaysInMnth(ccmnth,yr) {
 
 rem = yr % 4;

 if(rem ==0) {
   leap = 1;
 } else {
  leap = 0;
 }

 noDays=0;

 if ( (ccmnth == 1) || (ccmnth == 3) || (ccmnth == 5) ||
      (ccmnth == 7) || (ccmnth == 8) || (ccmnth == 10) ||
      (ccmnth == 12)) {
  noDays=31;
 } else if (ccmnth == 2) {
           noDays=28+leap;
        } else {
           noDays=30;
 }

 //alert(noDays);
 return noDays;
 
     
}//getNoOfDaysInMnth()
 
<!-- The function to reset the date values in the buttons of the slots. --->

function fillDates(dayOfWeek1,noOfDaysInmnth) {

 for(var i=1; i<43; i++) {
   str = "s"+i;
   document.forms[0].elements[str].value="   ";
 }


 startSlotIndx = dayOfWeek1;
 slotIndx = startSlotIndx;

 for(var i=1; i<(noOfDaysInmnth+1); i++) {
  slotName = "s"+slotIndx;

  val="";
  if (i<10) {
    val = " "+i+" ";
  } else {
    val = i;
  }

  document.forms[0].elements[slotName].value = val;
  slotIndx++;
 }
 
}//fillDates()
 

<!-- The function that is called at the time of loading the paage. --->
<!-- This function displays Today's date and also displays the --->
<!-- the calendar of the current month. --->
 

function thisMonth() {

  dt = new Date();
  ccmnth  = dt.getMonth(); /* 0-11*/
  dayOfMnth = dt.getDate(); /* 1-31*/
  dayOfWeek = dt.getDay(); /*0-6*/
  yr = dt.getFullYear(); /*4-digit year*/

  //alert("month:"+(ccmnth+1)+":dayofMnth:"+dayOfMnth+":dayofweek:"+dayOfWeek+":year:"+yr);

  mnthName = getMonthName(ccmnth)+ " ";
  document.forms[0].month.value = ccmnth;
  document.forms[0].year.value = yr;
  document.forms[0].currMonth.value = ccmnth;
  document.forms[0].currYear.value = yr;
 
  document.forms[0].monthYear.value = mnthName+yr;
  document.forms[1].dateField.value = (ccmnth+1)+"/"+dayOfMnth+"/"+yr;

  startStr = (ccmnth+1)+"/1/"+yr;
  dt1 = new Date(startStr);
  dayOfWeek1 = dt1.getDay(); /*0-6*/

  noOfDaysInMnth = getNoOfDaysInMnth(ccmnth+1,yr);
  fillDates(dayOfWeek1+1,noOfDaysInMnth);
 

}//thisMonth()

<!--- The function that will be used to display the calendar of the next month. --->

function nextMonth() {

 var currMnth = document.forms[0].month.value;
 currYr = document.forms[0].year.value;

 if (currMnth == "11") {
    nextMnth = 0;
    nextYr = currYr;
    nextYr++;
 } else {
   nextMnth=currMnth;
   nextMnth++;
   nextYr = currYr;
 }

 mnthName = getMonthName(nextMnth);
 document.forms[0].month.value=nextMnth;
 document.forms[0].year.value=nextYr;
 document.forms[0].monthYear.value= mnthName+" "+nextYr;

 str = (nextMnth+1)+"/1/"+nextYr;
 dt = new Date(str);
 dayOfWeek = dt.getDay();

 noOfDays = getNoOfDaysInMnth(nextMnth+1,nextYr);

 fillDates(dayOfWeek+1,noOfDays);
 

}//nextMonth()

<!--- The method to display the calendar of the previous month.--->

function prevMonth() {

 var currMnth = document.forms[0].month.value;
 currYr = document.forms[0].year.value;

 if (currMnth == "0") {
    prevMnth = 11;
    prevYr = currYr;
    prevYr--;
 } else {
   prevMnth=currMnth;
   prevMnth--;
   prevYr = currYr;
 }

 str = (prevMnth+1)+"/1/"+prevYr;
 dt = new Date(str);
 dayOfWeek = dt.getDay();

 <!-- Remove the comment if do not want the user to go to any previous month than this current month.-->

 runningMonth = document.forms[0].currMonth.value;
 rMonth=runningMonth;
 rMonth++;
 runningYear = document.forms[0].currYear.value;
 rYear=runningYear;

 str = (rMonth)+"/1/"+rYear;
 dt1 = new Date(str);
 
 if (dt.valueOf() < dt1.valueOf()) {
   alert('Cannot Go Before Current Month');
   return;
 }
 
 <!--- End of comment--->

 mnthName = getMonthName(prevMnth);
 document.forms[0].month.value=prevMnth;
 document.forms[0].year.value=prevYr;
 document.forms[0].monthYear.value= mnthName+" "+prevYr;

 noOfDays = getNoOfDaysInMnth(prevMnth+1,prevYr);
 fillDates(dayOfWeek+1,noOfDays);
 
}//prevMonth()

</SCRIPT>
</head>


<!-- This portion of the code goes between the '<BODY>' tags --->

<BODY onload="thisMonth()">
<table border=1 bgcolor="#BAA0A0" align=center>
<tr>
<td>
<form>
    <!-- Hidden fields --->

    <input type=hidden name=month value="">
    <input type=hidden name=year value="">
    <input type=hidden name=currMonth value="">
    <input type=hidden name=currYear value="">

 
    <!-- End of Hidden fields --->

    <p>
     <input type="button" name="prev" onclick="prevMonth()"
     value="<<">
     <input type="text" size="15" name="monthYear"
     value="">
     <input type="button" name="next" onclick="nextMonth()" value=">>">
   </p>
   
    <table bgcolor="#D4D4D4" align=center border="1" cellpadding="0" cellspacing="0"
    width="150">
        <tr bgcolor="#10A0A0">
            <td width="14%"><font size="1"><strong>SUN</strong></font></td>
            <td width="14%"><font size="1"><strong>MON</strong></font></td>
            <td width="14%"><font size="1"><strong>TUE</strong></font></td>
            <td width="14%"><font size="1"><strong>WED</strong></font></td>
            <td width="14%"><font size="1"><strong>THU</strong></font></td>
            <td width="15%"><font size="1"><strong>FRI</strong></font></td>
            <td width="15%"><font size="1"><strong>SAT</strong></font></td>
        </tr>
        <tr>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
          name="s1" value=" 1 "></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s2" value=" 2 "></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s3" value=" 3 "></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s4" value=" 4 "></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s5" value=" 5 "></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s6" value=" 6 "></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s7" value=" 7 "></td>
        </tr>
        <tr>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s8" value=" 8 "></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s9" value=" 9 "></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s10" value="10"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s11" value="11"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s12" value="12"></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s13" value="13"></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s14" value="14"></td>
        </tr>
        <tr>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s15" value="15"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s16" value="16"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s17" value="17"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s18" value="18"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s19" value="19"></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s20" value="20"></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s21" value="21"></td>
        </tr>
        <tr>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s22" value="22"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s23" value="23"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s24" value="24"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s25" value="25"></td>
            <td align="center" width="14%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s26" value="26"></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s27" value="27"></td>
            <td align="center" width="15%"><input type="button"
            onclick="setDate(this.value, this);"
            name="s28" value="28"></td>
        </tr>
        <tr>
            <td align="center"><input type="button" name="s29"
            onclick="setDate(this.value, this);"
            value="29"></td>
            <td align="center"><input type="button" name="s30"
            onclick="setDate(this.value, this);"
            value="30"></td>
            <td align="center"><input type="button" name="s31"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s32"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s33"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s34"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s35"
            onclick="setDate(this.value, this);"
            value="   "></td>
        </tr>
        <tr>
            <td align="center"><input type="button" name="s36"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s37"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s38"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s39"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s40"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s41"
            onclick="setDate(this.value, this);"
            value="   "></td>
            <td align="center"><input type="button" name="s42"
            onclick="setDate(this.value, this);"
            value="   "></td>
        </tr>
    </table>
</form>
 <form>
  <table border=0 cellspacing=1 cellpadding=1>
  <tr>
  <td>
  <b>Selected:</b>
  </td>
  <td align=center>
  <select name="" multiple size="2" name=dateField id=dateField style="width : 200px;">
  </select>

<!--  <input type=text width="200px" size="12" name=dateField>-->
  </td>
  <tr>
  </table>
 </form>
</td>
</tr>
</table>


</body>
</html>

0
 
LVL 3

Author Comment

by:PoshDog
ID: 12063391
Cheers - this will (with some tinkering) do the job

Posh
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question