tui.calender日历创建、删除、编辑事件、自定义样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了tui.calender日历创建、删除、编辑事件、自定义样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

全是坑🕳！全是坑🕳！全是坑🕳！能不用就不用！

官方文档：https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md
实例的一些方法，比如创建、删除、修改、查看事件详情都有，下面写几个我用得多的
tui.calender日历创建、删除、编辑事件、自定义样式,javascript,前端,开发语言,tui.calender

1. 一些参数配置的介绍

<template>
  <div>
    <ToastUICalendar
      ref="calendar"
      style="height: 800px"
      :view="'month'"  // 日历视图展示类型，可按日、周、月展示
      :use-form-popup="true" // 是否打开创建事件弹窗
      :use-detail-popup="true" // 是否打开查看事件详情弹窗
      :week="{
        showTimezoneCollapseButton: true,
        timezonesCollapsed: false,
        eventView: true,
        taskView: true,
      }"  // 周日历的参数配置
      :month="{ startDayOfWeek: 1 }" // 月日历从周x开始展示
      :timezone="{ zones }" // 时区设置
      :theme="theme" // 日历的主题样式设置，具体参考官方文档
      :template="{
        milestone: getTemplateForMilestone,
        allday: getTemplateForAllday,
      }" // 自定义日历的部分样式模板
      :grid-selection="true" // 是否可以单击和双击日期/时间选择
      :calendars="calendars" // 为事件指定样式，下面解释
      :events="events" // 事件列表
      @selectDateTime="onSelectDateTime" // 点击时间，选择日期
      @beforeCreateEvent="onBeforeCreateEvent" // 创建事件
      @beforeUpdateEvent="onBeforeUpdateEvent" // 修改事件
      @beforeDeleteEvent="onBeforeDeleteEvent" // 删除事件
      @afterRenderEvent="onAfterRenderEvent" // 渲染事件
      @clickDayName="onClickDayName" //每周/每日视图的标题区域显示当前查看的时间范围的星期几和日期
      @clickEvent="onClickEvent" // 点击事件，获取详细信息
      @clickTimezonesCollapseBtn="onClickTimezonesCollapseBtn" // 折叠时区
      @clickMoreEventsBtn="onClickMoreEventsBtn" // 点击更多按钮
    />
  </div>
</template>

2. calenders和events参数介绍

export default {
  data() {
    return {
     calendars: [
        {
          id: '0',
          name: 'Private',
          backgroundColor: '#9e5fff',
          borderColor: '#9e5fff',
          dragBackgroundColor: '#9e5fff',
        },
      ], // 相对应id的事件的颜色、border颜色、拖拽的颜色
      events: [
		  {
		    id: '1', // 事件的id
		    calendarId: '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
不能自定的我用的两种方式文章来源地址https://www.toymoban.com/news/detail-806438.html

样式穿透
自己画图，比如它的事件弹窗没法自定义，我就自己写了(先不总结了，我还在踩坑)

mounted() {
	this.calendarInstance.setOptions({
		template: {
			// 弹窗中的保存按钮文字
			popupSave() {
	          return '保存'
	        },
	        // 更多按钮的文字提示
	        monthGridHeaderExceed(hiddenEvents) {
	         return `<div><span style="color:red;">${hiddenEvents}</span> 全部课程</div>`
            },

		}
	})
},