Calendar Styling

[johnnyboy16]

Howdy!

 

I've built a calendar and have included some of the script below with some a screen shots.  Basically, the issue I am having is with trying to center the cal_mnth class.  In other words, centering the month with the width of the entire calendar.  I am unable to figure out the best way to do this and  have tried wrapping the calendar in a div and using text-align: center, but it didn't help.  BTW, I'm a pretty unexperienced developer and this is my first attempt at a calendar.

 

Hope this post makes sense...

 

Thanks everyone.

 

 

if(mktime(0, 0, 0, $cmonth, 1, $year)>mktime(0, 0, 0, date('m'), 1, date('Y')))

      echo '<a href="'.$prevUrl.'" /><img src="image/leftarrow.png" class="l_arrow" alt="Previous Month"/>';

        else

      echo '';

 

      echo '<span class="cal_mnth">'.$mnthTxt.'</span>';

     

      echo '<a href="'.$nextUrl.'" /><img src="image/rightarrow.png" class="r_arrow" border="0" alt="Next Month"/></a>';

           

      echo '<table cellspacing="1px" cellpadding="0" width="'.$width.'" id="mycalendar" border="0" style="margin-top:5px;background-color:#CACACA;">';

      echo '<tr>

        <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(7)">S</th>

        <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(1)">M</th>

        <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(2)">T</th>

        <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(3)">W</th>

        <th class="td1" onclick="selectWeek(4)">T</th>

        <th class="td1" onclick="selectWeek(5)">F</th>

        <th class="td1" onclick="selectWeek(6)">S</th>

      </tr>';

      echo '<tr>';

      $firstrow = true;

      $cntr = 0;

      $arrCnt = count($dateArr);

      $idCntr = 0;

      foreach($dateArr as $dt)

      {

        list($day, $weekdayNo, $weekday, $month, $year) = explode('~', $dt);

       

        $day = (int) $day;

        if($firstrow)

        {

            $firstrow = false;

            if($weekdayNo<7)

            {

              for($cnt=1;$cnt<=$weekdayNo;$cnt++)

              {

                  echo '<td class="td2"> </td>';

                  $cntr++;

              }

            }

        }

       

        $currday = 0;

        $styleColor = '';

        $markidforcurrday = '';

        if(mktime(0,0,0, $day, $month, $year) == mktime(0,0,0, date('d'), date('m'), date('Y')) )

        {

            $styleColor = ' style="color:blue;font-weight:400;" ';

            $currday = 1;

            $markidforcurrday='_1';

        }

 

        echo '<td align="center" class="td2" id="dt_'.$weekdayNo.'_'.$idCntr.$markidforcurrday.'" '.$styleColor.' onmouseover="cngBg(this, \'#B6B7B4\', \'#FFFFFF\','.$day.','.$currday.')" onmouseout="cngBg(this, \'#FFFFFF\', \'#696969\','.$day.','.$currday.')"  onClick="selectDay(this, '.$day.', 1,'.$currday.');">'.$day.'</td>';

        $cntr++;

 

        if($cntr==7)

        {

            echo '</tr>';

            if($day<$arrCnt)

              echo '<tr>';

            $cntr=0;

            $idCntr++;

        }

      }

      if($cntr>0)

      {

        while($cntr<7)

        {

            echo '<td class="td2"> </td>';

            $cntr++;

        }

      }

      echo '</table>';

 

[attachment deleted by admin]

[haku]

1) Please do not post PHP scripts in the CSS section. PHP is irrelevant to CSS. Please post the output of your PHP scripts.

2) Please use <code></code> tags around your code to make it easier to read.

[johnnyboy16]

1.  My post was moved here by an administrator.

2.  Will fix this, thank you.

[johnnyboy16]

Howdy!

 

I've built a calendar and have included some of the script below with some a screen shots.  Basically, the issue I am having is with trying to center the cal_mnth class.  In other words, centering the month with the width of the entire calendar.  I am unable to figure out the best way to do this and  have tried wrapping the calendar in a div and using text-align: center, but it didn't help.  BTW, I'm a pretty unexperienced developer and this is my first attempt at a calendar.

 

Hope this post makes sense...

 

Thanks everyone.

 

 

if(mktime(0, 0, 0, $cmonth, 1, $year)>mktime(0, 0, 0, date('m'), 1, date('Y')))
      echo '<a href="'.$prevUrl.'" /><img src="image/leftarrow.png" class="l_arrow" alt="Previous Month"/>';
         else
      echo '';

[color=red]      echo '<span class="cal_mnth">'.$mnthTxt.'</span>';
[/color]      
      echo '<a href="'.$nextUrl.'" /><img src="image/rightarrow.png" class="r_arrow" border="0" alt="Next Month"/></a>';
            
      echo '<table cellspacing="1px" cellpadding="0" width="'.$width.'" id="mycalendar" border="0" style="margin-top:5px;background-color:#CACACA;">';
      echo '<tr>
         <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(7)">S</th>
         <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(1)">M</th>
         <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(2)">T</th>
         <th class="td1" onmouseover="cngBg(this, \'#9D9E9B\', \'#FFFFFF\',\'\')" onmouseout="cngBg(this, \'#EEEFEB\', \'#717070\',\'\')" onclick="selectWeek(3)">W</th>
         <th class="td1" onclick="selectWeek(4)">T</th>
         <th class="td1" onclick="selectWeek(5)">F</th>
         <th class="td1" onclick="selectWeek(6)">S</th>
      </tr>';
      echo '<tr>';
      $firstrow = true;
      $cntr = 0;
      $arrCnt = count($dateArr);
      $idCntr = 0;
      foreach($dateArr as $dt)
      {
         list($day, $weekdayNo, $weekday, $month, $year) = explode('~', $dt);
         
         $day = (int) $day;
         if($firstrow)
         {
            $firstrow = false;
            if($weekdayNo<7)
            {
               for($cnt=1;$cnt<=$weekdayNo;$cnt++)
               {
                  echo '<td class="td2"> </td>';
                  $cntr++;
               }
            }
         }
         
         $currday = 0;
         $styleColor = '';
         $markidforcurrday = '';
         if(mktime(0,0,0, $day, $month, $year) == mktime(0,0,0, date('d'), date('m'), date('Y')) )
         {
            $styleColor = ' style="color:blue;font-weight:400;" ';
            $currday = 1;
            $markidforcurrday='_1';
         }

         echo '<td align="center" class="td2" id="dt_'.$weekdayNo.'_'.$idCntr.$markidforcurrday.'" '.$styleColor.' onmouseover="cngBg(this, \'#B6B7B4\', \'#FFFFFF\','.$day.','.$currday.')" onmouseout="cngBg(this, \'#FFFFFF\', \'#696969\','.$day.','.$currday.')"  onClick="selectDay(this, '.$day.', 1,'.$currday.');">'.$day.'</td>';
         $cntr++;

         if($cntr==7)
         {
            echo '</tr>';
            if($day<$arrCnt)
               echo '<tr>';
            $cntr=0;
            $idCntr++;
         }
      }
      if($cntr>0)
      {
         while($cntr<7)
         {
            echo '<td class="td2"> </td>';
            $cntr++;
         }
      }
      echo '</table>';

[haku]

Admins sometimes move threads to the right section when necessary.

 

But you still reposted the php script and not the HTML output.