Home » Build Event Calendar with jQuery , PHP & MySQL

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.

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:  Enable PHP Error Log reporting Display on Web Browser

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel 6 Create Custom Exception Error Page Example
  2. Read Also:  Convert CSV Data to JSON using JavaScript with Example
  3. Read Also:  Helper classess in laravel 6 Example - PHP
  4. Read Also:  How to Convert String to array in php Examples
  5. Read Also:  JQUERY TO CHECK WHETHER VALUE EXISTS IN ARRAY OR NOT?
  6. Read Also:  Check if the Uploaded File is an Image in Laravel 6
  7. Read Also:  Fatal error: Call to undefined function sqlsrv_connect()
  8. Read Also:  Check if element Exists on the Page using jQuery
  9. Read Also:  javascript objects vs arrays vs JSON Data Types
  10. Read Also:  javascript objects vs arrays vs JSON Data Types

Leave a Comment

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