Skip to main content

สร้าง ปฏิทินตารางเวลา ด้วย FullCalendar Scheduler Javascript Library

monkeywebstudio Javascript

สวัสดีครับ ในบทความนี้ เราจะมาแนะนำการใช้งาน Fullcalendar Scheduler ซึ่งเป็น Javascript Library สำหรับ จัดการข้อมูลตารางเวลา สามารถ แสดงเหตุการณ์ในแต่ละช่วงเวลาของวันได้  ซึ่งสามารถนำไปประยุกต์ใช้งานได้ หลายรูปแบบ เช่น แสดงช่วงเวลาการใช้ห้องประชุม เป็นต้น

สามารถดูตัวอย่างการใช้งานได้ที่  Fullcalendar Scheduler

FullCalendar Scheduler License

ก่อนจะเริ่มใช้งานเรามาดูเงื่อนไขการใช้งาน หรือ  ใบอนุญาต (License)  ของ Fullcalendar Scheduler กันก่อนครับ โดย Fullcalendar Scheduler จะมี License อยู่ด้วยกัน 3 แบบ คือ

1.Commercial License คือ ใบอนุญาตในการนำไปใช้งานในเชิงพาณิชย์ นั้นก็คือสามารถนำ Fullcanlendar Scheduler ไปใช้ในงาน หรือ Project ที่มีการเก็บค่าบริการจากผู้ใช้งานได้  อันนี้ ก็ต้อง ซื้อ License จากทางผู้พัฒนาครับ

2. Non-Commercial Creative Commons   คือ ใบอนุญาตนี้ สามารถนำ Fullcalendar Scheduler ไปใช้งานกับ Project ที่มีวัตถุประสงค์ที่ไม่ใช่เชิงพาณิชย์เท่านั้น หรือ ใช้งานเพื่อการศึกษา หรือ กับองค์กรที่ไม่แสวงหาผลกำไร ก็สามารถใช้ใบอนุญาตนี้ได้ครับ

3.GPL License  คือ ใบอนุญาตสำหรับนำFullcalendar Scheduler ไปใช้ในงานที่เป็น โอเพนซอร์ส และ งานที่นำ Fullcalendar Scheduler ไปใช้ภายใต้ใบอนุญาต GPL จะเป็นต้องเป็น โอเพนซอร์ส เหมือนกันครับ

มาเริ่มต้นใช้งาน FullCalendar Scheduler กันเลย

1.นำเข้าไฟล์ Javascript และ Css ที่จำเป็น

<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.css' rel='stylesheet' />

<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.js'></script>

2.เรียกใช้งาน Function fullCalendar

<script>

	$(function() { // document ready

		$('#calendar').fullCalendar({
			schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',//ระบุ license ว่าเราใช้งาน license ประเภทใด
			now: '2017-09-07',
			editable: true, // enable draggable events
			aspectRatio: 1.8,
			scrollTime: '00:00', // undo default 6am scrollTime
			header: {
				left: 'today prev,next',
				center: 'title',
				right: 'timelineDay,timelineThreeDays,agendaWeek,month,listWeek'
			},
			defaultView: 'timelineDay',
			views: {
				timelineThreeDays: {
					type: 'timeline',
					duration: { days: 3 }
				}
			},
			resourceLabelText: 'Rooms',
			resources: [
				{ id: 'a', title: 'Auditorium A' },
				{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
				{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
				{ id: 'd', title: 'Auditorium D', children: [
					{ id: 'd1', title: 'Room D1' },
					{ id: 'd2', title: 'Room D2' }
				] },
			],
			events: [
				{ id: '1', resourceId: 'b', start: '2017-09-07T02:00:00', end: '2017-09-07T07:00:00', title: 'event 1' },
				{ id: '2', resourceId: 'c', start: '2017-09-07T05:00:00', end: '2017-09-07T22:00:00', title: 'event 2' },
				{ id: '3', resourceId: 'd', start: '2017-09-06', end: '2017-09-08', title: 'event 3' },
				{ id: '4', resourceId: 'e', start: '2017-09-07T03:00:00', end: '2017-09-07T08:00:00', title: 'event 4' },
				{ id: '5', resourceId: 'f', start: '2017-09-07T00:30:00', end: '2017-09-07T02:30:00', title: 'event 5' }
			]
		});
	
	});

</script>

ในการใช้งานอย่าลืมกำหนด รูปแบบ License ที่เราต้องการใช้งานด้วยครับ
ในตัวอย่างเลือกใช้งาน license แบบ GPL ครับ

schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',

3.สร้าง Tag div ที่มี id เท่ากับ calendar ไว้เพื่อแสดงผล ปฏิทินใน Tag นี้ครับ

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

ตัวอย่างไฟล์ scheduler.html แบบเต็ม

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.css' rel='stylesheet' />

<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.js'></script>

<script>

	$(function() { // document ready

		$('#calendar').fullCalendar({
			schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',//ระบุ license ว่าเราใช้งาน license ประเภทใด
			now: '2017-09-07',
			editable: true, // enable draggable events
			aspectRatio: 1.8,
			scrollTime: '00:00', // undo default 6am scrollTime
			header: {
				left: 'today prev,next',
				center: 'title',
				right: 'timelineDay,timelineThreeDays,agendaWeek,month,listWeek'
			},
			defaultView: 'timelineDay',
			views: {
				timelineThreeDays: {
					type: 'timeline',
					duration: { days: 3 }
				}
			},
			resourceLabelText: 'Rooms',
			resources: [
				{ id: 'a', title: 'Auditorium A' },
				{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
				{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
				{ id: 'd', title: 'Auditorium D', children: [
					{ id: 'd1', title: 'Room D1' },
					{ id: 'd2', title: 'Room D2' }
				] },
			],
			events: [
				{ id: '1', resourceId: 'b', start: '2017-09-07T02:00:00', end: '2017-09-07T07:00:00', title: 'event 1' },
				{ id: '2', resourceId: 'c', start: '2017-09-07T05:00:00', end: '2017-09-07T22:00:00', title: 'event 2' },
				{ id: '3', resourceId: 'd', start: '2017-09-06', end: '2017-09-08', title: 'event 3' },
				{ id: '4', resourceId: 'e', start: '2017-09-07T03:00:00', end: '2017-09-07T08:00:00', title: 'event 4' },
				{ id: '5', resourceId: 'f', start: '2017-09-07T00:30:00', end: '2017-09-07T02:30:00', title: 'event 5' }
			]
		});
	
	});

</script>
<style>

	body {
		margin: 0;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 50px auto;
	}

</style>
</head>
<body>

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

</body>
</html>

ตัวอย่างการแสดงผล

ตัวอย่าง FullCalendar Scheduler  ประยุกต์ใช้งานกับ PHP / MySQL

สร้างฐานข้อมูล meeting โดยมี  ตาราง room และ ตาราง events

CREATE TABLE `events` (
  `id` int(11) NOT NULL,
  `room_id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `start_date_time` datetime NOT NULL,
  `end_date_time` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `events` (`id`, `room_id`, `title`, `start_date_time`, `end_date_time`) VALUES
(1, 1, 'ประชุมการพัฒนาระบบ', '2017-09-07 09:00:00', '2017-09-07 16:00:00'),
(2, 2, 'ประชุมพนักงาน', '2017-09-07 08:00:00', '2017-09-07 12:00:00'),
(3, 3, 'ประชุมกรรมการบริษัท', '2017-09-07 10:00:00', '2017-09-07 14:00:00');


CREATE TABLE `room` (
  `id` int(11) NOT NULL,
  `room` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `room` (`id`, `room`) VALUES
(1, 'ห้องประชุม 1'),
(2, 'ห้องประชุม 2'),
(3, 'ห้องประชุม 3'),
(4, 'ห้องประชุม 4');

ALTER TABLE `events`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `room`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `events`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

ALTER TABLE `room`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

สร้างไฟล์ resource.php

<?php
	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbname = "meeting";
	$conn = mysqli_connect($servername, $username, $password, $dbname);
	
	mysqli_set_charset($conn, "utf8");

	if (!$conn) {
		die("Connection failed: " . mysqli_connect_error());
	}
	
	$sql1 = "SELECT * FROM room";
	
	$result1 = mysqli_query($conn, $sql1);
	
	$resource = [];
		
	if (mysqli_num_rows($result1) > 0) {
		
		while($row = mysqli_fetch_assoc($result1)) {
			
			 $resource[] = [ 'id' => $row['id'] , 'title' => $row['room']];
		}
	
	}

	$sql2 = "SELECT * FROM events";
	
	$result2 = mysqli_query($conn, $sql2);

	if (mysqli_num_rows($result2) > 0) {
		
		$events = [];
		
		$i = 1;

		while($row = mysqli_fetch_assoc($result2)) {
			
			$start = str_replace(" ","T",$row['start_date_time']);

                        $end = str_replace(" ","T",$row['end_date_time']);

			$events[] = [
			   'id' => $row['id'],
			   'resourceId' => $row['room_id'],
			   'start' => $start,
			   'end' => $end,
			   'title' => $row['title'],
                        ];
            
                     $i++;
		}
	}
	
	mysqli_close($conn);
	
	if(isset($_GET['resource'])){
		echo json_encode($resource);
	}
	
	if(isset($_GET['events'])){
		echo json_encode($events);
	}
	
?>

ตัวอย่างไฟล์ index.php

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.css' rel='stylesheet' />

<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.js'></script>

<script>

	$(function() { // document ready

		$('#calendar').fullCalendar({
			schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',//ระบุ license ว่าเราใช้งาน license ประเภทใด
			now: '2017-09-07',
			editable: true, // enable draggable events
			aspectRatio: 1.8,
			scrollTime: '00:00', 
			header: {
				left: 'today prev,next',
				center: 'title',
				right: 'timelineDay,timelineThreeDays,agendaWeek,month,listWeek'
			},
			defaultView: 'timelineDay',
			views: {
				timelineThreeDays: {
					type: 'timeline',
					duration: { days: 3 }
				}
			},
			resourceLabelText: 'Rooms',
			resources: { 
				url: 'resource.php?resource',
				error: function() {
					$('#script-warning').show();
				}
			},

			events: { 
				url: 'resource.php?events',
				error: function() {
					$('#script-warning').show();
				}
			}
		});
	
	});

</script>
<style>

	body {
		margin: 0;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#script-warning {
		display: none;
		background: #eee;
		border-bottom: 1px solid #ddd;
		padding: 0 10px;
		line-height: 40px;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		color: red;
	}

	#loading {
		display: none;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	#calendar {
		max-width: 900px;
		margin: 50px auto;
	}

</style>
</head>
<body>


	<div id='script-warning'>
		This page should be running from a webserver, to allow fetching from the <code>json/</code> directory.
	</div>

	<div id='loading'>loading...</div>

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

</body>
</html>

ตัวอย่างการแสดงผล โดยแสดงข้อมูลจากฐานข้อมูล MySQL

Download Demo SourceCode


Deprecated: Function create_function() is deprecated in /home/service1/domains/monkeywebstudio.com/public_html/wp-content/plugins/simple-lightbox/controller.php on line 1642