建设职业注册中心网站,请假条模板,河北邯郸最新消息,怎么营销推广全是坑#x1f573;#xff01;全是坑#x1f573;#xff01;全是坑#x1f573;#xff01;能不用就不用#xff01; 官方文档#xff1a;https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md 实例的一些方法#xff0c;比如创建、删除、修改、… 全是坑全是坑全是坑能不用就不用 官方文档https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md 实例的一些方法比如创建、删除、修改、查看事件详情都有下面写几个我用得多的
1. 一些参数配置的介绍
templatedivToastUICalendarrefcalendarstyleheight: 800px:viewmonth // 日历视图展示类型可按日、周、月展示:use-form-popuptrue // 是否打开创建事件弹窗:use-detail-popuptrue // 是否打开查看事件详情弹窗:week{showTimezoneCollapseButton: true,timezonesCollapsed: false,eventView: true,taskView: true,} // 周日历的参数配置:month{ startDayOfWeek: 1 } // 月日历从周x开始展示:timezone{ zones } // 时区设置:themetheme // 日历的主题样式设置具体参考官方文档:template{milestone: getTemplateForMilestone,allday: getTemplateForAllday,} // 自定义日历的部分样式模板:grid-selectiontrue // 是否可以单击和双击日期/时间选择:calendarscalendars // 为事件指定样式下面解释:eventsevents // 事件列表selectDateTimeonSelectDateTime // 点击时间选择日期beforeCreateEventonBeforeCreateEvent // 创建事件beforeUpdateEventonBeforeUpdateEvent // 修改事件beforeDeleteEventonBeforeDeleteEvent // 删除事件afterRenderEventonAfterRenderEvent // 渲染事件clickDayNameonClickDayName //每周/每日视图的标题区域显示当前查看的时间范围的星期几和日期clickEventonClickEvent // 点击事件获取详细信息clickTimezonesCollapseBtnonClickTimezonesCollapseBtn // 折叠时区clickMoreEventsBtnonClickMoreEventsBtn // 点击更多按钮//div
/template2. calenders和events参数介绍
export default {data() {return {calendars: [{id: 0,name: Private,backgroundColor: #9e5fff,borderColor: #9e5fff,dragBackgroundColor: #9e5fff,},], // 相对应id的事件的颜色、border颜色、拖拽的颜色events: [{id: 1, // 事件的idcalendarId: 0, // 和上面的calendars的id相对应就会展示相应的样式颜色title: TOAST UI Calendar Study, // 事件名称category: time, // 事件的类别task、allday 、time、milestone在视图中的展示方式不一样start: 2024-01-16T16:00:00, // 开始时间end: 2024-01-17T17:00:00, // 结束时间isReadOnly: true, // 是否为只读color: #fff, //文字颜色下面这些样式的优先级比calendarId对应的优先级高backgroundColor: #ccc, // 背景颜色customStyle: {fontStyle: italic,fontSize: 15px,}, // 事件元素的样式borderColor:, //事件元素左边的颜色raw: // 自定义任何形式的数据},]}}
]3. 创建事件createEvents
官方给的具体案例 https://github.com/nhn/tui.calendar/blob/main/apps/vue-calendar/example/App.vue 安装tui.calender及使用方法参考我的上篇文章 tui.calender日历在vue中的使用1.0 computed: {calendarInstance() {return this.$refs.calendar.getInstance();},},methods:{onBeforeCreateEvent(eventData) {const event {calendarId: eventData.calendarId || ,id: String(Math.random()),title: eventData.title,isAllday: eventData.isAllday,start: eventData.start,end: eventData.end,category: eventData.isAllday ? allday : time,dueDateClass: ,location: eventData.location,state: eventData.state,isPrivate: eventData.isPrivate,};// 在computed中创建的日历实例直接用createEvents创建this.calendarInstance.createEvents([event]); },4. 删除事件beforeDeleteEvent
onBeforeDeleteEvent({ title, id, calendarId }) {this.calendarInstance.deleteEvent(id, calendarId);},
}5. 修改事件beforeUpdateEvent
onBeforeUpdateEvent(updateData) {const targetEvent updateData.event;const changes { ...updateData.changes };this.calendarInstance.updateEvent(targetEvent.id, targetEvent.calendarId, changes);
},6. 自定义样式 不是每个样式都能自定义可以自定义的参考官方文 https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/template.md 不能自定的我用的两种方式
样式穿透自己画图比如它的事件弹窗没法自定义我就自己写了(先不总结了我还在踩坑)
mounted() {this.calendarInstance.setOptions({template: {// 弹窗中的保存按钮文字popupSave() {return 保存},// 更多按钮的文字提示monthGridHeaderExceed(hiddenEvents) {return divspan stylecolor:red;${hiddenEvents}/span 全部课程/div},}})
},
