Build Event Calendar with jQuery , PHP & MySQL

0
()

Today, We want to share with you php event calendar with mysql database.In this post we will show you php calendar open source, hear for event calendar in jquery php mysql free download we will give you demo and example for implement.In this post, we will learn about Create Dynamic Calendar Using JQuery, Ajax And PHP with an example.

php event calendar with mysql database

here in this Example You learn All About Example of calendar with database php, simple php calendar with events, event calendar php mysql free download, how to create dynamic calendar in php with demo and full source code.

Step 1: Create MySQL Database Table

CREATE TABLE `business` (
  `id` int(11) NOT NULL,
  `p_type` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `information` text COLLATE utf8_unicode_ci NOT NULL,
  `join_date` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `stop_date` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Block'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

insert few business

INSERT INTO `business` (`id`, `p_type`, `title`, `information`, `join_date`, `stop_date`, `created`, `status`) VALUES
(13, 'developing', 'Laravel', 'Business about php developing!', '1552793411', '1552834811', '2019-03-23 11:11:11', 1),
(14, 'developing', 'Angularjs', 'Business about Angularjs', '1552881611', '1552885211', '2019-03-04 11:11:11', 1),
(15, 'developing', 'Vue JS', 'business about Vue JS', '1553140811', '1553142611', '1111-11-11 11:11:11', 1),
(16, 'Web Design', 'Magento', 'business about Magento designing', '1553311811', '1553319110', '1111-11-11 11:11:11', 1),
(17, 'Web Design', 'JavaScript', 'business about JavaScript design', '1553053511', '1553057111', '1111-11-11 11:11:11', 1),
(18, 'Web Design', 'Jquery', 'Business about Jquery', '1553234411', '1553238110', '1111-11-11 11:11:11', 1),
(19, 'developing', 'Go', 'business about Go language', '1553236211', '1553245211', '1111-11-11 11:11:11', 1),
(20, 'Web Development', 'web application development', 'Business about web application development', '1553146211', '1553148110', '1111-11-11 11:11:11', 1);

Step 2: Include jQuery, Bootstrap and Calendar Plugin Files

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="dist/js/jquery-calendar.min.js"></script>
<link rel="stylesheet" href="dist/css/jquery-calendar.min.css">
<script src="js/event_calendar.js"></script>

Step 3: Create Event Calendar Container

<div class="container">
	<div id="calendar"></div>
</div>

Step 4: Load Event Calendar with Dynamic Data

$(document).ready(function(){
	 $.ajax({
		url: 'business.php',
		dataType: "json"
	}).done(function(response) {		
		var calendar = $('#calendar').Calendar({
			locale: 'en',
			weekday: {
			timeline: {
				intervalMinutes: 30,
				fromHour: 9
			}
		},
		events: response.result
		}).init();
	}); 
});

Step 5: Load Events Data from MySQL Database

<?php
include_once("inc/db_connect.php");
$sqlBusiness = "SELECT id, p_type, title, information, join_date, stop_date FROM business";
$resultset = mysqli_query($conn, $sqlBusiness) or die("database error:". mysqli_error($conn));
$calendar = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {	
	$start = $rows['join_date'];
	$end = $rows['stop_date'];	
	$calendar[] = array(
        'p_type' =>$rows['p_type'],
        'title' => $rows['title'],
        "information" => $rows['information'],
        'start' => $start,
        'end' => $end
    );
}
$calendarData = array(
	"success" => 1,	
    "result"=>$calendar);
echo json_encode($calendarData);
?>

Download

I hope you get an idea about php event calendar with mysql database free download.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  How to run Cron jobs every 5, 10, 15, 20, or 30 minutes?

How useful was this post?

Click on a star to rate it!

Free Live Chat for Any Issue