首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

FullCalendar - 开源的多功能 JavaScript 日历插件

本文字数:747 字 9图 阅读完需:约 4 分钟 点击上方“青年码农”关注 回复“源码”可获取各种资料 FullCalendar 是一个支持 React、Vue、Angular 原生 JavaScript...此教程是基于Vue2,FullCalendar 同时也支持 Vue3,文档在https://fullcalendar.io/docs/vue 官方指南提示不会深入介绍Vue的使用,需要自己根据示例可运行的项目参考...导入了核心组件一些扩展组件,在 components 中注册组件 最后使用 FullCalendar 运行项目,日历大概就是这个样子。 options 属性就是控制日历的关键。...这里面列举了部分属性事件,需要更详细的api请看官方文档:https://fullcalendar.io/docs 四 参考资料 官方:https://fullcalendar.io/ 文档:https...://fullcalendar.io/docs 插件:https://fullcalendar.io/docs/plugin-index Vue:https://fullcalendar.io/docs

7.1K1612

Electron+Vue3 MAC 版日历开发记录(1)——介绍

但也不是毫不目标的找,至少需要满足以下条件: 1.基于 Electron + Vue; 2.Vue 至少是 3,而不是 2 了; 3.使用 TypeScript; 4.使用 Vite,至少逼格比 Webpack...FullCalendar 紧接着,那就是「日历」本身了。...日历从结构布局上来说,都是比较复杂的,而且我看了一圈很多关于 Vue 的组件框架,基本都提供了 Calendar 组件,但本身的功能不多,未来的扩展性似乎不足。...基于此,我又开始了全网搜索了,最后还是找到了几乎都会参考使用的 FullCalendar[4]。...小结 有了 timestamp 作为参考,也有了 vite-electron-builder 脚手架,再以 FullCalendar 为主要核心构建自己的日历,基本可以开始我的折腾自学之旅。

1K20

Vue学习笔记(一)

Vue 学习笔记(一) 1. vue 简介 Vue 是一套用于构建用户界面的前端框架 1.1 vue 的两个特性 数据驱动视图 使用了 vue 的页面,vue 会监听数据的变化,自动重新渲染页面的结构...实现数据驱动视图双向数据绑定的核心原理。...步骤 导入 vue.js 文件 在页面中声明要被 vue 操作的 DOM 区域 创建 vue 实例对象 3. vue 的指令 指令是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构...-- v-ifv-show都是根据"="后的部分为true或false来决定是显示还是隐藏--> <!...过滤器 过滤器常用于文本的格式化,可用于插值表达式v-bind 属性绑定 过滤符由**管道符”|”**进行调用 在 filters 节点下定义的过滤器,是私有过滤器,只能在当前的 vm 实例所控制的

4.3K20

这几款基于vue3vite的开箱即用的中后台管理模版,让你yyds!

我最近一直在做前端可视化低代码相关的项目技术分享,刚好找到几款基于vue3vite的开箱即用的中后台管理模版,可以用到可视化项目中,所以这里特意做个总结,大家分享一下。...但是由于生态的不完善以及缺乏成熟方案的落地,vue3 的应用仍然探索小规模试验中。...使用了最新的 vue3, vite2, TypeScript 等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。...前序准备 你需要在本地安装 node git,异步请求数据用axios,所有的异步接口均采用node+typescript+mysql+docker实现的,所以最好先了解如下知识: vue vue3.0...富文本编辑器 fullcalendar fullcalendar 丰富的日历插件 界面展示 大家可以左右滑动来切换图片:) 4. vue-admin-box image.png vue-admin-box

4.1K20

前端 实战项目·动态加载 JS 文件

动态加载 JS 文件 对于 Vue、React 等框架开发的单页面应用,在某些页面开发特殊功能时经常需要依赖第三方 JS 文件,如果在全局引入 CDN 资源可能会加载冗余文件,此时最好使用动态加载方式...js 的加载不会阻塞页面的渲染资源的加载。defer 会按照原本的 js 的顺序执行。...对于 async,它的作用是能够异步的加载执行脚本,同样不会阻塞页面的渲染资源的加载,一旦加载到就会立刻执行。...如果加了 async 属性就相当于单独开了一个进程去独立加载执行,而defer是将 放到 底部一样的效果。.../3.10.0/fullcalendar.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/locale/zh-cn.js

5.2K40

前后端通吃,vue大全Mark一下

bootstrap-vue ★1267 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★1191 - 实现拖放视图模型数组同步 eagle.js ★...的时间选择组件 vue-placeholders ★58 - 处理占位符图片乱码 we-vue ★55 - Vue2及weui1开发的组件 vue-fullcalendar ★55 - vue FullCalendar...★29 - 懒加载背景组件的Vue组件 vue-ripple ★29 - 制作谷歌MD风格涟漪效果的Vue组件 vue-scroll ★27 - vue滚动 laravel-vue-pagination...★80 - 非阻塞通知库 vue-online ★77 - reactive的在线离线组件 vue-shortkey ★74 - 应用于Vue.js的Vue-ShortKey 插件 vue-bus...wap端 generator-loopback-vue ★104 - 典型前后端分离项目模板 vue-quasar-admin-example ★99 - 将QuasarVueJS应用于SPA项目 vue-zhihudaily

5.7K20

Vuebnb:一个用vue.jsLaravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,VuexLaravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。...一个CSS的转换 transform: translate(..)用于将图像移动到另一侧,而转换则提供滑动效果。我用vue.js绑定的translate以便用左,右箭头控制值。...解决方案包括一个协同使用VueVue-Router,VuexAxios一起创造一个令人惊讶的简单机制,在需要用于检索数据时使用它。 ?...关于这本书 从Vuebnb的特点你会有一些涉及全栈Vue网站开发的话题:Vue.js,VuexLaravel。...我在本文中没有提到的其他主题包括: Vue.js数据绑定的核心概念、指令生命周期挂钩 建立全栈应用的最佳实践开发工作流Vue/laravel,包括WebPack。

6K10

Vue常用经典开源项目汇总参考

★181 - 支持lunar日期事件的日期选择器vue-video-player ★178 - VueJS视频及直播播放器vue-fullcalendar ★176 - 基于vue.js的全日历组件... ★105 - 用于文件上传的Vue组件vue-charts ★101 - 轻松渲染一个图表vue-swiper ★95 - 易于使用的滑块组件vue-images ★93 - 显示一组图片的lightbox... ★35 - VueJS的Markdown编辑器组件vue-popup-mixin ★35 - 用于管理弹出框的遮盖层cubeex ★33 - 包含一套完整的移动UIvue-fullcalendar ★...32 - vue FullCalendar封装vue-material-design ★32 - Vue MD风格组件vue-morris ★31 - Vuejs组件封装Morrisjs库we-vue ...插件vue-shortkey ★53 - 应用于Vue.js的Vue-ShortKey 插件vue-cordova ★50 - Cordova的VueJS插件vue-router-transition

5.8K11

揭秘程序员眼中的 Vue 与 Angular | 码云周刊第 32 期

揭秘程序员眼中的 Vue 与 Angular 一 基于 Vue 的项目 1....项目名称:基于 Vue.js 的 UI 组件库 项目简介:iView 是一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的中后台产品。...项目名称:基于 Vue 的后台管理系统 项目简介:项目是 基于 vue.js 与 vue-router 搭建的后台管理系统,页面样式采用 metronic 提供的模板。...项目名称: 基于 angular 的后台管理 项目简介:这是一个基于 Angular 1.6.4(最新版)的管理后台模板,用于演示 Angular 1.x 最新版本的用法,纯前端无后台。...CodeBe ( 码B ) 是一个是使用 angular2 整合各种插件的项目,包括(layer,bootstrap-table,markdown 编辑器,highcharts,ckeditor,高德地图,fullcalendar

2K50

vue常用组件库_vue内置组件

:应用于Vuejs2的Twitter的Bootstrap 4组件 vue-swipe:VueJS触摸滑块 vue-amap:基于Vue 2高德地图的地图组件 vue-chartjs:vue中的Chartjs...:VueJS的Markdown编辑器组件 vue-popup-mixin:用于管理弹出框的遮盖层 cubeex:包含一套完整的移动UI vue-fullcalendarvue FullCalendar...:vue的Bootstrap样式组件 vuep:用实时编辑预览来渲染Vue组件 vue-online:reactive的在线离线组件 vue-lazy-render:用于Vue组件的延迟渲染...– 由vueant design创建的优美UI组件 bootstrap-vue – 应用于Vuejs2的Twitter的Bootstrap 4组件 vueAdmin – 基于vuejs2element...lunar日期事件的日期选择器 vue-fullcalendar – 基于vue.js的全日历组件 vue-datepicker – 漂亮的Vue日期选择器组件 datepicker – 基于flatpickr

8K20

vue3.0 微应用数据请求跨域配置

目录 root app-base // vue 2.6.12 app-1 // vue 3.0.2 问题 我们知道一般,独立使用vue开发单例应用,可以通过配置 vue.config.js 的{ devServer...具体的可以分为以下几种情况: 基座独立开发代理 子应用独立开发代理 子应用嵌套基座内的代理 现在的问题是,当基座子应用各自独立配置代理服务时,各自独立开发请求数据是正常的。...基座代理 基座版本vue2.6.12, // vue.config.js { devServer:{ port: 9000, publicPath: "/" proxy:....其实代理的配置基础都是基于vue.config.js配置或者说是 webpack代理配置, 之所以 这里子应用无论独立开发或加载到基座联调,都能正常请求到数据,是因为基座子应用都配置了相同的代理头.../proxyApi 并且请求的服务地址一致 这里回到问题, 如果基座子应用独立配置, 例如: 子应用独立开发时的请求地址: /user 当子应用嵌套在基座内时,地址将变为: localhost: 9000

95620
领券