推薦一款可以拖拽、時間軸的日曆js插件

簡介

fullcalendar是由typescript編寫的

安裝

<code># npm 安裝
npm install --save @fullcalendar/core @fullcalendar/daygrid

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin ]
  });

  calendar.render();
});


#cdn 在線引用
 >
<
html
 
lang
=
'en'
>

  
<
head
>

    
<
meta
 
charset
=
'utf-8'
 />

    
<
link
 
href
=
'https://cdn.jsdelivr.net/npm/[email protected]/main.css'
 
rel
=
'stylesheet'
 />

    
<
script
 
src
=
'https://cdn.jsdelivr.net/npm/[email protected]/main.js'
>
script
>

    
<
script
>


      
document
.addEventListener(
'DOMContentLoaded'
, 
function
(
) 
{
        
var
 calendarEl = 
document
.getElementById(
'calendar'
);
        
var
 calendar = 
new
 FullCalendar.Calendar(calendarEl, {
          
initialView
: 
'dayGridMonth'
        });
        calendar.render();
      });

    
script
>

  
head
>

  
<
body
>

    
<
div
 
id
=
'calendar'
>
div
>

  
body
>

html
>
/<code>

截圖

• 拖拽事件

• 時間軸

• 時間表格

• 選擇日期

• 後臺事件

• 主題

• 語言

總結

源碼地址：
https://github.com/fullcalendar/fullcalendar，有興趣的同學可以去研究。

最後希望大家多多評論、關注、點贊、轉發，你們的支持，是我更新下去的最大動力。