tui.calender日历在vue中的使用1.0

官网:https://ui.toast.com/tui-calendar
github:https://github.com/nhn/tui.calendar/tree/main
月、周、日视图都有,拖拽也比较方便,但是自己用起来比较费劲,参考文档写得不全,做个记录日后方便参考,我用的vue。
在这里插入图片描述
1.首先搭建自己的项目,然后安装

npm install @toast-ui/calendar

安装可能遇到的报错以及解决方法

报错1:You are using the runtime-only build of Vue 
where the template compiler is not available. 
Either pre-compile the templates into render functions, 
or use the compiler-included build.解决1:在根目录下新建一个新的vue.config.js的文件,
添加runtimeCompiler为true
module.exports = {runtimeCompiler: true
}报错2:Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.解决2:重新安装,后面加上--legacy-peer-deps
npm install @toast-ui/calendar --legacy-peer-deps
  1. 在github上下载源码,然后找到vue-calender中的App.vue,把文件复制到自己项目的vue文件中,
    import的这些文件自己根据路径去项目中找到然后复制到自己的项目,不出意外就可以跑出来了。
    在这里插入图片描述

options选项里的字段
https://github.com/nhn/tui.calendar/tree/main/docs/en/apis
这些是options里面参数的介绍和日历的方法,可以挨个看看
在这里插入图片描述
介绍一部分
在这里插入图片描述
参考https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md
在这里插入图片描述

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

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

相关文章

如何使用 AT+WEBSERVER 指令实现自定义的 Webserver html 网页配网

开启 AT 固件中的 Webserver 指令和 FS 指令支持 乐鑫官网发布的默认通用 AT 固件不支持 webserver 配网功能, 需要用户自己搭建 esp-at 环境,并在 sdkconfig 中开启 webserver AT 指令 和 FS 指令的支持, 如下图所示: 测试 AT 固…

【Spring Boot】构建RESTful服务 — 构建RESTful应用接口

构建RESTful应用接口 RESTful架构是目前最流行的互联网软件架构规范,是Web API(应用编程接口)的大趋势和主流规范,了解了RESTful的众多优点之后,接下来一步一步地学习如何使用Spring Boot构建RESTful Web API。 1.Sp…

ThinkPHP6企业OA办公系统

有需要请加文章底部Q哦 可远程调试 ThinkPHP6企业OA办公系统 一 介绍 勾股OA基于ThinkPHP6开发,前端Layui,数据库mysql,是一款实用的企业办公系统。可多角色登录,集成了系统设置、人事管理、消息管理、审批管理、日常办公、客户…

解决Qt的列表加载大量数据卡顿的问题

问题概述 本人在使用QListView插入大量数据时,界面卡顿十分严重。数据量大概只有上千左右,但是每个Item的内容比较多。当数据不停地插入一段时间后,卡顿到鼠标的移动都有点困难。 解决思路 QListView是典型的MVC思想的产物。界面呈现出来的数…

python——案例11:数值交换

案例11:数值交换xinput(输入一个数值赋值给x:) yinput(输入一个数值赋值给y:)tempx #创建临时变量,以此变量为基础进行逐次交换 xy ytemp print(交换后的X的值是:{}.format(x)) # print(交换后的Y的值是:{}.format(y)) #

RabbitMQ学习——发布订阅/fanout模式 topic模式 rabbitmq回调确认 延迟队列(死信)设计

目录 引出点对点(simple)Work queues 一对多发布订阅/fanout模式以登陆验证码为例pom文件导包application.yml文件rabbitmq的配置生产者生成验证码,发送给交换机消费者消费验证码 topic模式配置类增加配置生产者发送信息进行发送控制台查看 rabbitmq回调确认配置类验…

Flutter:屏幕适配

flutter_screenutil flutter_screenutil是一个用于在Flutter应用程序中进行屏幕适配的工具包。它旨在帮助开发者在不同屏幕尺寸和密度的设备上创建响应式的UI布局。 flutter_screenutil提供了一些用于处理尺寸和间距的方法,使得开发者可以根据设备的屏幕尺寸和密度…

Spring(11) Bean的生命周期

目录 一、简介二、Bean的流程1.BeanDefinition2.Bean 的生命周期 三、代码验证1.User 实体类2.MyBeanPostProcessor 后置处理器3.SpringConfig 扫描包配置4.UserTest 测试类5.测试结果6.模拟AOP增强 三、总结 一、简介 首先,为什么要学习 Spring 中 Bean 的生命周期…

C++项目:在线五子棋对战网页版--session管理模块开发

session 在WEB开发中,HTTP协议是⼀种⽆状态短链接的协议,这就导致⼀个客⼾端连接到服务器上之后,服务器不知道当前的连接对应的是哪个用户,也不知道客⼾端是否登录成功,这时候为客⼾端提所有服务是不合理的。因此&am…

Golang bitset 基本使用

安装: go get github.com/bits-and-blooms/bitset下面代码把fmtx换成fmt就行 //------------基本操作------------//构建一个64bit长度的bitsetb : bitset.New(64)//放入一个数b.Set(10)fmtx.Println("add-10:", b.DumpAsBits()) // 0000000…

MyBatisX自动和数据库的字段关联

先下个插件 右键数据库,点MybatisX-Generator 在根据自己需求勾选 actual column:保证数据库的驼峰命名生效

idea模板的使用(配置xml文件模板)

1. 问题的引出 我们在日常项目中可以发现,sql映射文件和mybatis主配置文件,以及application.yml文件中有很多固定不变的内容,为了方面使用,所以可以把这些xml文件设置为模板 2. 创建模板的步骤 按照图片一步一步进行即可 点击…