Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to integrate jQuery Fullcalendar using Codeigniter and MySQL

by
Category:codeigniter
codeigniter mysql
How to integrate jQuery Fullcalendar using Codeigniter and MySQL

Today, i would like to share with you integration of jquery full calendar events using codeigniter and mysql.

Fullcalendar is jquery library that provide us to display calendar with events and more. Fullcalendar js provide year, month, week and day calendar for displaying. If you are working on event management, task management or any thing that related date to date, at that time if you use event calendar like fullcalendar then it's better.

Download Fullcalendar jQuery Library

How to integrate jQuery Fullcalendar using Codeigniter and MySQL

Controller to view call

public function Calendar()
{
	$data['getEmployee'] = $this->EmployeeModel->getEmployee();	
	$data['getHoliday'] = $this->EmployeeModel->getHoliday();
	$data['getAttendance'] = $this->EmployeeModel->getAttendance();
	$data['getSalary'] = $this->EmployeeModel->getSalary();
	$data['getShift'] = $this->EmployeeModel->getShift();
	$data['getShiftAttendance'] = $this->EmployeeModel->getShiftAttendance();
	$this->load->view('calendar',$data);
}

Fullcalendar is jquery library in Header

<link href='<?=base_url()?>calendardata/fullcalendar.min.css' rel='stylesheet' />
<link href='<?=base_url()?>calendardata/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='<?=base_url()?>calendardata/lib/moment.min.js'></script>
<script src='<?=base_url()?>calendardata/lib/jquery.min.js'></script>
<script src='<?=base_url()?>calendardata/fullcalendar.min.js'></script>
<script src='<?=base_url()?>calendardata/gcal.min.js'></script>

HTML Code

<div class="row">
	<div class="col-md-12">
		<div id="alert_holder"></div>
		<div class="calendar">                                
			<div id="calendarappointment"></div>                            
		</div>
	</div>
</div>

Jquery Code

<script>
	$('#calendar').fullCalendar({
		displayEventTime: false,

		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		buttonText: {
			prev: "",
			next: "",
			today: 'Today',
			month: 'Month',
			week: 'Week',
			day: 'Day'
		},
		events: [

			<?php
				foreach ($getHoliday as $holiday)
				{ 
					$start_day = date('d', strtotime($holiday->holDate));
					$smonth = date('n', strtotime($holiday->holDate));
					$start_month = $smonth - 1;
					$start_year = date('Y', strtotime($holiday->holDate));
					$end_year = date('Y', strtotime($holiday->holDate));
					$end_day = date('d', strtotime($holiday->holDate));
					$emonth = date('n', strtotime($holiday->holDate));
					$end_month = $emonth - 1;
					?>
					{
						title: "Holiday: <?=$holiday->holName?>",
						start: new Date(<?php echo $start_year . ',' . $start_month . ',' . $start_day; ?>),
						end: new Date(<?php echo $end_year . ',' . $end_month . ',' . $end_day; ?>),
						color: '#8A2BE2',
						url: '<?= base_url()?>view-attendance?date=<?= $holiday->holDate ?>',
					},

			<?php	}
			?>

			<?php
				foreach ($getAttendance as $attendance)
				{ 
					$start_day = date('d', strtotime($attendance->attDate));
					$smonth = date('n', strtotime($attendance->attDate));
					$start_month = $smonth - 1;
					$start_year = date('Y', strtotime($attendance->attDate));
					$end_year = date('Y', strtotime($attendance->attDate));
					$end_day = date('d', strtotime($attendance->attDate));
					$emonth = date('n', strtotime($attendance->attDate));
					$end_month = $emonth - 1;
					?>
					{
						title: "Attendence: <?=$attendance->empFirstName?>",
						start: new Date(<?php echo $start_year . ',' . $start_month . ',' . $start_day; ?>),
						end: new Date(<?php echo $end_year . ',' . $end_month . ',' . $end_day; ?>),
						color: 'green',
						url: '<?= base_url()?>view-attendance?date=<?= $attendance->attDate ?>',
					},

			<?php	}
			?>

			<?php
				foreach ($getShift as $shift)
				{ 
					$start_day = date('d', strtotime($shift->aloDay));
					$smonth = date('n', strtotime($shift->aloDay));
					$start_month = $smonth - 1;
					$start_year = date('Y', strtotime($shift->aloDay));
					$end_year = date('Y', strtotime($shift->aloDay));
					$end_day = date('d', strtotime($shift->aloDay));
					$emonth = date('n', strtotime($shift->aloDay));
					$end_month = $emonth - 1;
					?>
					{
						title: "Shift Allocation: <?=$shift->empFirstName?>",
						start: new Date(<?php echo $start_year . ',' . $start_month . ',' . $start_day; ?>),
						end: new Date(<?php echo $end_year . ',' . $end_month . ',' . $end_day; ?>),
						color: 'red',
						url: '<?= base_url()?>view-shift?date=<?= $shift->aloDay ?>',
					},

			<?php	}
			?>
			<?php
				foreach ($getShiftAttendance as $shiftatte)
				{ 
					$start_day = date('d', strtotime($shiftatte->aloDay));
					$smonth = date('n', strtotime($shiftatte->aloDay));
					$start_month = $smonth - 1;

					$start_year = date('Y', strtotime($shiftatte->aloDay));

					$end_year = date('Y', strtotime($shiftatte->aloDay));
					$end_day = date('d', strtotime($shiftatte->aloDay));

					$emonth = date('n', strtotime($shiftatte->aloDay));
					$end_month = $emonth - 1;
					?>
					{
						title: "Shift Attendance: <?=$shiftatte->empFirstName?>",
						start: new Date(<?php echo $start_year . ',' . $start_month . ',' . $start_day; ?>),
						end: new Date(<?php echo $end_year . ',' . $end_month . ',' . $end_day; ?>),
						color: '#D2691E',
						url: '<?= base_url()?>shift-view-attendance?date=<?= $shiftatte->aloDay ?>',
					},

			<?php	}
			?>

		],
		eventColor: '#3A87AD',
	});
</script>

1 Comments

asad sohail

27 Sep 2017

kindly share full calander we can add event ( event store in database ) and get data from database show in full calander than we can drag and drop , edit or delete event

Html code work in comment box


Related Post