Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with changing width of DIV based on columns

    I am trying to write an appointment program with a day view. Sometimes there are multiple appointments that span the same hour. I am able to create the calendar and place the appointment entries at the appropriate hour.

    My problem is that I am stumped on how to have Javascript figure out the width of the entry when there are multiple appointments.

    The best example I have is from a screenshot of Apple's web-based iCloud calendar. I've tried to understand their code (snippet below) but still can't figure out logic behind how to get something like this to work. Any help would be very much appreciated.

    Code:
    if(c){
    	var o=f.totalSubCols,q=f.subColStart,B=f.subColEnd;
    	if (!f.isMulti) {
    		b.push("proxy")
    	}
    	C=[];
    	if(o>6){
    		m=[];
    		if(l||q===1){
    			C.push("col-start1")
    		} else {
    			m.push("left:"+(((q-1)/o)*100)+"%")
    		}
    		if(l){
    			m.push("right:"+((100-((B-q+1)/o)*100))+"%")
    		} else {
    			if(B===o){
    				m.push("right:0px")
    			} else {
    				m.push("right:"+(100-(B/o)*100)+"%")
    			}
    		}
    	}else{
    		C.push("total-cols"+o);
    		if(l){
    			C.push("col-start1","col-end"+(B-q+1))
    		} else {
    			C.push("col-start"+q,"col-end"+B)
    		}
    	}
    }
    Attached Thumbnails Attached Thumbnails Need help with changing width of DIV based on columns-applecal.jpg  

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Given that what you want to display really *is* a table, I would take the simple approach and just *use* a <table>.

    If each row in the <table> represented, say, half an hour, then when you create a <td> for an event, you just use <td rowspan="x"> where "x" is the number of half hour segments it needs to occupy.

    When placing an appointment, you just create the <td> without concern as to whether or not there is already a <td> for that starting <tr>.

    You do, however, keep track of the maximum number of <td>s that are contained, ether directly or via rowspan, in any given row.

    Then you go back through the <table> and add blank <td>s as needed.

    But, you know, this would be *MUCH* better done in server-side code. Presumably, the appointments are in a database table, no? So a correctly structured SQL query would give you the data in ready-to-use fashion and then the PHP/ASP/JSP code to generate the table (or <div>s, if you still want to go that route) is nearly painless.

    The secret will be in building the DB correctly and in writing a clever SQL query.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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