各位老铁们好，相信很多人对前端calendar都不是特别的了解，因此呢，今天就来为大家分享下关于前端calendar以及前端calendar的问题知识，还望可以帮助大家，解决大家的一些困惑，接下来一起来看看吧！
FullCalendar 是一个用于创建日历界面的 JavaScript 开源库，支持全尺寸拖放（Full-sized drag & drop），同时具有适用于 React 和许多其他框架的适配器，比如：React、Vue、Angular 、Web Component等以及一流的 TypeScript 支持。
FullCalendar 目前非常受欢迎 ，除了易于使用之外还具有许多内置功能和用于充分定制的插件，而官方提供的插件数量已经达到了 25+。
目前 FullCalendar 在 Github 上通过 MIT 协议开源，有超过 17.3k 的 star、3.6k 的 fork、项目依赖量 63.8k、代码贡献者 100+、妥妥的前端优质开源项目。
2.为什么要 FullCalendar2.1 不同视图支持
页面渲染视图如下：
2.2 丰富的插件系统
FullCalendar 具有多种用于添加额外功能的插件。
插件系统很有用，因为开发者不需要下载整个代码库，但可以选择要包含的插件。 这样做可以缩小代码库的大小，并使管理依赖项变得更容易。
一些主流的插件包括：
下面是在 Vue3 中使用 FullCalendar 的代码示例：
需要安装核心 npm 包：
添加 FullCalendar 组件并包含日期网格插件：
下面是设置以后的基础视图：
接下来可以自定义顶部工具栏并添加每周和每日视图。 FullCalendar 提供了 headerToolbar 属性，开发者可以使用它来选择想要查看的控件：
开发者可以按照想要的任何顺序排列这些字段，FullCalendar 将正确的渲染。
3.2 添加事件交互
为了给日历组件添加交互，需要首先添加 @fullcalendar/interaction 插件：
yarn add @fullcalendar/interaction
同时需要将 editable 和 selectable 属性设置为 true 并将事件处理程序放置在 events 属性中。
以上代码首先添加了一个 handleSelect 回调，其接受 info 对象作为参数，该对象包含有关用户选择日期的信息。
相关信息就介绍到这里，前端calendar的问题希望对你有所帮助。
