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

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

การใช้งาน fullcalendar fullcalendar

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

เนื้อหานี้จะเป็นแนวทางการใช้งาน 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">

DEMO 1
DEMO 2

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

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

04 Jun
2020

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

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

กำลังอ่านเนื้อหานี้อยู่

03 Jun
2020

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

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

Tags:: fullcalendar การใช้งาน fullcalendar

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

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

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

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