Solved

A fully client side multi-select calendar

Posted on 2004-09-15
2
288 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
Comment Utility
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
Comment Utility
Cheers - this will (with some tinkering) do the job

Posh
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now