日历组件fullcalendar使用记录

 首先这是 fullcalendar.io官网。由于是英文的，所以阅读起来可能不是很友好。

这是部分api中文文当链接 中文文档

自定义表头的化需要用到  @fullcalendar/resource-timegrid  

自定义表头后设置宽度    @fullcalendar/scrollgrid

涉及到一些样式方面的，都可以直接通过 :global(类名) 直接修改

   { // 自定义返回的样式const node = document.createElement('div')node.innerHTML = (arg.backgroundColor && arg.backgroundColor != '#e8e8e8') ? `${arg.event.title}`: ''const arrayOfDomNodes = [node]return { domNodes: arrayOfDomNodes }}}/>

  // 表格已有事件，
const handleEventClick = (clickInfo: EventClickArg) => {console.log('clickInfo', clickInfo);}// 点击表格 可用区域 的事件const handleDateSelect = (selectInfo: DateSelectArg) => {
console.log('selectInfo', selectInfo);}// 隐藏 FullCalendar 工具后需要触发事件，可以直接获取ref触发
ref?.current?._calendarApi.prev() //触发 FullCalendar 上一天
ref?.current?._calendarApi.next() //触发 FullCalendar 下一天

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！