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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 164
    Comment on it

    1- Place the JS files in js directory.

    • fullcalendar.min.js
    • jquery.min.js
    • moment.min.js

     

    2- Place CSS files in CSS folder.

    • fullcalendar.css
    • fullcalendar.print.css

     

    3- Paste the bellow javascript code inside the head tag.

    <script>
    
    	$(document).ready(function() {
    
    		$('#calendar').fullCalendar({
    			defaultDate: '2016-11-03',
    			editable: true,
    			eventLimit: true, // allow "more" link when too many events
    			events: [
    				{
    					title: 'All Day Event',
    					start: '2016-11-01'
    				},
    				{
    					title: 'Long Event',
    					start: '2016-11-07',
    					end: '2016-11-10'
    				},
    				{
    					id: 999,
    					title: 'Repeating Event',
    					start: '2016-11-09T16:00:00'
    				},
    				{
    					id: 999,
    					title: 'Repeating Event',
    					start: '2016-11-16T16:00:00'
    				},
    				{
    					title: 'Conference',
    					start: '2016-11-11',
    					end: '2016-11-13'
    				},
    				{
    					title: 'Meeting',
    					start: '2016-11-12T10:30:00',
    					end: '2016-11-12T12:30:00'
    				},
    				{
    					title: 'Lunch',
    					start: '2016-11-12T12:00:00'
    				},
    				{
    					title: 'Meeting',
    					start: '2016-11-12T14:30:00'
    				},
    				{
    					title: 'Happy Hour',
    					start: '2016-11-12T17:30:00'
    				},
    				{
    					title: 'Dinner',
    					start: '2016-11-12T20:00:00'
    				},
    				{
    					title: 'Birthday Party',
    					start: '2016-11-13T07:00:00'
    				},
    				{
    					title: 'Click for Evontech',
    					url: 'http://evontech.com/',
    					start: '2016-11-28'
    				}
    			]
    		});
    		
    	});
    
    </script>

     

    4- Paste the bellow CSS code inside 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>

     

    5- Paste the below HTML code inside body tag.

    <div id='calendar'></div>

     

    6- Final code should look like bellow code.

    <!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({
    			defaultDate: '2016-11-03',
    			editable: true,
    			eventLimit: true, // allow "more" link when too many events
    			events: [
    				{
    					title: 'All Day Event',
    					start: '2016-11-01'
    				},
    				{
    					title: 'Long Event',
    					start: '2016-11-07',
    					end: '2016-11-10'
    				},
    				{
    					id: 999,
    					title: 'Repeating Event',
    					start: '2016-11-09T16:00:00'
    				},
    				{
    					id: 999,
    					title: 'Repeating Event',
    					start: '2016-11-16T16:00:00'
    				},
    				{
    					title: 'Conference',
    					start: '2016-11-11',
    					end: '2016-11-13'
    				},
    				{
    					title: 'Meeting',
    					start: '2016-11-12T10:30:00',
    					end: '2016-11-12T12:30:00'
    				},
    				{
    					title: 'Lunch',
    					start: '2016-11-12T12:00:00'
    				},
    				{
    					title: 'Meeting',
    					start: '2016-11-12T14:30:00'
    				},
    				{
    					title: 'Happy Hour',
    					start: '2016-11-12T17:30:00'
    				},
    				{
    					title: 'Dinner',
    					start: '2016-11-12T20:00:00'
    				},
    				{
    					title: 'Birthday Party',
    					start: '2016-11-13T07:00:00'
    				},
    				{
    					title: 'Click for Evontech',
    					url: 'http://evontech.com/',
    					start: '2016-11-28'
    				}
    			]
    		});
    		
    	});
    
    </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>

     

    7- You can download complete code from fc.zip file.

 0 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: