Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Full Calendar Events From Database

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 3.24k
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: