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

04 June 2020 เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee

การตั้งค่า fullcalendar fullcalendar

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

เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย

รวมถึง plugin การแสดงต่างๆ ทบทวนตอนที่แล้วที่

การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1 http://niik.in/973

https://www.ninenik.com/content.php?arti_id=973 via @ninenik

การตั้งค่าปฏิทินกิจกรรม 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 ด้านล่าง จะแสดงตัวอย่าง แบบที่ยังไม่ได้กำหนดค่าใดๆ กับตัวอย่างที่กำหนดค่าตามโค้ดด้านบนแล้ว

DEMO 1
DEMO 2

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

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

05 Jun
2020

รูปแบบกิจกรรม event ใน fullcalendar อัพเดทปี 2020 ตอนที่ 3 อ่าน 7,462
เนื้อหานี้เราจะมาดูรูปแบบ event หรือกิจกรรมรูปแบบต่างๆ ที่ใช้งานใน fullca

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

03 Jun
2020

การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1 อ่าน 13,537
เนื้อหานี้จะเป็นแนวทางการใช้งาน fullcalendar และเป็นการอัพเดท เนื้อหาเพร้
กำลังอ่านเนื้อหานี้อยู่

04 Jun
2020

การตั้งค่าปฏิทินกิจกรรม fullcalendar อัพเดทปี 2020 ตอนที่ 2 อ่าน 9,747
เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย รวมถึง plugi

Tags:: fullcalendar การตั้งค่า fullcalendar

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน