SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,834
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)

    Caldendar: Popup On Mouseover And Select Multiple Days

    I'm working on a calendar and scheduling application and figured I'd ask for some pointers before I waste hours screwing around on my own. I did a search and didn't find the answer, so I am hoping someone here knows.

    My calendar will be in a table. Each day in a td. When someone has an event scheduled, the background of the td for the respective day will be colored. When someone hovers the mouse over the day, I want a little box to pop up with the start and end times along with any notes. How do I do this?

    For scheduling:

    I want users to be able to select a single day or multiple days then enter start and stop times for those days. I can figure out how to select a single day using onclick(), then clear a previously clicked day if they select another day or click outside the calendar.

    But I'm not sure how I would select multiple days. For example, someone clicks on the 5th, then holds ctrl and clicks on the 10th--I want to have both dates selected. How do I do that? How do I ensure that ctrl was clicked in addition to the mouseclick?

    Suggestions and pointers are appreciated!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The event object holds information about the state of certain keys (alt,ctrl,shift) when the event occurred.

    Here's a quickie example:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var selectedTDs = [];
    
    function clickDay(evt) {
    	evt = evt ? evt : window.event;
    	if (!evt.ctrlKey) {
    		for (var i=0; i < selectedTDs.length; i++) {
    			selectedTDs[i].style.backgroundColor = "";
    		}
    		selectedTDs = [];
    	}
    	selectedTDs.push(this);
    	this.style.backgroundColor = "yellow";
    }
    window.onload = function () {
    	var cal = document.getElementById("calendar");
    	var tds = cal.getElementsByTagName("td");
    	for (var i=0; i < tds.length; i++) {
    		tds[i].onclick = clickDay;
    	}
    }
    </script>
    </head>
    <body>
    <table id="calendar">
    <tr><td>day1</td><td>day2</td></tr>
    <tr><td>day3</td><td>day4</td></tr>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •