|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
|
|
#1
June 30th, 2009, 01:07 PM
|
|||
|
|||
|
Coding a calendar with checkboxes
I want to code a simple calendar that looks like this:
1stop-print.(c)(o)(m)/calendar_mock.jpg (i cant post links as a new user!) The Select all button selects all of the check boxes in the month that is displayed. the > and < buttons next to the month name change the month that is currently displayed. It should remember all of the checkboxes selected in each month, so when you come back to that month they are still selected. THIS IS THE BIGGEST CONCEPT I NEED TO LEARN. The >> buttons next to each row select all of the checkboxes on that given row. Pressing it again unselects the entire row. Done button, takes all of the checked boxes (in all of the months) and submits them. ..... How difficult would this be to code? I have pretty decent html and css skill and I can read and understand php without much effort.. but coding is another issue. I need to know if any of you have any suggestions on how to code this bad boy. Any tutorials that you think would help would be most useful. I've coded it in html, but its not functional. I need a starting point really... Thank you so much.
|
|
#2
June 30th, 2009, 01:47 PM
|
|||
|
|||
|
I don't remember where I got the calendar script itself, so if it is weird, it isn't my fault
 This should get you on the right track though Code:
<?php
$monthNames = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
?>
<?php
if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");
?>
<?php
$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];
$prev_year = $cYear;
$next_year = $cYear;
$prev_month = $cMonth-1;
$next_month = $cMonth+1;
if ($prev_month == 0 ) {
$prev_month = 12;
$prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
$next_month = 1;
$next_year = $cYear + 1;
}
?>
<html>
<head>
<title>PHP Calendar</title>
<script type="text/javascript">
function checkall() {
var coll = document.getElementsByName('cb');
for(var i = 0;i < coll.length; i++) {
document.getElementsByName('cb')[i].checked = true;
document.getElementById('checklink').innerHTML = "<a class='usepointer' onclick='uncheckall();'>Uncheck All</a>";
}
}
function uncheckall() {
var coll = document.getElementsByName('cb');
for(var i = 0;i < coll.length; i++) {
document.getElementsByName('cb')[i].checked = false;
document.getElementById('checklink').innerHTML = "<a class='usepointer' onclick='checkall();'>Check All</a>";
}
}
</script>
</head>
<body>
<style type="text/css">
.usepointer { cursor: pointer; }
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="mainTableTOC">
<tr>
<td class="monthYearRowTOC" colspan="7"><table width="100%">
<tr>
<td width="11%" class="monthYearTextTOC"><a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $prev_month . "&year=" . $prev_year; ?>"><<</a></td>
<td width="80%" class="monthYearTextTOC"><div align="center"><?php echo $monthNames[$cMonth-1].' '.$cYear; ?></div></td>
<td width="9%" class="monthYearTextTOC" style="text-align: right;"> <a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $next_month . "&year=" . $next_year; ?>">>></a></td>
</tr>
</table></td>
</tr>
<tr class="dayNamesTextTOC">
<td class="dayNamesRowTOC">Sun</td>
<td class="dayNamesRowTOC">Mon</td>
<td class="dayNamesRowTOC">Tue</td>
<td class="dayNamesRowTOC">Wed</td>
<td class="dayNamesRowTOC">Thu</td>
<td class="dayNamesRowTOC">Fri</td>
<td class="dayNamesRowTOC">Sat</td>
</tr>
<?php
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
$today = date("d");
for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ) echo "\n".'<tr class="rowsTOC">';
if($i < $startday) echo '<td class="sOtherTOC"></td>'. "\n" ;
else echo "\n" .'<td class="s20TOC"><div class=daynumTOC>'. ($i - $startday + 1) . '</div>'."\n".'<div class="titleTOC"><input type=\'checkbox\' name=\'cb\' /></div></td>';
if(($i % 7) == 6 ) { echo "\n</tr>";}
}
if($startday > 4)
{
$maxtable = 42;
}
else
{
$maxtable = 35;
}
$blank = $maxday + $startday;
$draw = $maxtable - $blank;
$i = 1;
while($i <= $draw)
{
echo '<td class="sOtherTOC"></td>';
$i++;
}
echo "</tr></table>";
?>
<p id="checklink"><a class="usepointer" onClick="checkall();">Check All</a></p>
</body>
</html>
|
|
#3
June 30th, 2009, 03:12 PM
|
|||
|
|||
|
Thanks alot. Although it doesn't remember what was checked off when you switch to another month and then switch back... which was my main issue.
 Anyone else?
|
|
#4
June 30th, 2009, 05:40 PM
|
|||
|
|||
|
People here aren't going to write your code for you... the script I posted should give you an idea of how coding a calendar works.If you need to save over checked boxes, you would probably want to use sessions and store what was checked. If you want someone to just code it for you, offer to pay them.
|
|
#5
July 1st, 2009, 12:15 PM
|
|||
|
|||
|
Deal. 50USD through paypal for someone who can code this.
Amember experience is not a necessity but is a bonus. The calendar will be used as a “shopping cart” in a way. Each checkbox represents a product. When it is checked the product is essentially “added to cart” and unchecked it is not added to cart. Amember code deals with all of this. The Select all button selects all of the check boxes in the month that is displayed. The > and < buttons next to the month name change the month that is currently displayed. It should remember all of the checkboxes selected in each month, so when you come back to that month they are still selected. The >> buttons next to each row select all of the checkboxes on that given row. Pressing it again unselects the entire row. Done button, takes all of the checked boxes (in all of the months) and submits them. It should be easily customizable such that I can simply edit one file and add/remove where checkboxes are and also change the link that each checkbox is associated with. It should be easy to add months (even if this means that I have to manually state the day number and where the checkboxes are located in the 7 x 6 grid) This is a sample of what the amember checkbox code looks like that should appear in EACH day of EACH month: <input type="checkbox" id="product1" name="product_id[]" value="2"/> SEE THE LINK IN THE FIRST POST FOR WHAT IT SHOULD LOOK LIKE. If anyones interested, I can post the html template that is shown in that picture.
|
|
#6
July 1st, 2009, 12:40 PM
|
|||
|
|||
|
Are you using a database backend at all?
__________________
Sir, a desire of knowledge is the natural feeling of mankind; and every human being, whose mind is not debauched, will be willing to give all that he has to get knowledge.
|
|
#7
July 1st, 2009, 12:55 PM
|
|||
|
|||
|
What benefits would that have?
I have no problem editing one file manually writing in the month name, which of the 7x6 squares have a numbers and check box (and filling in the checkbox information). Amember is a php code script that is installed on the host, and protects certain folders so only "members" who create an account with us have access to them. It deals with all of the backend stuff with mysql databases etc. But its fairly easy to customize... and you really dont need to even be bothered with it. I just need a php calendar that has sessions that remembers checked checkboxes and then when the "done" buttons is pressed, it submits all of the checked boxes with: <input type="hidden" name="action" value="renew" /> <input type="submit" value="Done" /> But its up to you. Aslong as it works Last edited by rfairweather : July 1st, 2009 at 01:03 PM.
|
|
#8
July 1st, 2009, 10:26 PM
|
|||
|
|||
|
If no one else hooks you up and I'm bored at work tomorrow, I'll finish the thing I started writing today.. and $50 USD later...it's yours. I'll try to avoid the database.
|
|
#9
July 2nd, 2009, 06:04 PM
|
|||
|
|||
|
I'm almost done, just need to make the 'check all boxes in row' buttons.... everything else is good though.
|
|
#10
July 2nd, 2009, 09:55 PM
|
|||
|
|||
|
rfairweather I've got it pretty much done, let me know how you'd like to exchange.
|
|
#11
July 3rd, 2009, 01:20 AM
|
|||||
|
|||||
|
this is what I came up with. I didn't feel like trying to do a table-less design because I didn't want to deal with browser differences (box model...grrrr) so I just used a table. It is completely done by javascript so no page loads when you click for a next/previous month and it remembers everything. It uses jquery (just a javascript library) to make it easy and the jquery is even pointing to the file hosted on google so you don't need to download/load it. The only thing that is a little odd is the date format which can be changed easily, but currently just uses the javascript Date.toDateString() (IE: "Fri Jul 31 2009"). If there is another format you would prefer, I/you can change it. I confirmed it to work in both IE and FF. All the months are working as far as I can tell and I've even tried selecting like an entire year and clicking done and it all showed up fine. Also, I confirmed that the format of the dates is compatible with php's strtotime() function to convert them to unix timestamps. Oh and it would be VERY easy to modify to have like php pull dates out of a db/file and check those boxes like if later on someone wanted to change the dates they had selected. you can just use JSON on the javascript data variable and populate what boxes should be pre-checked. hmmm, i can't think of anything else.
PHP Code:
edit: forgot to add that the select row thing. It looks up the first checkbox in that row and uses that as reference for whether the rest in the row should be checked or not. So if you check the first box in a row and click the button on that row, all will be unselected and vise-versa for if the first box is unchecked. Last edited by IAmALlama : July 3rd, 2009 at 01:36 AM. Reason: Fixed a small bug with the select all button.
|
|
#12
July 3rd, 2009, 08:23 AM
|
|||
|
|||
|
You done it again Llama....(outro theme music):
I think that's what I'm going to do today: Learn everything I can about jquery. I suppose I might as well just post the crappy (in comparison) code I made (I took Matt's code and added the stuff to make it work): PHP Code:
|
|
#13
July 3rd, 2009, 12:40 PM
|
|||||
|
|||||
|
Quote:
Seriously, JQuery is the best thing you can do to learn JS. It makes things SOOOO easy. Completely cross browser, easy "chainable" syntax...all kinds of stuff. I just got the book JQuery in action and went through that. It looks confusing at first, but once you get the hang of it you will see that it is really quite easy.
|
|
#14
July 3rd, 2009, 07:33 PM
|
|||
|
|||
|
Quote:
Yeah I spent a good 4 hours today reading a bunch of beginner tutorials...it actually makes ajax easier too. So far almost everything seems different from regular Javascript. I like that it's cross browser - such a pain to rewrite code to figure out what works for all. I'm going to have to get a book to really learn it I think, since it's pretty much it's own language....
|
|
#15
July 5th, 2009, 04:24 PM
|
|||
|
|||
|
Thanks both of you. I am not sure what I should do about payments at this point...
Some issues I have with yours llama... First of all, wow, fantastic work. Secondly, Is there a way I can set up if statements that say, if the box representing "Thu Jul 02 2009" is checked, then treat the checkbox as if the code was "<input type="checkbox" id="product1" name="product_id[]" value="X"/>" where the variable X is different for each day. I mean to say that if we were to sell databases for All of july, august and september 2009 we would create 92 products in total, each listed from 1 (july 1st) to 92 (september 30). So if i were to check mark the box on july 1st 2009 and check mark a box on september 30th 2009 then the form would act as if these were the checkboxes that were selected: <input type="checkbox" id="product1" name="product_id[]" value="1"/> <input type="checkbox" id="product1" name="product_id[]" value="92"/> Its just how the arrays are set up with the membership software my site is using, amember.
|
|
| Viewing: Codewalkers Forums > PHP Related > PHP Coding > Coding a calendar with checkboxes |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
