การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1

เขียนเมื่อ 4 ปีก่อน โดย Ninenik Narkdee
fullcalendar การใช้งาน fullcalendar

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

ดูแล้ว 15,424 ครั้ง


เนื้อหานี้จะเป็นแนวทางการใช้งาน fullcalendar และเป็นการอัพเดท
เนื้อหาเพร้อมกับ เวอร์ชั่นล่าสุด ณ ปัจจุบันของ fullcalendar 
    โดยตอนนี้เราจะเริ่มต้นอย่างง่าย กับการแสดง fullcalendar
 

ดาวน์โหลด Fullcalendar 4.4.2

    ให้ทำการดาวน์โหลดไฟล์นี้ Fullcalendar 4.4.2
 
    ทำการแตกไฟล์ เราจะได้โฟลเดอร์ fullcalendar-4.4.2 และด้านในมีส่วนของ ของโค้ดทั้งหมด
 

สร้างไฟล์ตัวอย่างเริ่มต้น

<?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' />

    <script src='<?=$fullcalendar_path?>/core/main.js'></script>
    <script src='<?=$fullcalendar_path?>/daygrid/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: [ 'dayGrid' ]
        });
		 
		 // แสดงปฏิทิน 
		calendar.render();  
		  
	  });
	  </script> 
	  
	  
  </body>
</html>



ดาวน์โหลดไฟล์ตัวอย่างเริ่มต้น Fullcalendar 4.4.2

Fullcalendar 4.4.2 with simple Demo

เราสามารถใช้งานร่วมกับ bootstrap

โดยเพิ่ม css style ของ bootstrap เข้าไป หรือถ้าเว็บเรามีการใช้งาน bootstrap อยู่แล้งก็ไม่ได้เพิ่มอะไร

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">





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



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









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









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





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

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


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


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







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