推荐一款可以拖拽、时间轴的日历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，有兴趣的同学可以去研究。

最后希望大家多多评论、关注、点赞、转发，你们的支持，是我更新下去的最大动力。