推荐一款可以拖拽、时间轴的日历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/fullcalendar@5.3.0/main.css'

rel

=

'stylesheet'

/>

<

script

src

=

'https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/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,有兴趣的同学可以去研究。

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