[MOD-AJAX] - Calendar for details in header

[thunderstrike]

I search in forum for calendar. User request for see detail image with calendar date. I code with Ajax - I like.
Note: I no help for ajax code.

- New image for each date: Check !
- All lang: Check !
- Group with image date for each date: Check !
- Template for detail calendar: Check !
- Use thumbnail_bit: Check !
- Screenshot: Check !
- If date change in ACP - > Images - > Edit Images + use query for calendar - page is no redirect (No change date )
- Test - Y-m-d date format.
- Test - 4images v1.74 (Firefox) - Check !
- Test - 4images v1.74 (IE 7) - Is work (redirect loop)
- Template for core calendar: No check ! (PHP skill need for edit table and DIV template in ajax_calendar.php) .
- Use paging: No check ! (I add later)

// Step 1

In root folder, create file: ajax_calendar.php .

Add:

Code: [Select]

<?php

define('GET_CACHES', 1);
define('ROOT_PATH', './');
include(ROOT_PATH . 'global.php');
require(ROOT_PATH . 'includes/sessions.php');
$user_access = get_permission();

if ($action == "") {
    $action = "show_calendar";
}

if ($action == "show_calendar") {

if (isset($HTTP_GET_VARS['month'])) {
    $month = (isset($HTTP_GET_VARS['month'])) ? intval(trim($HTTP_GET_VARS['month'])) : intval(trim($HTTP_POST_VARS['month']));
} else {
    $month = "";
}
if (isset($HTTP_GET_VARS['year'])) {
    $year = (isset($HTTP_GET_VARS['year'])) ? intval(trim($HTTP_GET_VARS['year'])) : intval(trim($HTTP_POST_VARS['year']));
} else {
    $year = "";
}

if ($month == '' && $year == '') { 
$time = time();
$month = date('n',$time);
    $year = date('Y',$time);
}

$date = getdate(mktime(0, 0, 0, $month, 1, $year));
$today = getdate();
$hours = $today['hours'];
$mins = $today['minutes'];
$secs = $today['seconds'];

if (strlen($hours) < 2) $hours = "0" . $hours;
if (strlen($mins) < 2) $mins = "0" . $mins;
if (strlen($secs) < 2) $secs = "0" . $secs;

$days = date("t", mktime(0, 0, 0, $month, 1, $year));
$start = $date['wday'] + 1;
$name = $date['month'];
$year2 = $date['year'];
$offset = $days + $start - 1;
 
if ($month == 12) { 
$next = 1; 
$nexty = $year + 1; 
} else { 
$next = $month + 1; 
$nexty = $year; 
}

if ($month == 1) { 
$prev = 12; 
$prevy = $year - 1; 
} else { 
$prev = $month - 1; 
$prevy = $year; 
}

if ($offset <= 28) $weeks = 28; 
elseif ($offset > 35) $weeks = 42; 
else $weeks = 35;

$output = '';

$output .= "
<table class='cal' cellspacing='1'>
<tr>
<td colspan='7'>
<table class='calhead'>
<tr>
<td>
<a href='javascript:navigate($prev,$prevy)'><img src=\"" . get_gallery_image("calLeft.gif") . "\"></a> <a href='javascript:navigate(\"\",\"\")'><img src=\"" . get_gallery_image("calCenter.gif") . "\"></a> <a href='javascript:navigate($next,$nexty)'><img src=\"" . get_gallery_image("calRight.gif") . "\"></a>
</td>
<td align='right'>
<div>" . $name . $year2 . "</div>
</td>
</tr>
</table>
</td>
</tr>
<tr class='dayhead'>
<td>" . $lang['ajax_calendar_sun'] . "</td>
<td>" . $lang['ajax_calendar_mon'] . "</td>
<td>" . $lang['ajax_calendar_tue'] . "</td>
<td>" . $lang['ajax_calendar_wed'] . "</td>
<td>" . $lang['ajax_calendar_thu'] . "</td>
<td>" . $lang['ajax_calendar_fri'] . "</td>
<td>" . $lang['ajax_calendar_sat'] . "</td>
</tr>";

$col = 1;
$cur = 1;
$next = 0;

$sql = "

SELECT i.image_id, i.image_date
FROM (" . IMAGES_TABLE . " i, " . CATEGORIES_TABLE . " c)
LEFT JOIN " . USERS_TABLE . " u ON (" . get_user_table_field("u.", "user_id") . " = i.user_id)
WHERE i.image_active = 1 AND i.cat_id = c.cat_id  AND (i.cat_id NOT IN (".get_auth_cat_sql("auth_viewimage", "NOTIN").", ".get_auth_cat_sql("auth_viewcat", "NOTIN")."))

";

$result = $site_db->query($sql);

$image_row = array();
while ($row = $site_db->fetch_array($result)) {
    $image_row[] = $row;
}

$new_cutoff = time() - 60 * 60 * 24 * $config['new_cutoff'];

$sql = "

SELECT image_date
FROM " . IMAGES_TABLE . "
WHERE image_active = 1 AND image_date >= " . $new_cutoff;

$result = $site_db->query($sql);

$new_image_row = array();
while ($row = $site_db->fetch_array($result)) {
    $new_image_row[] = $row;
}
$site_db->free_result();

$num_image_row = sizeof($image_row);
$num_new_image_row = sizeof($new_image_row);

$date_flag = false;
$new_image_flag = false;
for ($i = 1; $i <= $weeks; $i++) {
if ($next == 3) $next = 0;
if ($col == 1) $output .= "<tr class='dayrow'>";
    
    $output .= "<td valign='top' onMouseOver=\"this.className='dayover'\" onMouseOut=\"this.className='dayout'\">";     

if ($i <= ($days+($start-1)) && $i >= $start) {
        
        for ($k = 0; $k < $num_new_image_row; $k++) {
            $new_image_date = format_date($config['date_format'], $new_image_row[$k]['image_date']);
            if (preg_match("/(.+)\-(.+)\-(.+)/", $new_image_date, $new_date_content)) {
                $new_month_date_content = $new_date_content[2];
                $new_day_date_content = $new_date_content[3];
                
                if ($cur == $new_day_date_content && $month == $new_month_date_content) {
                    $new_image_flag = true;
                }                    
            }
        }
        
        $output .= "<div class='calendar_day'>";

if (($cur == $today[mday]) && ($name == $today[month])) $output .= " <b style='color:#C00'>";
        $date_flag = false;
        
        for ($j = 0; $j < $num_image_row; $j++) {
            $image_id = $image_row[$j]['image_id'];
            $image_date = format_date($config['date_format'], $image_row[$j]['image_date']);
            
            if (preg_match("/(.+)\-(.+)\-(.+)/", $image_date, $date_content)) {                
                $image_month_date = $date_content[2];
                $image_day_date = $date_content[3];
            }
            if ($cur == $image_day_date && $month == $image_month_date) {
                $output .= "<a href=\"" . $site_sess->url(ROOT_PATH . "details_calendar.php?action=show_details_calendar&image_date=" . $image_date) . "";
                $date_flag = true;            
            }
        }
        
        if (isset($date_flag) && $date_flag == true) {
            $output .= "\">" . $cur . "</b></a>" . ((isset($new_image_flag) && $new_image_flag == true) ? "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<sup class=\"new\">" . $lang['new'] : "") . "</sup></div></td>";
        
        } else {
            $output .= $cur . "</b></div></td>";        
        }

$cur++; 
$col++; 

} else { 
$output .= "&nbsp;</td>"; 
$col++; 
}  
    
    if ($col == 8) { 
    $output .= "</tr>"; 
    $col = 1; 
    }
}

$output .= "</table>";
  
echo $output;
unset ($output);
}

?>

// Step 2

In root folder, create file: details_calendar.php .

Add:

Code: [Select]

<?php

$main_template = "details_calendar";

define('GET_CACHES', 1);
define('ROOT_PATH', './');
include(ROOT_PATH . 'global.php');
require(ROOT_PATH . 'includes/sessions.php');
$user_access = get_permission();
include(ROOT_PATH . 'includes/page_header.php');

if ($action == "") {
    $action = "show_details_calendar";
}

$cache_id = create_cache_id(
  'page.index',
  array(
    $user_info[$user_table_fields['user_id']],
    isset($user_info['lightbox_image_ids']) ? substr(md5($user_info['lightbox_image_ids']), 0, 8) : 0,
    $config['template_dir'],
    $config['language_dir']
  )
);

if (!$cache_page_index || !$content = get_cache_file($cache_id)) {
// Always append session id if cache is enabled
if ($cache_page_index) {
  $old_session_mode = $site_sess->mode;
  $site_sess->mode = 'get';
}

ob_start();

if ($action == "show_details_calendar") {
    
    if (isset($HTTP_GET_VARS['image_date'])) {
        $image_date = (isset($HTTP_GET_VARS['image_date'])) ? un_htmlspecialchars(trim(intval($HTTP_GET_VARS['image_date']))) : 0;
        $image_date = preg_replace("/[^0-9-]+/i", "", $image_date);
    } else {
        $image_date = "";
    }
    
//-----------------------------------------------------
//--- Details Calendar --------------------------------
//-----------------------------------------------------
$site_template->register_vars(array(
  "has_rss"   => true,
  "rss_title" => "RSS Feed: ".format_text($config['site_name'], 2)." (".str_replace(':', '', $lang['details_calendar']).")",
  "rss_url"   => $script_url."/rss.php?action=images"
));

$imgtable_width = ceil(intval($config['image_table_width']) / $config['image_cells']);
if ((substr($config['image_table_width'], -1)) == "%") {
  $imgtable_width .= "%";
}

$additional_sql = "";
if (!empty($additional_image_fields)) {
  foreach ($additional_image_fields as $key => $val) {
    $additional_sql .= ", i.".$key;
  }
}

if (isset($additional_user_fields) && is_array($additional_user_fields) && !empty($additional_user_fields)) {
    foreach ($additional_user_fields as $key => $val) {
        $additional_sql .= ", u." . $key;
    }
}

$sql = "SELECT i.image_id, i.cat_id, i.user_id, i.image_name, i.image_description, i.image_keywords, i.image_date, i.image_active, i.image_media_file, i.image_thumb_file, i.image_download_url, i.image_allow_comments, i.image_comments, i.image_downloads, i.image_votes, i.image_rating, i.image_hits".$additional_sql.", c.cat_name".get_user_table_field(", u.", "user_name")."
        FROM (".IMAGES_TABLE." i,  ".CATEGORIES_TABLE." c)
        LEFT JOIN ".USERS_TABLE." u ON (".get_user_table_field("u.", "user_id")." = i.user_id)
        WHERE i.image_active = 1 AND c.cat_id = i.cat_id AND (i.cat_id NOT IN (".get_auth_cat_sql("auth_viewcat", "NOTIN")."))
        ORDER BY i.image_date DESC
        
        ";
        
$result = $site_db->query($sql);
$num_rows = $site_db->get_numrows($result);

if (!$num_rows)  {
  $details_calendar = "<table width=\"".$config['image_table_width']."\" border=\"0\" cellpadding=\"".$config['image_table_cellpadding']."\" cellspacing=\"".$config['image_table_cellspacing']."\"><tr class=\"imagerow1\"><td>";
  $details_calendar .= $lang['no_details_calendar'];
  $details_calendar .= "</td></tr></table>";
}
else  {
  $details_calendar = "<table width=\"".$config['image_table_width']."\" border=\"0\" cellpadding=\"".$config['image_table_cellpadding']."\" cellspacing=\"".$config['image_table_cellspacing']."\">";
  $count = 0;
  $bgcounter = 0;
  while ($image_row = $site_db->fetch_array($result)) {      
      if (format_date($config['date_format'], $image_row['image_date']) == $image_date) {
          if ($count == 0) {
              $row_bg_number = ($bgcounter++ % 2 == 0) ? 1 : 2;
              $details_calendar .= "<tr class=\"imagerow".$row_bg_number."\">\n";
          }
          $details_calendar .= "<td width=\"".$imgtable_width."\" valign=\"top\">\n";
          show_image($image_row);
          $details_calendar .= $site_template->parse_template("thumbnail_bit");
          $details_calendar .= "\n</td>\n";
          $count++;
          if ($count == $config['image_cells']) {
              $details_calendar .= "</tr>\n";
              $count = 0;
          }
      }
  } // end while
  if ($count > 0)  {
    $leftover = ($config['image_cells'] - $count);
    if ($leftover >= 1) {
      for ($f = 0; $f < $leftover; $f++) {
        $details_calendar .= "<td width=\"".$imgtable_width."\">\n&nbsp;\n</td>\n";
      }
      $details_calendar .= "</tr>\n";
    }
  }
  $details_calendar .= "</table>\n";  
} // end else

$site_template->register_vars("details_calendar", $details_calendar);
unset($details_calendar);
    
}

//-----------------------------------------------------
//--- Print Out ---------------------------------------
//-----------------------------------------------------
$clickstream = "<a href=\"" . $site_sess->url(ROOT_PATH . "index.php") . "\">" . $lang['home'] . "</a>" . $config['category_separator'] . $lang['details_calendar'];
$site_template->register_vars("clickstream", $clickstream);
$site_template->print_template($site_template->parse_template($main_template));

$content = ob_get_contents();
ob_end_clean();

if ($cache_page_index) {
  // Reset session mode
  $site_sess->mode = $old_session_mode;

  save_cache_file($cache_id, $content);
}

} // end if get_cache_file()

echo $content;

include(ROOT_PATH . 'includes/page_footer.php');
?>

// Step 3

In lang/english/main.php file,

add in top ?>:

Code: [Select]

$lang['ajax_calendar_sun'] = "Sun";
$lang['ajax_calendar_mon'] = "Mon";
$lang['ajax_calendar_tue'] = "Tue";
$lang['ajax_calendar_wed'] = "Wed";
$lang['ajax_calendar_thu'] = "Thu";
$lang['ajax_calendar_fri'] = "Fri";
$lang['ajax_calendar_sat'] = "Sat";
$lang['no_details_calendar'] = "No images found.";
$lang['show_details_calendar'] = "Details calendar";
$lang['details_calendar'] = "Details calendar";

// Step 4

In includes/page_header.php file,

find:

Code: [Select]

"lang_images_per_page" => $lang['images_per_page'],

add after:

Code: [Select]

"lang_show_details_calendar" => $lang['show_details_calendar'],

// Step 5

In templates/your_template - create file: ajax_calendar.js .

Add:

Code: [Select]

var req;

function navigate(month,year) {

        var url = "ajax_calendar.php?action=show_calendar&month="+month+"&year="+year;

        if(window.XMLHttpRequest) {

                req = new XMLHttpRequest();

        } else if(window.ActiveXObject) {

                req = new ActiveXObject("Microsoft.XMLHTTP");

        }

        req.open("GET", url, true);

        req.onreadystatechange = callback;

        req.send(null);

}

function callback() {        

        obj = document.getElementById("calendar");

        setFade(0);

        

if(req.readyState == 4) {

                if(req.status == 200) {

                        response = req.responseText;

                        obj.innerHTML = response;

                        fade(0);

                } else {

                        alert("There was a problem retrieving the data:\n" + req.statusText);

                }

        }

}

function fade(amt) {

if(amt <= 100) {

setFade(amt);

amt += 10;

setTimeout("fade("+amt+")", 5);

    }

}

function setFade(amt) {

obj = document.getElementById("calendar");



amt = (amt == 100)?99.999:amt;

  

// IE

obj.style.filter = "alpha(opacity:"+amt+")";

  

// Safari<1.2, Konqueror

obj.style.KHTMLOpacity = amt/100;

  

// Mozilla and Firefox

obj.style.MozOpacity = amt/100;

  

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = amt/100;

}

// Step 6

In templates/your_template - create file: details_calendar.html .

Add:

Code: [Select]

{header}
{ste_layout_top}
{ste_layout_left}                  
 <br />
                  {if msg}<b>{msg}</b><br /><br />{endif msg}
 <br />
 
                  {if msg}<b>{msg}</b><br /><br />{endif msg}
 
 {if is_admin}<! -- Details calendar -- >{endif is_admin}  
 <table width="450" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="head1">
                        <table width="100%" border="0" cellspacing="0" cellpadding="4">
                          <tr>
                            <td class="head1" valign="top">{lang_last_viewed_images}</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
   <tr>
                      <td class="head1">{details_calendar}</td>
                    </tr>
                  </table>          
 <br />
 {if is_admin}<! -- End of Details calendar -- >{endif is_admin}
                  
{ste_layout_below}
{footer}

(Note: This template use Universal layout MOD).

// Step 7

In templates/your_template/header.html (or templates/your_template/layout/header.html if use ULM) -

find:

Code: [Select]

{if has_rss}
<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />
{endif has_rss}

add after:

Code: [Select]

<script type='text/javascript' src="{template_url}/ajax_calendar.js"></script>

find:

Code: [Select]

<body bgcolor="#FFFFFF" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">

replace:

Code: [Select]

<body bgcolor="#FFFFFF" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475" onLoad='navigate("", "")'>

// Step 8

In templates/your_template folder - all file include: {header} and {footer} (or if use ULM: templates/your_template/layout/ste_layout_left.html file) -

use:

Code: [Select]

<table width="150" border="0" cellspacing="0" cellpadding="0" id="calback">
                    <tr>
                      <td class="head2" height="20"><img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_show_details_calendar}</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                    <tr>
                      <td align="center" class="row2" id="calendar">&nbsp;</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                  </table>
                  <br />

// Step 9

In templates/your_template/style.css file -

add:

Code: [Select]

calendar_td {
font-family: "Trebuchet MS", Arial, Veranda, sans-serif;
padding: 3px;
}

#calback {
background: #FFF url('calWaiting.gif') no-repeat 50% 100px;
margin: 0 auto;
width: 350px;
}

#calendar {
width: 100%;
height: 100%;
}

.cal {
background: #000;
width: 100%;
}

.calhead {
width: 100%;
font-weight: bold;
color: #FFF;
font-size: 20px;      
}

.calhead img {
border: none;
}

.dayhead {
height: 25px;
background: #EEE;
}

.dayhead td {
text-align: center;
color: #000;
}

.dayrow {
background: #FFF;
height: 40px;
}

.dayrow td {
width: 50px;
color: #000;
font-size: .7em;
}

.day {
float: right;
}

.dayover {
background: #EEE;
}

.dayout {
background: #FFF;
}

// Step 10

I post attach file for upload image (gif) in templates/your_template/images folder.

Demo here:

http://www.bmgadg.com/ajax_calendar.php

Finish

[Nicky]

not sticked, not moved.

MOD is NOT done.

no support for "I no help for ajax code".

will stay here

[thunderstrike]

MOD is NOT done.

MOD is ALL finish for this version.

no support for "I no help for ajax code".

I no can help for code I no get ... is my 2nd post for ajax and no want for put sticky and post free ? Request for paid - here I come

[Nicky]

lol..
moved, sticked..

[thunderstrike]

Ahh ! very good.

[ccsakuweb]

can i see a demo please?

[thunderstrike]

Screenshot in first post ... what is do is if click on previous / next month - no need for refresh full header gallery - only calendar refresh (save server juice. ).

[egyptsons]

can i see a demo please?

yes please is there is any demo ?

[thunderstrike]

No demo. Sorry. 

[edit] - Demo here:

http://www.bmgadg.com/ajax_calendar.php

[mawenzi]

- Test - 4images v1.74 (Firefox) - Check !
- Test - 4images v1.74 (IE 7) - No work ! (redirect loop)

... so this MOD is only for 25 - 30% of all internet users ...  ...

[thunderstrike]

No, this is right. I forget edit.
Is no problem with MOD - I see redirect with fresh 4images - if use IE7 ... maybe server problem ...
I edit post now.

Note: I no get post you send ... I no get German ... is something for IE7 ? 

[mawenzi]

... this post say, that only 25 - 30% of all internet users are using FF ...

[thunderstrike]

Ok ... is no problem with MOD - is something no in MOD for no work. All is work for IE7 and FF.
(1st topic edit)

[ch€ri{Bi}²]

No demo. Sorry. 

[edit] - Demo here:

http://www.bmgadg.com/ajax_calendar.php

hum!!! with no demo  about your integration and some substantial modifications... I am not sure that users can imagine the result on their own website!
 
i used the original code to do what i want but i want to know what THIS mod is doing... live!
 : who is using this mod ? (i just ask this question to find a live demo... )

[thunderstrike]

I post demo link in first post.
I post screenshot in first post.

I am not sure that users can imagine the result on their own website!

You no want it ? No install it
Let for user want this MOD.
Remember - this is free MOD.

http://www.bmgadg.com/ajax_calendar.php