jquery日历插件 途牛_js jquery 实现 排班,轮班,日历,日程。使用fullcalendar 插件...

如果想用fullcalendar实现排班功能,或者日历、日程功能。那么只需要简单的几步:

这里先挂官网链接:

fullcalendar

fullcalendar官网下载链接

一、下载及简单配置

1、这里先明确你想要的是哪种形式式:fullcalendar 提供多种日历形式:

你们可以在官网首页的演示里面看到,在这里我主要讲一下我这里使用的两种实现:

(1)日历模式(只是用fullcalendar实现)

(2)时间轴模式(除了fullcalendar还用了官网的另一个插件叫schedule

在下载了fullcalendar之后将其引入你自己的项目,只需要进行很简单的配置就可以进行使用了。

这是需要运行插件的几个基本的配置,将其引入页面

此处需要注意的是jquery和moment的js必须在fullcalendar的js之前引入。如果你也想做时间轴模式的日历,并且已经下载了schedule的话,那么你需要在在页面中引入schedule的js和css

也就是说不但要引入fullcalendar的还要引入schedule的。

之后在页面定义一个div 这个div会被渲染成日历插件比如我建立一个div

那么这时候就可以在js中进行配置了

$('#calendar').fullCalendar({

defaultView:'month',

height:'auto',

header:false,

displayEventTime:true,

displayEventEnd:true,

weekMode:"liquid",

aspectRatio:2,

allDaySlot:false,

timeFormat:'HH:mm',

locale:'zh-cn',

})

这其中的一些配置根据自己的需求来定,具体官方文档

需要说明的是fullcalendar提供schedule的免费使用,不过在插件上会有水印。要想去掉水印可以在配置中加上这一句

schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',

加在上面的配置里就可以。

这样运行之后你可以得到一个日历了

其中的defaultView是决定显示是月 还是年 或者是星期的。对于fullcalendar有以下几种取值:

month

basicWeek

basicDay

agendaWeek

agendaDay

listYear

listMonth

listWeek<

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值