Build Event Calendar with jQuery , PHP & MySQL

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.

Read Also:  8 Useful PHP Tips Tricks and Best Practices

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);
?>

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:  Laravel 6 Eloquent Global Scope Tutorial Example

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *