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

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

官方文档:https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md
实例的一些方法,比如创建、删除、修改、查看事件详情都有,下面写几个我用得多的
在这里插入图片描述

1. 一些参数配置的介绍

<template><div><ToastUICalendarref="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', // 事件的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
不能自定的我用的两种方式

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python使用jupyter记笔记

目录 一、安装 二、运行jupyter 三、使用 四、记笔记 Jupyter Notebook&#xff08;此前被称为 IPython notebook&#xff09;是一个交互式笔记本&#xff0c;支持运行 40 多种编程语言。 Jupyter Notebook 的本质是一个 Web 应用程序&#xff0c;便于创建和共享程序文档&a…

位运算的奇技淫巧

常见位运算总结&#xff1a; 1、基础位运算 左移<<运算 将二进制数向左移位操作&#xff0c;高位溢出则丢弃&#xff0c;低位补0。 右移>>运算 右移位运算中&#xff0c;无符号数和有符号数的运算并不相同。对于无符号数&#xff0c;右移之后高位补0&#xff…

【正点原子STM32连载】 第四十三章 FLASH模拟EEPROM实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第四…

自定义shell工具函数之pull_image()

这是一个名为pull_image的Shell脚本函数。让我来解释一下这个函数的功能&#xff1a; function pull_image() {image$1DOCKER_IMAGE_MIRROR$(get_config_or_env DOCKER_IMAGE_MIRROR)if [[ "${DOCKER_IMAGE_MIRROR}" "1" ]]; thenif [[ "$(uname -m…

深入解析ESP32C3(1) - 使用ESP-IDF

乐鑫ESP32系列芯片是性价比非常高的嵌入式平台&#xff0c;不仅外设接口丰富&#xff0c;有较多的存储空间&#xff0c;还支持WIFI/BT等无线连接&#xff0c;同时也支持加密和权限管理等安全功能&#xff0c;这大大拓展了芯片的应用领域&#xff1b;当然&#xff0c;最重要的是…

Python使用pyechart分析疫情确诊人数图(2024)

import json from pyecharts.charts import Map from pyecharts import options as opts# 首先打开文件获取数据 f open("/Desktop/python/Project/数据可视化/疫情.txt", "r", encoding"UTF-8") data f.read()# 字符串转化成json数据 data_js…

Java多线程--创建多线程的基本方式一:继承Thread类

文章目录 一、创建和启动线程&#xff08;1&#xff09;概述&#xff08;2&#xff09;方式1&#xff1a;继承Thread类1、使用步骤2、举例2.1 案例12.2 案例22.3 案例3 3、两个问题3.1 问题13.2 问题2 4、代码及总结 二、练习&#xff08;1&#xff09;方式一&#xff08;2&…

索引的概述和性能分析

索引index&#xff0c;是一种有序的数据结构&#xff0c;可以高效的获取数据&#xff0c;在数据库中维护着满足查找特定算法的数据结构&#xff0c;就是索引 无索引的情况&#xff0c;查询数据时会全表扫描&#xff0c;效率极低 索引结构 &#xff08;1&#xff09;二叉树&…

python解决求二叉树的最长同值路径问题

对于给定的一颗二叉树&#xff0c;需要找到最长的路径&#xff0c;并且该路径上的每个节点具有相同的值的问题&#xff0c;对于寻找到的这条路径可以经过根节点也可以不经过根节点&#xff0c;两个节点之间的路径长度是由他们的变数来表示的&#xff0c;给定如下图的二叉树 添加…

【 Qt 快速上手】-②- Qt 环境搭建

文章目录 1. Qt 开发工具概述1.1 Qt Creator 介绍1.2 Visual Studio 介绍1.3 Eclipse 介绍 2. Qt SDK 的下载与安装2.1 Qt SDK 的下载2.2 Qt SDK 的安装2.3 验证 Qt SDK 安装是否成功2.4 Qt 环境变量配置 1. Qt 开发工具概述 Qt 开发环境需要安装三个部分&#xff1a; C编译器…

小伙频繁发朋友圈引发分手,拼命“晒“生活是否成为一种病态行为?

根据《西湖之声》1月19日的报道&#xff0c;一个小伙子因为一天发十几条朋友圈而引起了他女友的不满&#xff0c;女友甚至提出了分手。现如今&#xff0c;朋友圈已经成为每个人自我形象展示的平台&#xff0c;认真发朋友圈不仅是表达自己的一种方式&#xff0c;也是一种自我释放…

redis缓存和本地缓存的应用设计

数据查询顺序 一级缓存&#xff1a;本地缓存 -》二级缓存&#xff1a;redis缓存 -》数据库 本地缓存和分布式缓存 本地缓存&#xff1a;基于jvm, 意思是程序放在哪&#xff0c;数据就存储在哪&#xff0c;不需要网络请求&#xff0c;特别快&#xff0c;但是需要占用jvm的内存…

Python利用Excel读取和存储测试数据完成接口自动化教程

http_request2.py用于发起http请求 #读取多条测试用例#1、导入requests模块import requests#从 class_12_19.do_excel1导入read_data函数from do_excel2 import read_datafrom do_excel2 import write_datafrom do_excel2 import count_case#定义http请求函数COOKIENonedef ht…

Unity之四元数计算

四元数相乘 #region 四元数相乘 Quaternion q Quaternion.AngleAxis(20, Vector3.up); this.transform.rotation * q; #endregion 四元数乘向量 Vector3 v Vector3.forward; print(v); //四元数乘向量的顺序不能改变&#xff0c;也就是说不能用向量去乘四元数&#xff0c;…

Spring Boot Aop 执行顺序

Spring Boot Aop 执行顺序 1. 概述 在 spring boot 项目中&#xff0c;使用 aop 增强&#xff0c;不仅可以很优雅地扩展功能&#xff0c;还可以让一写多用&#xff0c;避免写重复代码&#xff0c;例如&#xff1a;记录接口耗时&#xff0c;记录接口日志&#xff0c;接口权限&…

C# byte转int:大小端读取

参考&#xff1a;byte[]数组和int之间的转换 文章目录 Byte转为INT小端存储方式转int大端存储方式转int 大端模式和小端模式是计算机存储多字节数据时的两种方式。内存地址从小往大增长。 大端模式&#xff1a;最高有效&#xff08;最高位&#xff09;的字节存放在最小地址上&…

python 自动化模块 - pyautogui初探

python 自动化模块 - pyautogui 引言一、安装测试二、简单使用三、常用函数总结 引言 在画图软件中使用pyautogui拖动鼠标&#xff0c;画一个螺旋式的正方形 - (源码在下面) PyAutoGUI允许Python脚本控制鼠标和键盘&#xff0c;以自动化与其他应用程序的交互。API的设计非常简…

限流算法之流量控制的平滑之道:滑动时间窗算法

文章目录 引言简介优点缺点样例样例图样例代码 应用场景结论 引言 在互联网应用中&#xff0c;流量控制是一个重要的组件&#xff0c;用于防止系统过载和保护核心资源。常见的限流算法包括固定窗口算法和滑动时间窗算法。本文将重点介绍滑动时间窗算法&#xff0c;并分析其优缺…

【设计模式 行为型】策略模式

它允许在运行时根据需要选择算法的行为。该模式通过将算法封装成独立的类&#xff0c;使得它们可以相互替换&#xff0c;而不影响使用算法的客户端代码。 策略模式主要包含以下角色&#xff1a; 环境&#xff08;Context&#xff09;&#xff1a;环境对象持有一个策略对象的引…

基于Abaqus的三种钢筋混凝土梁数值模拟对比研究

混凝土结构抗压强度高&#xff0c;而抗拉强度大约只有其十分之一&#xff0c;在受到竖向荷载&#xff08;包括自重&#xff09;作用下&#xff0c;梁下部会产生拉应力&#xff0c;上部产生压应力&#xff0c;而由于其抗拉强度低&#xff0c;因此很小的荷载即可导致梁下部开裂&a…