VUE实现日历组件功能

2024-10-28 12:36:00

哈哈，就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件。过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的。几者加起来体积庞大不说，也并不是很好使用在vue这种数据驱动的项目里。所以笔者经过一周的拍脑袋，做了一个十分简陋的版本。

简介

目前只支持月视图，该组件是 .vue 文件的形式。所以，大家在使用的时候是需要node的咯~~~

安装

npm install vue-fullcalendar

DEMO

针对这个组件，本人做了一个十分简单的 demo。进入到该项目后

npm install
npm run dev

然后打开浏览器输入 localhost:8080 你应该就能看到demo啦

使用

大致了解后肯定是使用的问题啦，你只需要把这个组件引入到你自己的vue项目中就可以自由使用啦，因为现在是比较初步的版本。所以笔者十分鼓励大家针对自己的需求做二次开发，

import fullcalendar from 'vue-fullcalendar'

API

既然是组件，笔者自然预先定义了一些小属性。不过不用担心，都是基于VUE的

props

1、events 是该组件唯一接受的参数用来表示该日历上的所有日程事件，他的格式应该如下

events = [
     {
      title : 'event1',
      start: '2016-07-01'，
      YOUR_DATA : {}
     },
     {
      title : 'event2',
      start : '2016-07-02',
      end : '2016-07-03',
      YOUR_DATA : {}
     }
   ]

title 自然就是事件的标题啦会直接显示在日历上

start 事件的开始日期必填哦

end 事件的结束日期没填就默认是开始日期

YOUR_DATA 你自己定义的一些数据变量名随意在后续都会被vue的广播事件传递

events

这里的events 可不是上面说的 props 里的events 哦而是你在使用日历时一些行为的反馈。比如你点击某一天某个时间日历组件都会向外部 dispatch 一个对应的事件和相应的参数

'changeMonth' 事件，当你切换月份时触发

this.$dispatch('changeMonth', start, end)

start 是这个月视图(并不是这个月)的第一天 yyyy-MM-dd

end 是这个月视图(并不是这个月)的最后一天 yyyy-MM-dd

'eventClick' : 当你点击某个日历事件时触发

this.$dispatch('eventClick', event, jsEvent, pos)

event 就是这个日历事件对象啦参考上面的props

jsEvent 这次点击的原生 javascript 事件

pos 这个事件的相对于日历的相对坐标在slot中使用

'dayClick' : 当你点击某一天触发

 this.$dispatch('eventClick', day, jsEvent)

day 你点击的这一天的 Date 对象

jsEvent 这次点击的原生 javascript 事件

slots

为了方便开发者的自由定制我在组件中加了很多slots 来填写大家自己需要的东西比如事件卡片筛选器，下图是一张我自己项目的事件卡片和筛选。当然我并没有把他们放进组件里。 I find my roof, you find yours.

结尾

因为这个组件还是比较初级的阶段，可能有不少问题，所以十分鼓励大家提issue或是下载后根据自己的需求二次开发。

demo下载：vue-fullcalendar_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js创建Calendar日历效果

使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar">  <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,
基于Vue实现支持按周切换的日历

基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换,具体内容如下 <template> <div class="date">  <div class="month"> <p>{{ currentYear }}年{{ currentMonth }}月</p> </div>  <ul class=&q
VUE实现日历组件功能

哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十
Vue实现typeahead组件功能(非常靠谱)

前言之前那个typeahead写的太早,不满足当前的业务需求. 而且有些瑕疵,还有也不方便传入数据和响应数据.. 于是就推倒了重来,写了个V2的版本看图,多了一些细节的考虑;精简了实现的逻辑代码效果图实现的功能 1: 鼠标点击下拉框之外的区域关闭下拉框 2: 支持键盘上下键选择,支持鼠标选择 3: 支持列表过滤搜索 4: 支持外部传入列表JSON格式的映射 5: 支持placeholder的传入 6: 选中对象的响应(.sync vue2.3的组件通讯的语法糖) 7: 箭头icon的映
vxe-table vue table 表格组件功能

一个功能更加强大的 Vue 表格组件查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格例子 <template> <div> <
vue实现日历组件

基于VUE实现日历组件,供大家参考,具体内容如下年和月份是使用输入框来切换的,没有做成选择框,️和️切换月份,红色选取是选取的日期实现思路和网上的大多数一样,首先是把月份的天数存进一个数组, monthDay:[31,'',31,30,31,30,31,31,30,31,30,31], 由于二月的天数是不确定的,所以就先设置为空然后去求选择的月份的第一天是星期几,通过 Date.getDay()函数,这个函数有一个注意事项,就是如果是星期天,他会返回0,这需要我们自己去处理一下图中,201
vue版日历组件的实现方法

开发背景常用日历组件可能满足不了我们自定义的多种需求(比如样式),因此通常情况下我们可能需要自己手动开发款日历,先上图开发流程 1. 根据常用日历样式,我们template部分可以分为三部分(上下月及当前月份展示:周日至周六展示:主体日期展示三部分) 1) template部分代码 <div class="date"> <div class="header"> <span class="pre_mo
vue实现日历备忘录功能

用vue写了个日历备忘录的功能,省略了备忘录的增删改查功能. 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>备忘录</title> <style type="text/css"> #box{ width: 469px; } /*日历*/ *{ padding:
从零写vue日历组件

目录 1.前言 2.vue日历制作 2.1制作月份选择器 2.2制作日历 2.2.1获取当前月所要显示的日期 2.2.2给不同的日期添加不同的样式 2.3将月份选择器和日历组件组合使用 2.4编辑功能 1. 前言最近做项目遇到一个需求,需要制作一个定制化的日历组件(项目使用的UI框架不能满足需求,算了,我直说了吧,ant design vue的日历组件是真的丑,所以就自己写了一个),如下图所示,需求大致如下:(2)日历可以按照月份进行上下月的切换.(2)按照月份展示周一到周日的排班信息.(3)
vue中使用element日历组件的示例代码

先看下效果图: 完整代码附上 <template> <div class="newSeeds" id="famerCalendar"> <div class="title-bottom"> <el-date-picker :clearable="false" prefix-icon="timeFilter" v-model="value2" ty
vue实现自定义日期组件功能的实例代码

实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calendar_header">' + '<div class="prev" @click="prevMonth"> < </div>' + '&l
vue自定义可选时间的日历组件

本文实例为大家分享了vue自定义可选时间日历组件的具体代码,供大家参考,具体内容如下日历功能: 1.过去时间不可选择 2.可自定义不可选时间 3.本月默认展示当天,其他月展示第一天,若为不可选时间,往后顺延效果图: -------下面开始表演----------- **首先,画出日历页面布局,参照win10系统日历布局*6行7列,为何如此,请自行理解-*本人也是"偷窥"来的 beginDay是当前月第一天的周几,prevMdays是上个月总天数,nowMdays是当月总天数,这样就

VUE实现日历组件功能

相关推荐

随机推荐