1- Create a mysql Database.
2- Create a Table events inside created database.
CREATE TABLE `events` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`startdate` datetime DEFAULT NULL,
`enddate` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
)
3- Insert data into events table.
INSERT INTO events(name, startdate, enddate) value('Evon Event','2016-11-01 12:23:00','2016-11-10 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Evontech Event','2016-11-11 12:23:00','2016-11-15 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Evon Technology Event','2016-11-10 12:23:00','2016-11-20 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Dehradun Event','2016-11-01 12:23:00','2016-11-30 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Winter Event','2016-10-15 12:23:00','2016-12-31 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Pre winter Event','2016-10-01 12:23:00','2016-10-31 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Post winter Event','2017-01-31 12:23:00','2017-02-15 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Diwali Event','2016-11-28 12:23:00','2016-11-30 12:00:00');
INSERT INTO events(name, startdate, enddate) value('Holi Event','2017-03-03 12:23:00','2017-03-10 12:00:00');
4- Create an index.php page.
5- Create connection with created mysql database inside php tag <?php ?>.
//Creating database connection.
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'databasename');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
6- Select records from events table and arrange it in a JSON format. Code is bellow.
//Selecting events records from events table
$query = mysql_query("SELECT * FROM events");
$data = array();
$resp = array();
$i = 0;
$row = mysql_num_rows($query);
if($row > 0){
while($data['events'] = mysql_fetch_assoc($query))
{
$i++;
//Geting event days
$start = date("Y-m-d",strtotime($data['events']['startdate']));//die;
$timestamp_start = strtotime($start);
$end = date("Y-m-d",strtotime($data['events']['enddate']));
$timestamp_end = strtotime($end);
$diff = abs($timestamp_end - $timestamp_start); // that's it!
$days = floor($diff/(60*60*24));
$days = $days+1;
//Defining colors to events
if($days == 1){
$color='#FFDAB9';
}elseif($days > 1 and $days <= 15){
$color='#8FBC8F';
}elseif($days > 15 and $days <= 30){
$color='#C0C0C0';
}elseif($days > 30 and $days <= 60){
$color='#90EE90';
}else{
$color='#F4A460';
}
//Creating event short name with ...
if(!empty($data['events']['name'])){
for ($i = 1; $i <= $days; $i++) {
$add_day = $i - 1;
$start = date('Y-m-d', strtotime("+{$add_day} day", $timestamp_start));
$event_short_name = substr($data['events']['name'] , 0, 15);
$sub='th';
if($i < 4){
switch ($i){
case 1:
$sub='st';
break;
case 2:
$sub='nd';
break;
case 3:
$sub='rd';
break;
}
}
$event_short_name .= ' - ('.$i.$sub.' Day)';
$startDate = strtotime($start);
//Colecting data in array
$resp[$start . '_' . $data['events']['id'] . '_' . $i] = array(
'id' => $data['events']['id'],
'title' => $event_short_name,
'url' => 'http://www.findnerd.com',
'start' => $start,
'color' => $color,
);
}
}
}
$resp = array_values($resp);
}
7- Place the JS files in js directory.
- fullcalendar.min.js
- jquery.min.js
- moment.min.js
8- Place CSS files in CSS folder.
- fullcalendar.css
- fullcalendar.print.css
9- Paste the bellow javascript code inside the head tag.
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: false,
events: <?php echo json_encode($resp) ?>,
});
});
</script>
10- Paste the bellow CSS code inside the head tag.
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: auto;
margin: 0 auto;
}
</style>
11- Paste the bellow HTML code inside the body tag.
<div id='calendar'></div>
12- Final index.php page will look like bellow code.
<?php
//Creating database connection.
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root');
define('DB_DATABASE', 'fullcalendar');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
//Selecting events records from events table
$query = mysql_query("SELECT * FROM events");
$data = array();
$resp = array();
$i = 0;
$row = mysql_num_rows($query);
if($row > 0){
while($data['events'] = mysql_fetch_assoc($query))
{
$i++;
//Geting event days
$start = date("Y-m-d",strtotime($data['events']['startdate']));//die;
$timestamp_start = strtotime($start);
$end = date("Y-m-d",strtotime($data['events']['enddate']));
$timestamp_end = strtotime($end);
$diff = abs($timestamp_end - $timestamp_start); // that's it!
$days = floor($diff/(60*60*24));
$days = $days+1;
//Defining colors to events
if($days == 1){
$color='#FFDAB9';
}elseif($days > 1 and $days <= 15){
$color='#8FBC8F';
}elseif($days > 15 and $days <= 30){
$color='#C0C0C0';
}elseif($days > 30 and $days <= 60){
$color='#90EE90';
}else{
$color='#F4A460';
}
//Creating event short name with ...
if(!empty($data['events']['name'])){
for ($i = 1; $i <= $days; $i++) {
$add_day = $i - 1;
$start = date('Y-m-d', strtotime("+{$add_day} day", $timestamp_start));
$event_short_name = substr($data['events']['name'] , 0, 15);
$sub='th';
if($i < 4){
switch ($i){
case 1:
$sub='st';
break;
case 2:
$sub='nd';
break;
case 3:
$sub='rd';
break;
}
}
$event_short_name .= ' - ('.$i.$sub.' Day)';
$startDate = strtotime($start);
//Colecting data in array
$resp[$start . '_' . $data['events']['id'] . '_' . $i] = array(
'id' => $data['events']['id'],
'title' => $event_short_name,
'url' => 'http://www.findnerd.com',
'start' => $start,
'color' => $color,
);
}
}
}
$resp = array_values($resp);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/moment.min.js'></script>
<script src='js/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: false,
events: <?php echo json_encode($resp) ?>,
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: auto;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
1 Comment(s)