การตั้งค่าปฏิทินกิจกรรม fullcalendar อัพเดทปี 2020 ตอนที่ 2

เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee
การตั้งค่า fullcalendar fullcalendar

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ การตั้งค่า fullcalendar fullcalendar

ดูแล้ว 10,441 ครั้ง


เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย
รวมถึง plugin การแสดงต่างๆ ทบทวนตอนที่แล้วที่
    การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1 http://niik.in/973 
 
 

การตั้งค่าปฏิทินกิจกรรม fullcalendar

    ใน fullcalendar เวอร์ชั่นปัจจุบัน มีการแยกส่วนต่างๆ ออกเป็น package หรือส่วนย่อย ทำให้เวลา
เราต้องการใช้งาน จำเป็นจะต้องเรียกใช้ไฟล์นั้นๆ รวมถึง css ไฟล์ด้วย โค้ดด้านล่าง เป็นส่วนปรับ
เพิ่มเติมจากตอนที่ 1 เราจะมีการใช้ plugin หลัก รวมถึงการกำหนดการแสดงเป็นภาษาไทย ด้วย
 

ไฟลด์ โค้ดตัวอย่าง 

 
<?php
$fullcalendar_path = "fullcalendar-4.4.2/packages/";
?>
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

    <link href='<?=$fullcalendar_path?>/core/main.css' rel='stylesheet' />
    <link href='<?=$fullcalendar_path?>/daygrid/main.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->	  
    <link href='<?=$fullcalendar_path?>/timegrid/main.css' rel='stylesheet' />
	<link href='<?=$fullcalendar_path?>/list/main.css' rel='stylesheet' />

    <script src='<?=$fullcalendar_path?>/core/main.js'></script>
    <script src='<?=$fullcalendar_path?>/daygrid/main.js'></script>
<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->
    <script src='<?=$fullcalendar_path?>/core/locales/th.js'></script>
    <script src='<?=$fullcalendar_path?>/timegrid/main.js'></script>
    <script src='<?=$fullcalendar_path?>/interaction/main.js'></script>
    <script src='<?=$fullcalendar_path?>/list/main.js'></script>	  
	  

	 <style type="text/css">
		 #calendar{
			 width: 800px;margin: auto;
		 }
	  </style>

  </head>
  <body>

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

	  

	  <script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
			  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" 
			  crossorigin="anonymous"></script>
	 <script type="text/javascript">
	  $(function(){
		  // กำหนด element ที่จะแสดงปฏิทิน
        var calendarEl = $("#calendar")[0];

		  // กำหนดการตั้งค่า
        var calendar = new FullCalendar.Calendar(calendarEl, {
			plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน
			defaultView: 'dayGridMonth', // ค้าเริ่มร้นเมื่อโหลดแสดงปฏิทิน
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
			},	
			eventLimit: true, // allow "more" link when too many events
			locale: 'th',	 // กำหนดให้แสดงภาษาไทย
			firstDay: 0, // กำหนดวันแรกในปฏิทินเป็นวันอาทิตย์ 0 เป็นวันจันทร์ 1
			showNonCurrentDates: false, // แสดงที่ของเดือนอื่นหรือไม่
			eventTimeFormat: { // รูปแบบการแสดงของเวลา เช่น '14:30' 
				hour: '2-digit',
				minute: '2-digit',
				meridiem: false
			}
        });
		 
		 // แสดงปฏิทิน 
		calendar.render();  
		  
	  });
	  </script> 
	  
	  
  </body>
</html>
 
ส่วนที่เพิ่มเข้ามา
    ส่วนที่เพิ่มเข้ามาสำหรับ css style และ javascript
 
<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->	  
    <link href='<?=$fullcalendar_path?>/timegrid/main.css' rel='stylesheet' />
	<link href='<?=$fullcalendar_path?>/list/main.css' rel='stylesheet' />

<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->
    <script src='<?=$fullcalendar_path?>/core/locales/th.js'></script>
    <script src='<?=$fullcalendar_path?>/timegrid/main.js'></script>
    <script src='<?=$fullcalendar_path?>/interaction/main.js'></script>
    <script src='<?=$fullcalendar_path?>/list/main.js'></script>	
 
    ทั้งสองส่วน เป็นส่วนที่ใช้สำหรับจัดการ plugin เพิ่มเติม ที่เราเรียกใช้งาน
 
    ต่อด้วยรูปแแบบการตั้งค่า ต่างๆ ไม่ว่าจะเป็น การกำหนดภาษา การกำหนด plugin ที่จะใช้งาน 
 
plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน
 
    เนื่องจากตอนนี้ เรายังไม่มีข้อมูลของ event หรือกิจกรรม ก็จะอาจยังไม่เห็นความแตกต่าง 
    การกำหนด defaultView เป็นการบอกว่า เราต้องการแสดงรูปแบบเริ่มต้นของปฏิทินเป็นแบบไหน
    สังเกตที่ชื่อ ของค่าที่กำหนด 'dayGridMonth' หรือกำหนดเป็นค่าอื่นๆ เช่น dayGridMonth,timeGridWeek,
    timeGridDay และ listMonth ตามต้องการ
 
    demo ด้านล่าง จะแสดงตัวอย่าง แบบที่ยังไม่ได้กำหนดค่าใดๆ กับตัวอย่างที่กำหนดค่าตามโค้ดด้านบนแล้ว





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ