Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Generate calendar using PHP and browse it using AJAX

Here is a way to generate calendar using PHP and allow user to browse it using AJAX. You will need http://webcodingeasy.com/jquery.js to parse json structure.

You can modify this code, to limit month and year user can browse, and also attach link to specific dates, based on your database records.

So here is PHP code which generates json structure, that will be used for calendar:

<?php

//set up your timezone
date_default_timezone_set("Europe/Helsinki");

if(isset($_GET['date']) && isset($_GET['month']) && isset($_GET['year']))
{
    //setting year range
    if($_GET['year'] < 1)
    {
        $_GET['year'] = 2000;
    }
    
    //setting rules for incorrect month
    if($_GET['month'] < 1)
    {
        $_GET['month'] = 1;
    }
    else if($_GET['month'] > 12)
    {
        $_GET['month'] = 12;
    }
    
    //setting rules for incorrect date
    if($_GET['date'] < 1)
    {
        $_GET['date'] = 1;
    }
    else if($_GET['date'] > cal_days_in_month(0, $_GET['month'], $_GET['year']))
    {
        $_GET['month'] = cal_days_in_month(0, $_GET['month'], $_GET['year']);
    }
    
    //getting first_day of month
    $first_day = mktime(0,0,0, $_GET['month'], 1, $_GET['year']);
    
    //getting previos month
    if($_GET['month']-1 == 0)
    {
        $prev = 12;
        $year = $_GET['year'] - 1;
    }
    else
    {
        $prev = $_GET['month']-1;
        $year = $_GET['year'];
    }
    //getting days of previous month
    $prev_month = cal_days_in_month(0, $prev, $year);
    
    //getting day of week of this month
    $day_of_week = date("D", $first_day);
    
    //checking how many previous month days should we show in calendar
    switch($day_of_week)
    {
        case "Sun": $blank = 0; break;
        case "Mon": $blank = 1; break;
        case "Tue": $blank = 2; break;
        case "Wed": $blank = 3; break;
        case "Thu": $blank = 4; break;
        case "Fri": $blank = 5; break;
        case "Sat": $blank = 6; break;
    }
    //getting days of this month
    $days_in_month = cal_days_in_month(0, $_GET['month'], $_GET['year']);
    //start counting days of week
    $day_count = 1;
    $str = '[{"tr":[';
    //from which date should start previous month output
    $prev_month -= $blank;
    //outputting days from previous month
    while($blank > 0)
    {
        $str .= '{"date":'.(++$prev_month).', "type":"inactive"},';
        $blank--;
        $day_count++;
    }
    //counting days of month
    $day_num = 1;
    //outputting days of current month
    while($day_num <= $days_in_month)
    {
        $str .= '{"date":'.$day_num.', "type":"active"},';
        $day_num++;
        $day_count++;
        //starting new week
        if($day_count > 7)
        {
            $str = substr($str, 0, strlen($str)-1).']}';
            if($day_num <= $days_in_month)
            {
                $str .= ',{"tr":[';
            }
            $day_count = 1;
        }
    }
    //outputting dates of next month
    $cnt = 1;
    while($day_count > 1 && $day_count <=7)
    {
        $str .= '{"date":'.($cnt++).', "type":"inactive"},';
        $day_count++;
    }
    //checking if any dates of next month were outoputted
    if($cnt == 1)
    {
        $str = substr($str, 0, strlen($str)-1)."}]";
    }
    else
    {
        $str = substr($str, 0, strlen($str)-1)."]}]";
    }
    //outputting json structure
    echo $str;
}
?>

And here is how will parse json structure, generate calendar and allow user to browse it:

<html> <head> <script type="text/javascript" src="/js/jquery.js"></script> <script type='text/javascript'> function make_calendar(date, month, year) { jQuery.getJSON("calendar.php",{date: date, month: parseInt(month+1), year: year, ajax: 'true'}, function(j){ //name of the month var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); //making sure months will rotate if(month - 1 < 0) { var prev = 11; var pyear = year - 1; } else { var prev = month - 1; var pyear = year; } if(month + 1 > 11) { var next = 0; var nyear = year + 1; } else { var next = month + 1; var nyear = year; } //generating calendar table var table = "<table border='0' width='250'>"; table += "<tr><td><a href='javascript:void(0);' " + "onclick='make_calendar(" + date + ", " + month + "," + parseInt(year-1) + ")'><<</a></td>"; table += "<td><a href='javascript:void(0);' " + "onclick='make_calendar(" + date + ", " + prev + "," + pyear + ")'><</a></td>"; table += "<td colspan='3' width='150' align='center'>" + months[month] + "&nbsp;" + year + "</td>"; table += "<td><a href='javascript:void(0);' " + "onclick='make_calendar(" + date + ", " + next + "," + nyear + ")'>></a></td>"; table += "<td><a href='javascript:void(0);' " + "onclick='make_calendar(" + date + ", " + month + "," + parseInt(year+1) + ")'>>></a></td></tr>"; table += "</table><table border='1' width='250'>"; table += "<tr style='font-weight:bold;'><td>S</td><td>M</td>" + "<td>T</td><td>W</td><td>Th</td><td>F</td><td>Sat</td></tr>"; for (var i = 0; i < j.length; i++) { table += '<tr>'; for (var k = 0; k < j[i].tr.length; k++) { table += "<td "; //checking type of day if(j[i].tr[k].type == "inactive") { table += "style='background-color:gray'>"; } else { table += "style='color:blue'>"; } table += j[i].tr[k].date + "</td>"; } table += '</tr>'; } table += "</table>"; //outputting table document.getElementById("calendar").innerHTML = table; }) } </script> </head> <body> <div id='calendar'> </div> <script type='text/javascript'> //generating calendar with todays date d = new Date(); make_calendar(d.getDate(), d.getMonth(), d.getFullYear()); </script> </body> </html>

And here is an example:

 

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus