Help Please! Calendar Table PHP - I'm sooooo Close!

5 replies
Ok, I got this nifty theme today from a guy who created it.

He built in a calendar at the top of the blog, and if you click on the days it takes you to the posts.

It is perfect for my summer project.

But I am needing to adjust the calendar.

I figured out some things to change, but the months that follow after month one are now all screwey in placement, and the name of the month is moved as well.

So, Here is the original site/theme:

Code:
http://100daysofless.com/

Here is my site where I am playing to fix the customizations:

Code:
http://99daysofebb.wurdmess.com/
Here is the calendar code from the original:

Code:
<?php
$calPosts = new WP_Query();
$calPosts->query(array(
	'category_name'=>'Calendar',
	'posts_per_page'=>-1,
	'order'=>'ASC'
));
$calCount = 1;
$dateCount = 21;
$rowOffset = 0;
$calDone = false;
?>

<div id="calendar">
	<table cellpadding="0" cellspacing="1" summary="Calendar indexing 100 Days of Less posts for November 2009">
		<caption>November</caption>
		
		<tr>
			<th scope="col" title="Sunday">S</th>
			<th scope="col" title="Monday">M</th>
			<th scope="col" title="Tuesday">T</th>
			<th scope="col" title="Wednesday">W</th>
			<th scope="col" title="Thursday">T</th>
			<th scope="col" title="Friday">F</th>
			<th scope="col" title="Saturday">S</th>
		</tr>
		
		<tr>
			<td><span>1</span></td>
			<td><span>2</span></td>
			<td><span>3</span></td>
			<td><span>4</span></td>
			<td><span>5</span></td>
			<td><span>6</span></td>
			<td><span>7</span></td>
		</tr>
		
		<tr>
			<td><span>8</span></td>
			<td><span>9</span></td>
			<td><span>10</span></td>
			<td><span>11</span></td>
			<td><span>12</span></td>
			<td><span>13</span></td>
			<td><span>14</span></td>
		</tr>
		
		<tr>
			<td><span>15</span></td>
			<td><span>16</span></td>
			<td><span>17</span></td>
			<td><span>18</span></td>
			<td><span>19</span></td>
			<td><span>20</span></td>
		
		<?php
		while ($calCount <= 100) :
		?>
			<?php if ($dateCount % 7 == ($rowOffset + 1 == 7 ? 0 : ($rowOffset+1))) : ?>
			<tr>
			<?php endif; ?>
			
			<td>
			<?php if (!$calDone && $calPosts->have_posts()) :
			$calPosts->the_post();
			?>
				<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"<?php if (is_single(get_the_ID())) echo ' class="active"'; ?>><span><?php echo $dateCount; ?></span><?php echo $calCount; ?></a>
			<?php else : $calDone = true; ?>
				<p><span><?php echo $dateCount; ?></span><?php echo $calCount; ?></p>
			<?php endif; ?>
			</td>
			
			<?php if ($dateCount % 7 == $rowOffset) : ?>
			</tr>
			<?php endif; ?>
			
			<?php
			/* End November, begin December */
			if ($calCount == 10) :
			?>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		
		<table class="right-month" cellpadding="0" cellspacing="1" summary="Calendar indexing 100 Days of Less posts for December 2009">
			<caption>December</caption>
			
			<tr>
				<th scope="col" title="Sunday">S</th>
				<th scope="col" title="Monday">M</th>
				<th scope="col" title="Tuesday">T</th>
				<th scope="col" title="Wednesday">W</th>
				<th scope="col" title="Thursday">T</th>
				<th scope="col" title="Friday">F</th>
				<th scope="col" title="Saturday">S</th>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			<?php $dateCount = 0; $rowOffset = 5; endif; ?>
			
			<?php
			/* End December, begin January */
			if ($calCount == 41) :
			?>
				<td>&nbsp;</td>                                       
				<td>&nbsp;</td>
			</tr>
		</table>
		
		<table cellpadding="0" cellspacing="1" summary="Calendar indexing 100 Days of Less posts for January 2010">
			<caption>January</caption>
			
			<tr>
				<th scope="col" title="Sunday">S</th>
				<th scope="col" title="Monday">M</th>
				<th scope="col" title="Tuesday">T</th>
				<th scope="col" title="Wednesday">W</th>
				<th scope="col" title="Thursday">T</th>
				<th scope="col" title="Friday">F</th>
				<th scope="col" title="Saturday">S</th>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			<?php $dateCount = 0; $rowOffset = 2; endif; ?>
			
			<?php
			/* End January, begin February */
			if ($calCount == 72) :
			?>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		
		<table class="right-month" cellpadding="0" cellspacing="1" summary="Calendar indexing 100 Days of Less posts for February 2010">
			<caption>February</caption>
			
			<tr>
				<th scope="col" title="Sunday">S</th>
				<th scope="col" title="Monday">M</th>
				<th scope="col" title="Tuesday">T</th>
				<th scope="col" title="Wednesday">W</th>
				<th scope="col" title="Thursday">T</th>
				<th scope="col" title="Friday">F</th>
				<th scope="col" title="Saturday">S</th>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
			<?php $dateCount = 0; $rowOffset = 6; endif; ?>
		<?php $dateCount++; $calCount++; endwhile; ?>
		
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>

And, for you to laugh at, my own attempt at hacking into things I know essentially nothing about:

Code:
<?php
$calPosts = new WP_Query();
$calPosts->query(array(
	'category_name'=>'Calendar',
	'posts_per_page'=>-1,
	'order'=>'ASC'
));
$calCount = 1;
$dateCount = 30;
$rowOffset = 0;
$calDone = false;
?>

<div id="calendar">
	<table cellpadding="0" cellspacing="1" summary="Calendar indexing 99 Days of Ebb posts for May 2011">
		<caption>May</caption>
		
		<tr>
			<th scope="col" title="Sunday">S</th>
			<th scope="col" title="Monday">M</th>
			<th scope="col" title="Tuesday">T</th>
			<th scope="col" title="Wednesday">W</th>
			<th scope="col" title="Thursday">T</th>
			<th scope="col" title="Friday">F</th>
			<th scope="col" title="Saturday">S</th>
		</tr>
		
		<tr>
			<td><span>1</span></td>
			<td><span>2</span></td>
			<td><span>3</span></td>
			<td><span>4</span></td>
			<td><span>5</span></td>
			<td><span>6</span></td>
			<td><span>7</span></td>
		</tr>
		
		<tr>
			<td><span>8</span></td>
			<td><span>9</span></td>
			<td><span>10</span></td>
			<td><span>11</span></td>
			<td><span>12</span></td>
			<td><span>13</span></td>
			<td><span>14</span></td>
		</tr>
		
		<tr>
			<td><span>15</span></td>
			<td><span>16</span></td>
			<td><span>17</span></td>
			<td><span>18</span></td>
			<td><span>19</span></td>
			<td><span>20</span></td>
                        <td><span>21</span></td>
        </tr> 
           
        <tr>
			<td><span>22</span></td>
			<td><span>23</span></td>
			<td><span>24</span></td>
			<td><span>25</span></td>
			<td><span>26</span></td>
			<td><span>27</span></td>
                        <td><span>28</span></td>
        </tr>

        <tr>
			<td><span>29</span></td>
			  
		
		<?php
		while ($calCount <= 100) :
		?>
			<?php if ($dateCount % 7 == ($rowOffset + 1 == 7 ? 0 : ($rowOffset+1))) : ?>
			<tr>
			<?php endif; ?>
			
			<td>
			<?php if (!$calDone && $calPosts->have_posts()) :
			$calPosts->the_post();
			?>
				<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"<?php if (is_single(get_the_ID())) echo ' class="active"'; ?>><span><?php echo $dateCount; ?></span><?php echo $calCount; ?></a>
			<?php else : $calDone = true; ?>
				<p><span><?php echo $dateCount; ?></span><?php echo $calCount; ?></p>
			<?php endif; ?>
			</td>
			
			<?php if ($dateCount % 7 == $rowOffset) : ?>
			</tr>
			<?php endif; ?>
			
			<?php
			/* End May, begin June */
			if ($calCount == 2) :
			?>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		
		<table class="right-month" cellpadding="0" cellspacing="1" summary="Calendar indexing 99 Days of Ebb posts for June 2011">
			<caption>June</caption>
			
			<tr>
				<th scope="col" title="Sunday">S</th>
				<th scope="col" title="Monday">M</th>
				<th scope="col" title="Tuesday">T</th>
				<th scope="col" title="Wednesday">W</th>
				<th scope="col" title="Thursday">T</th>
				<th scope="col" title="Friday">F</th>
				<th scope="col" title="Saturday">S</th>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			<?php $dateCount = 0; $rowOffset = 5; endif; ?>
			
			<?php
			/* End June, begin July */
			if ($calCount == 32) :
			?>
				<td>&nbsp;</td>                                       
				<td>&nbsp;</td>
			</tr>
		</table>
		
		<table cellpadding="0" cellspacing="1" summary="Calendar indexing 99 Days of Ebb posts for July 2011">
			<caption>July</caption>
			
			<tr>
				<th scope="col" title="Sunday">S</th>
				<th scope="col" title="Monday">M</th>
				<th scope="col" title="Tuesday">T</th>
				<th scope="col" title="Wednesday">W</th>
				<th scope="col" title="Thursday">T</th>
				<th scope="col" title="Friday">F</th>
				<th scope="col" title="Saturday">S</th>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			<?php $dateCount = 0; $rowOffset = 2; endif; ?>
			
			<?php
			/* End July, begin August */
			if ($calCount == 62) :
			?>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		
		<table class="right-month" cellpadding="0" cellspacing="1" summary="Calendar indexing 100 Days of Less posts for February 2010">
			<caption>August</caption>
			
			<tr>
				<th scope="col" title="Sunday">S</th>
				<th scope="col" title="Monday">M</th>
				<th scope="col" title="Tuesday">T</th>
				<th scope="col" title="Wednesday">W</th>
				<th scope="col" title="Thursday">T</th>
				<th scope="col" title="Friday">F</th>
				<th scope="col" title="Saturday">S</th>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
			<?php $dateCount = 0; $rowOffset = 6; endif; ?>
		<?php $dateCount++; $calCount++; endwhile; ?>
		
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
I don't understand things like why did the name of the month 'move' ?

Anyway, this is supposed to cover all 99 days of summer, so I think I am missing a table?

#calendar #close #php #soo #table
  • Profile picture of the author ussher
    no big deal here, your just not sliding enough.

    Look for the bit in your javascript file that reads:
    /* Get ur **** in order before the slide */ $('#month-container').css('margin-left', -801*dolData.month);

    and change that -801 to -901 and it should all be good.
    Signature

    "Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."

    - jamroom.net
    Download Jamroom free: Download
    {{ DiscussionBoard.errors[3953127].message }}
    • Profile picture of the author Jill Carpenter
      Hmm, didn't seem to make a difference, but thanks for looking.
      Signature

      "May I have ten thousand marbles, please?"

      {{ DiscussionBoard.errors[3953283].message }}
  • Profile picture of the author ussher
    It hasn't changed.
    Line 103 of script.js reads:
    $('#month-container').animate({marginLeft: -801*dolData.month}, 400, 'swing', function() {

    make it read:
    $('#month-container').animate({marginLeft: -901*dolData.month}, 400, 'swing', function() {

    --edit--
    actually, flag that.

    The reason the others are indented 100px is from the margin right on the first one. but the first one does not have a margin from a previous one pushing it right.
    Signature

    "Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."

    - jamroom.net
    Download Jamroom free: Download
    {{ DiscussionBoard.errors[3953374].message }}
    • Profile picture of the author Jill Carpenter
      Ok, got that all figured out actually. All about the hard coding in the calendar php file and making some adjustments, but now looking for one last detail.

      I had to add an additional month. So I get to August, but the arrow is not highlighting for September.

      Signature

      "May I have ten thousand marbles, please?"

      {{ DiscussionBoard.errors[3980714].message }}
  • Profile picture of the author ussher
    Looks like the arrow keys are ON/OFF depending on the width of .calendar-slide #month-container

    .calendar-slide #month-container {
    overflow: hidden;
    width: 4120px;


    }

    try increasing that 4120 by the size of a calendar, 901 and see if that helps. Its on style.css line 1
    Signature

    "Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."

    - jamroom.net
    Download Jamroom free: Download
    {{ DiscussionBoard.errors[3980745].message }}

Trending Topics