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!<\/p>\n To create a jquery calendar<\/strong> we will use a HTML file<\/strong>, a Javascript file<\/strong> and a PHP file<\/strong> requested with AJAX<\/strong>. Let’s begin!<\/p>\n 1. The html <\/strong>file<\/p>\n 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<\/strong> libraries and the stylesheets<\/strong>.<\/p>\n 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.<\/p>\n 2. The javascript<\/strong> file<\/p>\n You can also put this code in the html<\/strong> file between the “<script>” tags. This script<\/strong> will have 2 parts:<\/p>\n 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.<\/p>\n 3. As you can see in the javascript file<\/strong>, we have a PHP<\/strong> document requested with AJAX<\/strong>. You’ll need a database<\/strong> that has the events<\/strong> which you want to show. This is the code<\/strong> for creating the table that we will use:<\/p>\n In events.php<\/em>, take all the events and put them in array. Now encode it in a json<\/strong>. You can download an archive with the code here<\/a>.<\/p>\n If you have questions or suggestions please, don’t hesitate to tell me.<\/p>\n![\"jquery](\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2012\/01\/calendar.jpg\" "\\"calendar\\"")
<\/a><\/p>\n\r\n<!-- stylesheets -->\r\n\r\n<!-- js files -->\r\n<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5\/jquery.min.js">\/\/ <![CDATA[\r\n mce:0\r\n\/\/ ]]><\/script>\r\n<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8\/jquery-ui.min.js">\/\/ <![CDATA[\r\n mce:1\r\n\/\/ ]]><\/script>\r\n<\/pre>\n
\r\n<!-- this div is used for the dialog box --><\/pre>\r\n<div id="dialog"><\/div>\r\n<pre><\/pre>\r\n<div id="datepicker"><\/div>\r\n<pre><\/pre>\n
\n
\r\n$(document).ready(function()\r\n{\r\n\tvar selected_dates = new Array();\r\n\t\/\/ gets all the events from the database using AJAX\r\n\tselected_dates = getSelectedDates();\r\n\r\n\t$('#datepicker').datepicker({\r\n\t\tdateFormat: 'yy-m-d',\r\n\t\tinline: true,\r\n\t\tbeforeShowDay: function (date)\r\n\t\t{\r\n\t\t\t\/\/ gets the current month, day and year\r\n\t\t\t\/\/ Attention: the month counting starts from 0 that's why you'll need to +1 to get the month right\r\n\t\t\tvar mm = date.getMonth() + 1,\r\n\t\t\t\tdd = date.getDate(),\r\n\t\t\t\tyy = date.getFullYear();\r\n\t\t\tvar dt = yy + "-" + mm + "-" + dd;\r\n\r\n\t\t\tif(typeof selected_dates[dt] != 'undefined')\r\n\t\t\t{\r\n\t\t\t\t\/\/ puts a special class to the dates in which you have events, so that you could distinguish it from the other ones\r\n\t\t\t\t\/\/ the "true" parameter is used to know which are the clickable dates\r\n\t\t\t\treturn [true, " my_class"];\r\n\t\t\t}\r\n\r\n\t\t\treturn [false, ""];\r\n\t\t},\r\n\t\tonSelect: function(date)\r\n\t\t{\r\n\t\t\t\/\/ puts the event's title in the dialog box\r\n\t\t\t$("#dialog").attr("title",selected_dates[date]['event_title']); \/\/ for the first time you open the popup\r\n\t\t\t$("#dialog").dialog("option","title",selected_dates[date]['event_title']);\r\n\t\t\t\/\/ puts the event's description text in the dialog box\r\n\t\t\t$("#dialog").text(selected_dates[date]['event_description']);\r\n\t\t\t\/\/ show the dialog box\r\n\t\t\t$("#dialog" ).dialog();\r\n }\r\n\t});\r\n});\r\n<\/pre>\n<\/li>\n\r\nfunction getSelectedDates()\r\n{\r\n\tvar the_selected_dates = new Array();\r\n $.ajax(\r\n {\r\n url: 'events.php',\r\n dataType: 'json',\r\n async: false,\r\n success: function(data)\r\n {\r\n\t\t\t$.each(data, function(n, val)\r\n {\r\n the_selected_dates[val.event_date] = val;\r\n });\r\n }\r\n });\r\n return the_selected_dates;\r\n}\r\n<\/pre>\n<\/li>\n<\/ul>\n\r\nCREATE TABLE IF NOT EXISTS `events` (\r\n `event_id` int(11) NOT NULL auto_increment,\r\n `event_date` date NOT NULL,\r\n `event_title` varchar(100) NOT NULL,\r\n `event_description` text NOT NULL,\r\n PRIMARY KEY (`event_id`)\r\n)\r\n<\/pre>\n
\nNOTE: <\/strong>I recommend you to customize this function and take only the events from the month\/year where you have a large database.<\/p>\n\r\n$dates = array();\r\ntry\r\n{\r\n\t$stmt = $dbh->query('\r\n\t\t\t\t\t\t\tSELECT\r\n\t\t\t\t\t\t\t\t*\r\n\t\t\t\t\t\t\tFROM\r\n\t\t\t\t\t\t\t\tevents\r\n\t\t\t \t\t\t');\r\n}\r\ncatch (PDOException $e)\r\n{\r\n\tprint($e->getMessage());\r\n\tdie;\r\n}\r\nwhile ($row = $stmt->fetch(PDO::FETCH_ASSOC))\r\n{\r\n\t\/\/ 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\r\n\t$row['event_date'] = date("Y-n-j", strtotime($row['event_date']));\r\n\t$dates[] = $row;\r\n}\r\necho json_encode($dates);\r\n<\/pre>\n