fullcalendar使用小记之一

mobile的html页面用到此控件,参与处理,简要记载了。
1.初始化日历
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
      editable: false,
      dayClick: function( date, allDay, jsEvent, view ) {}
});
2.注册日期单元格事件
dayClick: function( date, allDay, jsEvent, view ) {}
由于点击时更新页面下的列表,查阅相关资料,才解决refresh问题,如下:
dayClick: function( date, allDay, jsEvent, view ) {
$("#listcal").load("http://202.100.100.21:8081/bdtsk",function(data){
 $("#listcal").listview("refresh");
});
}
这个方法的确有效。但是,遇到点问题,多次点击后,发现事件失效了(见笑,对js懂不多)。
所以在一番折磨后,直接采用ajax了,如下:
dayClick: function( date, allDay, jsEvent, view ) {
$.ajax({
dataType: "html",
url: "http://202.100.100.21:8081/tsk",
cache : false,
data:date,
success : onSuccess, 
   error : onError 
});
}
注:在比较老的系统里整东西,尽量少引用新东西,这里就用html格式了。大概很多人都用json,也有用html的
3.手指左切与右切
$(window).on("swipeleft", function(event) { 
    return $('#calendar').fullCalendar('next');
  });
  $(window).on("swiperight", function(event) {
    return $('#calendar').fullCalendar('prev');
  });
});
4.选择效果
selectable:true

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10531/viewspace-767866/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/10531/viewspace-767866/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FullCalendar是一个功能强大的日历插件,可以用于在网页上创建和管理日程安排。它支持多种视图,包括timeline view(时间轴视图)。 要在FullCalendar使用timeline view,你需要引入相应的插件文件。首先,确保你已经包含了FullCalendar的核心文件和样式表。然后,按照以下步骤进行操作: 1. 下载并引入Timeline插件文件: 你可以从FullCalendar的官方网站或GitHub仓库下载Timeline插件文件。将`timeline.js`和`timeline.css`文件复制到你的项目中,并在HTML页面中引入这些文件。 ```html <link rel="stylesheet" href="path/to/timeline.css"> <script src="path/to/timeline.js"></script> ``` 2. 创建日历容器: 在HTML页面中创建一个容器来显示日历。例如,你可以在一个`<div>`元素中添加一个ID作为容器的标识符。 ```html <div id="calendar"></div> ``` 3. 初始化FullCalendar: 在JavaScript代码中,使用FullCalendar的初始化函数来创建一个日历实例,并指定视图为timeline view。 ```javascript document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['timeline'], initialView: 'timelineWeek', // 设置初始视图为timeline view // 其他配置选项... }); calendar.render(); }); ``` 4. 配置和自定义: 你可以根据需要进一步配置和自定义timeline view。例如,你可以设置视图的日期范围、时间间隔、显示的事件等。具体的配置选项可以参考FullCalendar的文档。 ```javascript var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['timeline'], initialView: 'timelineWeek', views: { timelineWeek: { slotDuration: '00:30', // 时间间隔为30分钟 slotLabelInterval: '01:00', // 每小时显示一次时间标签 slotMinTime: '08:00:00', // 最早时间为8点 slotMaxTime: '18:00:00', // 最晚时间为18点 } }, // 其他配置选项... }); ``` 这样,你就可以使用FullCalendar的timeline view来显示时间轴视图了。根据你的需求,你还可以进一步自定义和扩展这个日历插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值