tui.calender日历创建、删除、编辑事件、自定义样式

这篇具有很好参考价值的文章主要介绍了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

  1. 样式穿透
  2. 自己画图,比如它的事件弹窗没法自定义,我就自己写了(先不总结了,我还在踩坑)
mounted() {
	this.calendarInstance.setOptions({
		template: {
			// 弹窗中的保存按钮文字
			popupSave() {
	          return '保存'
	        },
	        // 更多按钮的文字提示
	        monthGridHeaderExceed(hiddenEvents) {
	         return `<div><span style="color:red;">${hiddenEvents}</span> 全部课程</div>`
            },

		}
	})
},

到了这里,关于tui.calender日历创建、删除、编辑事件、自定义样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包