Dynamic Jquery Datepicker calendar

Have you ever wanted to know what do you have to do tomorrow or in the next week without checking your agenda?

Today I’m going to show you how to use JQuery Datepicker and AJAX to create a calendar that looks like this:

This dynamic datepicker calendar will allow users to click on a date and see the events. It’s easy to create and very useful. The best part is that only the dates from the calendar that contain events are the clickable ones. Only by watching you will quickly see in what days of the month you have events. Now let’s begin!

To create a jquery calendar we will use a HTML file, a Javascript file and a PHP file requested with AJAX. Let’s begin!

1. The html file

This is the file you’re going to see in the browser. This file is the most important one because it contains the link to the JQuery libraries and the stylesheets.

1<!-- stylesheets -->
2 
3<!-- js files -->
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">// <![CDATA[
5    mce:0
6// ]]></script>
7<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">// <![CDATA[
8    mce:1
9// ]]></script>

Now that we’ve included the libraries, we have to add the output somewhere in the page. For this we’ll use 2 div elements (remember their ids because you’ll need them in the code). You don’t need to populate them. Just leave them like that.

1<!-- this div is used for the dialog box --></pre>
2<div id="dialog"></div>
3<pre></pre>
4<div id="datepicker"></div>
5<pre>

2. The javascript file

You can also put this code in the html file between the “<script>” tags. This script will have 2 parts:

The first part contains the function that is invoked when the page is loaded:
view source
print ?
1 $(document).ready(function()
2 {
3     var selected_dates = new Array();
4     // gets all the events from the database using AJAX
5     selected_dates = getSelectedDates();
6
7     $('#datepicker').datepicker({
8         dateFormat: 'yy-m-d',
9         inline: true,
10         beforeShowDay: function (date)
11         {
12             // gets the current month, day and year
13             // Attention: the month counting starts from 0 that's why you'll need to +1 to get the month right
14             var mm = date.getMonth() + 1,
15                 dd = date.getDate(),
16                 yy = date.getFullYear();
17             var dt = yy + "-" + mm + "-" + dd;
18
19             if(typeof selected_dates[dt] != 'undefined')
20             {
21                 // puts a special class to the dates in which you have events, so that you could distinguish it from the other ones
22                 // the "true" parameter is used to know which are the clickable dates
23                 return [true, " my_class"];
24             }
25
26             return [false, ""];
27         },
28         onSelect: function(date)
29         {
30             // puts the event's title in the dialog box
31             $("#dialog").attr("title",selected_dates[date]['event_title']); // for the first time you open the popup
32             $("#dialog").dialog("option","title",selected_dates[date]['event_title']);
33             // puts the event's description text in the dialog box
34             $("#dialog").text(selected_dates[date]['event_description']);
35             // show the dialog box
36             $("#dialog" ).dialog();
37         }
38     });
39 });
The second part is the function that returns all the events from the database using AJAX:
view source
print ?
1 function getSelectedDates()
2 {
3     var the_selected_dates = new Array();
4     $.ajax(
5     {
6         url: 'events.php',
7         dataType: 'json',
8         async: false,
9         success: function(data)
10         {
11             $.each(data, function(n, val)
12             {
13                 the_selected_dates[val.event_date] = val;
14             });
15         }
16     });
17     return the_selected_dates;
18 }

This is just an example of what you can obtain in the dialog box. You can also add a date (or anything else). There’s no limit.

3. As you can see in the javascript file, we have a PHP document requested with AJAX. You’ll need a database that has the events which you want to show. This is the code for creating the table that we will use:

1CREATE TABLE IF NOT EXISTS `events` (
2  `event_id` int(11) NOT NULL auto_increment,
3  `event_date` date NOT NULL,
4  `event_title` varchar(100) NOT NULL,
5  `event_description` text NOT NULL,
6  PRIMARY KEY  (`event_id`)
7)

In events.php, take all the events and put them in array. Now encode it in a json.
NOTE: I recommend you to customize this function and take only the events from the month/year where you have a large database.

1$dates = array();
2try
3{
4    $stmt = $dbh->query('
5                            SELECT
6                                *
7                            FROM
8                                events
9                        ');
10}
11catch (PDOException $e)
12{
13    print($e->getMessage());
14    die;
15}
16while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
17{
18    // because $row['event_date'] will have this form: 2012-01-10 and in Javascript we have 2012-1-10, we need to rewrite it in the way we use it in Javascript, so we could compare it
19    $row['event_date'] =  date("Y-n-j", strtotime($row['event_date']));
20    $dates[] = $row;
21}
22echo json_encode($dates);

You can download an archive with the code here.

If you have questions or suggestions please, don’t hesitate to tell me.

Online Solutions Development Blog |

RSS

76 Responses to Dynamic Jquery Datepicker calendar

Add a Comment Cancel reply

Categories

Recent Posts

Archives

Meta

Online Solutions Development Blog |

RSS