Solved

A fully client side multi-select calendar

Posted on 2004-09-15
2
291 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
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

830 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