We Keep Coding

display 3 months calendar with previous and next arrows at the top using calendar library codeigniter

The below image is the pictorial representation of what I am trying to get.
My Code:
application/controllers/DatePic_Controller.php
In controller , build_display() function is called with month and year as parameters . This month and year is passed to the generate function of the model file , where we call the generate function of the codeigniter calendar library.
public function index() {
$year = date('Y');
$month = date('m');
$month2_year = date("Y",strtotime("+1 month"));
//echo 'month2_year:'.$month2_year;
$month2_month = date("m",strtotime("+1 month"));
//echo 'month2_month:'.$month2_month;
$month3_year = date("Y",strtotime("+2 month"));
//echo 'month2_year:'.$month2_year;
$month3_month = date("m",strtotime("+2 month"));
$cal_data['month1'] = $this->build_display($year,$month);
//print_r($cal_data['month1']);
$cal_data['month2'] = $this->build_display($month2_year, $month2_month);
//print_r($cal_data['month2']);
$cal_data['month3'] = $this->build_display($month3_year, $month3_month);
$this->load->view('calendar_view', $cal_data);
}
public function build_display($year,$month){
//ini_set('display_errors', '1');
$this->load->model("DatePic_model");
if($day = $this->input->post('day')){
$this->DatePic_model->add_calendar_data("$year-$month-$day",$this->input->post('data'));
}
$calendar = $this->DatePic_model->generate($year,$month);
//print_r($calendar);
//echo $calendar_view = $this->load->view("datepic_view",$data,true);
return $calendar;
}
application/models/DatePic_model.php
In model , I have used the conf variable to store calendar preferences and template.
In addition , I have used get_calendar_data() , to display the holiday of the corresponding date in the calendar itself.But its not working.....
public function __construct(){
$this->conf = array(
'start_day' => 'monday',
'show_next_prev' => true,
'next_prev_url' => 'http://localhost/STUDY/CI_Mini_Projects/DatePic_Controller/display',
'day_type' => 'short'
);
$this->conf['template'] = '
{table_open}<table border="0" cellpadding="0" cellspacing="0" class="calendar">{/table_open}
{heading_row_start}<tr class="heading">{/heading_row_start}
{heading_previous_cell}<th><<</th>{/heading_previous_cell}
{heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell}
{heading_next_cell}<th>>></th>{/heading_next_cell}
{heading_row_end}</tr>{/heading_row_end}
{week_row_start}<tr class="weekdays">{/week_row_start}
{week_day_cell}<td>{week_day}</td>{/week_day_cell}
{week_row_end}</tr>{/week_row_end}
{cal_row_start}<tr class="days">{/cal_row_start}
{cal_cell_start}<td class="day">{/cal_cell_start}
{cal_cell_start_today}<td>{/cal_cell_start_today}
{cal_cell_start_other}<td class="other-month">{/cal_cell_start_other}
{cal_cell_content}
<div class="day_num">{day}</div>
<div class="content">{content}</div>
{/cal_cell_content}
{cal_cell_content_today}
<div class="day_num highlight">{day}</div>
<div class="content">{content}</div>
{/cal_cell_content_today}
{cal_cell_no_content}
<div class="day_num">{day}</div>
{/cal_cell_no_content}
{cal_cell_no_content_today}
<div class="day_num highlight">{day}</div>
{/cal_cell_no_content_today}
{cal_cell_blank} {/cal_cell_blank}
{cal_cell_other}
<div class="day_num">{day}</div>
{/cal_cel_other}
{cal_cell_end}</td>{/cal_cell_end}
{cal_cell_end_today}</td>{/cal_cell_end_today}
{cal_cell_end_other}</td>{/cal_cell_end_other}
{cal_row_end}</tr>{/cal_row_end}
{table_close}</table>{/table_close}
';
}
public function get_calendar_data($year,$month){
$query = $this->db->select('date,data')->from('holiday')->like('date',"$year-$month",'after')->get();
//SELECT date,data FROM holiday WHERE date LIKE '2019-04%'; ==> 2019-04-19 Nineteen
$cal_data = array();
foreach($query->result() as $row){
$cal_data[substr($row->date,8,2)] = $row->data;
//2019-04-19 : 19
}
print_r($cal_data);
//return $cal_data;
/* If you want to control where the wildcard (%) is placed, you can use an optional third argument. Your options are ‘before’, ‘after’, ‘none’ and ‘both’ (which is the default).
$this->db->like('title', 'match', 'before'); // Produces: WHERE `title` LIKE '%match' ESCAPE '!'
$this->db->like('title', 'match', 'after'); // Produces: WHERE `title` LIKE 'match%' ESCAPE '!'
$this->db->like('title', 'match', 'none'); // Produces: WHERE `title` LIKE 'match' ESCAPE '!'
$this->db->like('title', 'match', 'both'); // Produces: WHERE `title` LIKE '%match%' ESCAPE '!' */
}
public function add_calendar_data($date,$data){
if($this->db->select('date')->from('holiday')->where('date',$date)->count_all_results()){
$this->db->where('date',$date)
->update('holiday',array(
'date'=>$date,
'data'=>$data));
echo "update";
}else{
$this->db->insert('holiday',array(
'date'=>$date,
'data'=>$data));
}
echo "insert";
}
public function generate($year,$month){
$this->load->library("calendar",$this->conf);
/* $cal_data = array(
15 => base_url().'User_Controller/create_user',
17 => base_url().'role'
); */
//$cal_data = $this->add_calendar_data('2019-03-04','foo');
$cal_data = $this->get_calendar_data($year,$month);
//print_r($cal_data);
return $this->calendar->generate($year,$month,$cal_data);
}
application/views/calendar_view.php
This is the view file
<script src= base_url()."/assets/jquery/jquery-3.3.1.min.js"></script>
$(document).ready(function(){
$('.calendar .day').click(function(){
day_num = $(this).find('.day_num').html();
//alert(day_num);
day_data = prompt('Enter Stuff',$(this).find('.content').html());
if(day_data !=null){
$.ajax({
url:window.location,
type:'POST',
data:{
day:day_num,
data:day_data
},
success:function(msg){
location.reload();
}
});
}
});
});
.calendar{
font-family:Arial;
font-size:12px;
}
table.calendar{
margin:auto;
border-collapse:collapse;
}
.calendar .days td{
width:50px;
height:50px;
border:2px solid black;
padding:4px;
vertical-align:top;
background-color:#DEF;
}
.calendar .days td:hover{
background-color:#FFF;
}
.calendar .weekdays td{
border:2px solid black;
padding:2px;
text-align:center;
background-color : #C0C0C0;
}
.calendar .heading th{
text-transform:uppercase;
font-size:16px;
padding:10px;
}
.calendar .highlight{
font-weight:bold;
color:blue;
}
.calendar .content{
float: left;
display: inline-block;
width: 40px;
background-color: gray;
}
<div id="month1">
<?=$month1; ?>
</div>
<div id="month2">
<?=$month2; ?>
</div>
<div id="month3">
<?=$month3; ?>
</div>
I have shared the output display I am getting

Iterate through my sql result and display in a loop

I am trying to get the result from "headline" and "content" to show up one at a time and then fade in and out to the next result in a loop. Currently, it shows all the results at once and the fades in and out and then show all the results again. Any idea on how to get them to show one at a time TIA
<html>
<head>
<style>
#table1{/*table aspects and design */
border:1px solid #FFFFFF;
background:#FFFFFF;
display:none;
width: 60%;
margin-left: auto;
margin-right: auto;
}
th{/*align table headers*/
text-align:center;
}
td,th{
border:1px solid #FFFFFF;
text-align:center;
}
</style>
</head>
<table id="table1" cellpadding="5" cellspacing="1" width="50%">
<? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
{
/* select all information from the table and take it into the page */
$query->execute();
while ($result = $query->fetch(PDO::FETCH_ASSOC)){
$head = $result['headline'];/*puts result of headline from table into variable*/
$content = $result['content'];
/*puts result of content from table into variable*/
echo /* echo the table to display announcements*/'
<tr>
<th>
<h1>
'.$head.'
</h1>
</th>
</tr>
<tr>
<td>
<font size="4">
'.$content.'
</font>
</td>
</tr>';
}
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/
$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}
)};
</script>

You're going about this the wrong way.
This won't be a complete solution. I'll try to hopefully make you understand the logic behind doing this yourself.
Loop through the results but instead of echoing them immediately, save them in arrays:
<?php
$head[] = $result['headline'];
$content[] = $result['content'];
?>
After the loop, only echo the first results. Add some IDs to your <h1> and <td> while you're at it. You'll need them later.
Then pass the arrays to JavaScript:
<script type="text/javascript">
var head = '<?= json_encode($head); ?>';
var content = '<?= json_encode($content); ?>';
</script>
Now that you have the arrays in JS, you have to iterate through them and for each value, change the content of your <h1> and <td>:
for (var i = 0, len = head.length; i < len; i++)
{
document.getElementById("H1_element_ID").innerHTML = head[i];
document.getElementById("TD_element_ID").innerHTML = content[i];
}
You can probably throw your fadeIn(), delay() and fadeOut() in this loop, to achieve your desired result!
Finally, delete your for and put this one inside $(document).ready().

modify jquery slideshow code to autoplay

I found some code in an article on daniweb.com for a jquery slideshow and got it working pulling data from mysql. I want to modify it so the slide changes automatically every 5 seconds or so, instead of having to click the buttons but don't know how to modify this code to do that...
Here's the current code: It uses a mysql database and php to pull used car info from a table and then display in a slideshow. The idea is to run this on a rasPi with a 7-10" display at our cashier counter or waiting room for customers to see...
Any help would be greatly appreciated, thank you!
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 950;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
* {
font-family:Arial;
}
body {
width:800px;
height:572px;
background:linear-gradient(#117dc8,#15527c);
}
.header {
color:white;
font-size:28px;
margin-left:20px;
margin-top:10px;
}
.logo {
position:absolute;
margin-left:720px;
margin-top:-30px;
z-index:10;
width:250px;
}
.container {
position:relative;
background-color:#fafafa;
width:940px;
height:480px;
border-radius:10px;
margin-top:10px;
margin-left:6px;
padding:5px;
z-index:6;
}
#carDisplay {
width:915px;
height:455px;
padding:10px;
border:none;
}
.contact {
position:absolute;
color:white;
margin:15px 80px;
font-size:20px;
}
* {
font-family:Arial;
}
#cert {
color:#e3001b;
}
.cartitle {
font-size:30px;
margin-left:10px;
}
.stock {
font-size:14px;
font-size:18px;
color:#999;
margin-left:10px;
}
.carimg {
width:480px;
padding:5px;
margin-left:10px;
box-shadow:0px 2px 5px 1px #bbb;
}
.details {
padding:30px;
font-size:25px;
}
.price {
font-size:35px;
font-weight:bold;
color:#333;
text-align:center;
margin-top:-20px;
margin-bottom:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Used Car New Arrivals</title>
<link rel="stylesheet" href="css/mainstyle.css">
<link rel="stylesheet" href="css/framestyle.css">
<script src="jscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div class="header"><i>Used Car New Arrivals | </i><span style="font-size:20px;">Falmouth Toyota</span></div>
<img class="logo" src="ft-logo.png" />
<div class="container">
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "usedcars";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM usedcars";
$result = mysqli_query($conn, $sql);
$num = mysql_num_rows($result);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<table class='tableStyle'>
<tr>
<td colspan='2'><div class='stock'>Stock: " . $row["stock"] ."</div></td>
</tr>
<tr>
<td colspan='2'><div class='cartitle'><b><span id='cert'>" . $row["certified"] . "</span> " . $row["preowned"]. " " . $row["year"] . " " . $row["make"] . " " . $row["model"] . " " . "</b><span style='font-size:18px;color:#999;'> - " . number_format($row["mileage"]) . " miles</span></div></td>
</tr>
<tr>
<td colspan='2'><hr /></td>
</tr>
<tr>
<td><img class='carimg' src='" .$row["img"] . "' /></td>
<td class='details'><div class='price'>Price: $" . number_format($row["price"]) ."</div><br>
<hr style='margin-top:-25px;'/>
<b>Vehicle Features</b>
<ul>
<li>" . $row["feat1"] . "</li>
<li>" . $row["feat2"] . "</li>
<li>" . $row["feat3"] . "</li>
<li>" . $row["feat4"] . "</li>
</ul>
</td>
<tr>
</table>
</div>
</div>
</div>";
}
}
else {
echo "<span>No images available</span>";
}
mysqli_close($conn);
?>
</div>
<div class="contact">VISIT OUR SHOWROOM FOR MORE INFORMATION ON ANY OF THESE VEHICLES</div>
</body>
<script src="jscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</html>

Try adding the following code inside a script tag. Feel free to change the slide change duration as per your requirement.
Here 5000 means 5*1000 milli seconds, which is 5 seconds.
window.setInterval(function() {
$('#rightControl.control').click();
}, 5000);
Accept this answer if it helps.
Update: Playing the slideshow continuously (looping)
Note: Replace the existing animate function with the below snippet
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
}, function() {
// if last slide then move the pointer to 1st slide
if(currentPosition == numberOfSlides-1) {
currentPosition = -1;
}
});

Auto-Suggest Text Box

I found an example online that shows how to build a auto-suggest text field by using javascript and PHP. Originally I started out by building my on version of the example, but after many failed attempts in getting it to work, I decided to see if the example itself even worked. I copied and pasted the example, changing only the database connection and the information regarding the database table. To my surprise the example still doesn't work! In my database I have a a table called Device and in that table there are three columns, ID,Device_type, and Price. Right now I have one value in the table and it's Apple iPhone 6 in the Device_type column, so when the program is working correctly, it should start to auto suggest Apple iPhone 6 as soon as I type "A" into the text box. Unfortunately, that doesn't happen, a dropdown box appears, as it should, but the box is blank and doesn't show any suggestions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List Suggestion Example</title>
<style type="text/css">
<!--
div.suggestions {
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
text-align: left;
}
-->
</style>
<script type="text/javascript">
var nameArray = null;
</script>
</head>
<body onclick="document.getElementById('divSuggestions').style.visibility='hidden'">
<?php
mysql_connect("hostname", "username", "password") OR DIE ('Unable to connect to database! Please try again later.');
mysql_select_db('DeviceRecycling');
$query = 'SELECT Device_type FROM Device';
$result = mysql_query($query);
$counter = 0;
echo("<script type='text/javascript'>");
echo("this.nameArray = new Array();");
if($result) {
while($row = mysql_fetch_array($result)) {
echo("this.nameArray[" . $counter . "] = '" . $row['Device_type'] . "';");
$counter += 1;
}
}
echo("</script>");
?>
<!-- --------------------- Input Box --------------------- -->
<table border="0" cellpadding="0" width="50%" align="center">
<tbody align="center">
<tr align="center">
<td align="left">
<input type="text" id="txtSearch" name="txtSearch" value="" style="width: 50%; margin-top: 150px; background-color: purple; color: white; height: 50px; padding-left: 10px; padding-right: 5px; font-size: larger;" onkeyup="doSuggestionBox(this.value);" />
<input type="button" value="Google It!" name="btnGoogleIt" style="margin-top: 150px; background-color: purple; color: white; height: 50px; font-size: larger;" onclick="window.location='http://www.google.com/#hl=en&source=hp&q=' + document.getElementById('txtSearch').value" />
</td>
</tr>
<tr align="center">
<td align="left">
<div class="suggestions" id="divSuggestions" style="visibility: hidden; width: 50%; margin-top: -1px; background-color: purple; color: white; height: 250px; padding-left: 10px; padding-right: 5px; font-size: larger;" >
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function doSuggestionBox(text) { // function that takes the text box's inputted text as an argument
var input = text; // store inputed text as variable for later manipulation
// determine whether to display suggestion box or not
if (input == "") {
document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
} else {
document.getElementById('divSuggestions').style.visibility = 'visible'; // shows the suggestion box
doSuggestions(text);
}
}
function outClick() {
document.getElementById('divSuggestions').style.visibility = 'hidden';
}
function doSelection(text) {
var selection = text;
document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
document.getElementById("txtSearch").value = selection;
}
function changeBG(obj) {
element = document.getElementById(obj);
oldColor = element.style.backgroundColor;
if (oldColor == "purple" || oldColor == "") {
element.style.background = "white";
element.style.color = "purple";
element.style.cursor = "pointer";
} else {
element.style.background = "purple";
element.style.color = "white";
element.style.cursor = "default";
}
}
function doSuggestions(text) {
var input = text;
var inputLength = input.toString().length;
var code = "";
var counter = 0;
while(counter < this.nameArray.length) {
var x = this.nameArray[counter]; // avoids retyping this code a bunch of times
if(x.substr(0, inputLength).toLowerCase() == input.toLowerCase()) {
code += "<div id='" + x + "'onmouseover='changeBG(this.id);' onMouseOut='changeBG(this.id);' onclick='doSelection(this.innerHTML)'>" + x + "</div>";
}
counter += 1;
}
if(code == "") {
outClick();
}
document.getElementById('divSuggestions').innerHTML = code;
document.getElementById('divSuggestions').style.overflow='auto';
}
</script>
</body>
</html>
In my attempt to trouble shoot, I have discovered a few things. First off the connection string to the database is good, and that is not the problem. In an attempt to further check whether it was the database query that was causing issues, I have discovered that if I remove the echo("<script type='text/javascript'>") from the PHP portion of the code, that it will actually print Apple iPhone 6 at the top of the page, which tells me the query itself is actually working. Obviously though, by removing the javascript tag the program still doesn't work because it should only be displaying the results as you type something that matches what is in the database.

hi maybe you have a error on your code
this is a little example
for get the result and show
autocomplete.php
<?php
$connection = mysqli_connect("localhost","username","password","employee") or die("Error " . mysqli_error($connection));
//fetch department names from the department table
$sql = "select department_name from department";
$result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));
$dname_list = array();
while($row = mysqli_fetch_array($result))
{
$dname_list[] = $row['department_name'];
}
echo json_encode($dname_list);
?>
for view and show the result
demo.php
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Textbox Demo | PHP | jQuery</title>
<!-- load jquery ui css-->
<link href="path/to/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- load jquery library -->
<script src="path/to/jquery-1.10.2.js"></script>
<!-- load jquery ui js file -->
<script src="path/to/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var availableTags = <?php include('autocomplete.php'); ?>;
$("#department_name").autocomplete({
source: availableTags,
autoFocus:true
});
});
</script>
</head>
<body>
<label>Department Name</label></br>
<input id="department_name" type="text" size="50" />
</body>
</html>
i preffer use jquery
donwload jquery
enter link description here
result

Show / Hide div not working click

I've made an agenda which got events and once i click on days , i would like to click on a day and this will show the event but this don't work
I want to show the class="info"
i've tried like that but this don't work
$(document).on('click', '.toggleNextInfo', function () {
$(this).nextAll('.info').toggle();
});
maybe it's because of css too ?
$(document).on('click', '.toggleNextInfo', function () {
$(this).next('.info').toggle();
});
/*[fmt]0020-000A-3*/
body{ background:#EEEEEE; letter-spacing:1px; font-family:Helvetica; padding:10px;}
.year{ color:#D90000; font-size:85px;}
.relative{ position:relative;}
.months{}
.month{ margin-top:12px;}
.months ul{ list-style:none; margin:0px; padding:0px;}
.months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{ color:#D90000;}
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:80px; height:80px;}
table td.today{ border:2px solid #D90000; width:80px; height:80px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}
table th{ font-weight:normal; color:#A8A8A8;}
table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24.3pt;}
table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;}
table td .events li{ width:10px; height:10px; float:left; background:#000; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;}
table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .events li{ height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px;}
table td:hover .events li:first-child{ border-top:1px solid #D6D6D6;}
table td .daytitle{ display:none;}
table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:41px; display:block; font-weight:bold;}
.clear{ clear:both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="images/date.ico" />
<title>Calendrier</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.month').hide();
$('.month:first').show();
$('.months a:first').addClass('active');
var current = 1;
$('.months a').click(function(){
var month = $(this).attr('id').replace('linkMonth','');
if(month != current){
$('#month'+current).slideUp();
$('#month'+month).slideDown();
$('.months a').removeClass('active');
$('.months a#linkMonth'+month).addClass('active');
current = month;
}
return false;
});
});
</script>
<script type="text/javascript" >
$(document).on('click', '.toggleNextInfo', function () {
$(this).next('.info').toggle();
});
</script>
</head>
<body>
<?php
require('config.php');
require('date.php');
$date = new Date();
$year = date('Y');
$events = $date->getEvents($year);
$dates = $date->getAll($year);
?>
<div class="periods">
<div class="year"><?php echo $year; ?></div>
<div class="months">
<ul>
<?php foreach ($date->months as $id=>$m): ?>
<li><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="clear"></div>
<?php $dates = current($dates); ?>
<?php foreach ($dates as $m=>$days): ?>
<div class="month relative" id="month<?php echo $m; ?>">
<table>
<thead>
<tr>
<?php foreach ($date->days as $d): ?>
<th><?php echo substr($d,0,3); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<tr>
<?php $end = end($days); foreach($days as $d=>$w): ?>
<?php $time = strtotime("$year-$m-$d"); ?>
<?php if($d == 1 && $w != 1): ?>
<td colspan="<?php echo $w-1; ?>" class="padding"></td>
<?php endif; ?>
<td <?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>> <a class="toggleNextInfo" > TEST </a>
<div class="relative">
<div class="day"><?php echo $d; ?></div>
</div>
<div class="daytitle">
<?php echo $date->days[$w-1]; ?> <?php echo $d; ?> <?php echo $date->months[$m-1]; ?>
</div>
</br>
<ul class="events">
</br>
</br>
<?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
<div class="info" >
<li > <?php echo $e; ?></li>
<li>
<form> <input type="radio" name="Disponibilité" value="Disponibilité"> Choisir cette disponibilite
<input type="submit" name="Envoyer" value="Envoyer">
</form>
</li>
</div>
<?php endforeach; endif; ?>
</ul>
</td>
<?php if($w == 7): ?>
</tr><tr>
<?php endif; ?>
<?php endforeach; ?>
<?php if($end != 7): ?>
<td colspan="<?php echo 7-$end; ?>" class="padding"></td>
<?php endif; ?>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
</div>
<div class="clear"></div>
</br>
</br>
</body>
</html>

$(this).next() would find a DOM element that immediately follows this, but in you example .toggleNextInfo does not have a .info node following it.
.nextAll() would be better if your elements were on the same level.
You need to think through what html structure you have, because that informs your decisions with jquery. Not only are these two elements not siblings, but they're not at the same nesting level.
.toggleNextInfo
ul
li
li
.info
Since these are likely to change, I generally prefer using find. There are several ways you can do this, but this should work:
$(document).on('click', '.toggleNextInfo', function () {
$(this).parent().find('.info').toggle();
});