java fullcalendar_fullCalendar日程管理

最新推荐文章于 2024-01-04 20:23:22 发布
最新推荐文章于 2024-01-04 20:23:22 发布
阅读量235 收藏
点赞数
文章标签： java fullcalendar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39789646/article/details/114204874
版权
这段代码展示了如何使用FullCalendar JavaScript库结合Java来实现一个日程管理功能。通过Ajax从服务器获取数据，动态填充日历事件，并提供事件鼠标悬停提示、日程选择和显示。同时，代码处理了时间的格式转换和日程展示的相关设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//日程安排

functiontimeTable(id){var inner = "

$("#timmerDlg").html(inner);

$("#timmerDlg").dialog('open');var h = $(window).height()*0.6$('#calendar').fullCalendar({

header: {

left:'today',

center:'prevYear prev title next nextYear',

right:'month,basicDay'},

firstDay:7,//周日作为每周第一天

height:h,

navLinks:true, //can click day/week names to navigate views

editable: false,

eventLimit:true, //allow "more" link when too many events

timeFormat: 'H:mm',

allDaySlot:false,

selectable:true,

selectHelper:true,

select:function( startDate, endDate, allDay, jsEvent, view){

$('#calendar').fullCalendar( 'select', startDate, endDate, allDay )

},

eventMouseover:function(calEvent, jsEvent, view){var mydiv = document.createElement("div");

mydiv.setAttribute("id","hint");

mydiv.style.position="absolute";

mydiv.style.width="240px";

mydiv.style.display="none";

document.getElementById("timmerDlg").appendChild(mydiv);var myhint = document.getElementById("hint");

myhint.style.display= "block";

myhint.style.left= (jsEvent.clientX-90)+"px";

myhint.style.top= (jsEvent.clientY-40)+"px";

myhint.style.color="white";

$("#hint").css("z-index","99");

$("#hint").css("background-color","#B2B104");

$("#hint").css("padding-left","20px");

$("#hint").css("height","20px");

$("#hint").css("line-height","150%");

myhint.innerHTML=calEvent.title

},

eventMouseout:function(calEvent, jsEvent, view){var myhint = document.getElementById("hint");

document.getElementById("timmerDlg").removeChild(myhint);

},

dayClick:function(date, allDay, jsEvent, view){

},

buttonText:{

today:'今日',

month:'月',

day:'日'},

monthNames:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

monthNamesShort:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

dayNames:['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],

events:[]

});//因为fullCalendar的start和end的区间不包括end结束日期，所以获取到给定时间的下一天。

//获取给定时间的下一天 yyyy-MM-dd格式

functiongetNextDay(d){

d= newDate(d);

d= +d + 1000*60*60*24;

d= newDate(d);//return d;

//格式化

var yy=d.getFullYear();var mm=d.getMonth()+1;var dd=d.getDate();var nextday=yy+"-";if (mm<10){nextday+="0"}

nextday+=mm+"-";if(dd<10){nextday+="0"}

nextday+=dd;returnnextday;

}

$.ajax({

url :'/LiveManager/sg/querySgTimetableById',

data:{"sgid":id},

type :'post',

dataType:'json',

success :function(data) {var inner = "

$("#timmerDlg").html(inner);

$("#timmerDlg").dialog('open');var h = $(window).height()*0.6dt=data.lists;if(dt!=null&&dt.length>0){var content =[];for(var i=0;i

content.push(

{

title:dt[i][2],//事件的标题

start:dt[i][0],//事件开始时间

end:getNextDay(dt[i][1]),//事件结束时间

color:'red'}

);

}

$('#calendar').fullCalendar({

header: {

left:'today',

center:'prevYear prev title next nextYear',

right:'month,basicDay'},

firstDay:7,

height:h,

navLinks:true, //can click day/week names to navigate views

editable: false,

eventLimit:true, //allow "more" link when too many events

timeFormat: 'H:mm',

allDaySlot:false,

selectable:true,

selectHelper:true,

select:function( startDate, endDate, allDay, jsEvent, view){

$('#calendar').fullCalendar( 'select', startDate, endDate, allDay )

},

eventMouseover:function(calEvent, jsEvent, view){var mydiv = document.createElement("div");

mydiv.setAttribute("id","hint");

mydiv.style.position="absolute";

mydiv.style.width="240px";

mydiv.style.display="none";

document.getElementById("timmerDlg").appendChild(mydiv);var myhint = document.getElementById("hint");

myhint.style.display= "block";

myhint.style.left= (jsEvent.clientX-90)+"px";

myhint.style.top= (jsEvent.clientY-40)+"px";

myhint.style.color="white";

$("#hint").css("z-index","99");

$("#hint").css("background-color","#B2B104");

$("#hint").css("padding-left","20px");

$("#hint").css("height","20px");

$("#hint").css("line-height","150%");

myhint.innerHTML=calEvent.title

},

eventMouseout:function(calEvent, jsEvent, view){var myhint = document.getElementById("hint");

document.getElementById("timmerDlg").removeChild(myhint);

},

dayClick:function(date, allDay, jsEvent, view){

},

buttonText:{

today:'今日',

month:'月',

day:'日'},

monthNames:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

monthNamesShort:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

dayNames:['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],

events:content

});

clearSelections();

}else{

$('#calendar').fullCalendar({

header: {

left:'today',

center:'prevYear prev title next nextYear',

right:'month,basicDay'},

firstDay:7,

height:h,

navLinks:true, //can click day/week names to navigate views

editable: false,

eventLimit:true, //allow "more" link when too many events

timeFormat: 'H:mm',

allDaySlot:false,

selectable:true,

selectHelper:true,

select:function( startDate, endDate, allDay, jsEvent, view){

$('#calendar').fullCalendar( 'select', startDate, endDate, allDay )

},

eventMouseover:function(calEvent, jsEvent, view){var mydiv = document.createElement("div");

mydiv.setAttribute("id","hint");

mydiv.style.position="absolute";

mydiv.style.width="240px";

mydiv.style.display="none";

document.getElementById("timmerDlg").appendChild(mydiv);var myhint = document.getElementById("hint");

myhint.style.display= "block";

myhint.style.left= (jsEvent.clientX-90)+"px";

myhint.style.top= (jsEvent.clientY-40)+"px";

myhint.style.color="white";

$("#hint").css("z-index","99");

$("#hint").css("background-color","#B2B104");

$("#hint").css("padding-left","20px");

$("#hint").css("height","20px");

$("#hint").css("line-height","150%");

myhint.innerHTML=calEvent.title

},

eventMouseout:function(calEvent, jsEvent, view){var myhint = document.getElementById("hint");

document.getElementById("timmerDlg").removeChild(myhint);

},

dayClick:function(date, allDay, jsEvent, view){

},

buttonText:{

today:'今日',

month:'月',

day:'日'},

monthNames:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

monthNamesShort:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

dayNames:['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],

events:[]

});

clearSelections();

}

}

});

}

fullcalendar日期控件(结合mysql的java版本)
05-25
这是一个增、删、改、展示等功能完整的fullcalendar日期控件，使用java结合mysql数据库实现，而且后台使用的是最基本的servlet来实现，既方便初学者的学习也方便对此插件的改造从而加入到自己的项目中，其中还融入了日期、时间的选择器插件以及非常实用的jQuery.AsyncBox弹窗插件！
FullCalendar（日程管理控件）
weixin_30339969的博客
12-24 278
(以下是我学习FullCalendar控件时，网络上收集的一些资料) 第一部分（官方资料） jquery.fullCalendar官方网址:http://arshaw.com/fullcalendar/ jquery.fullCalendar英文文档:http://arshaw.com/fullcalendar/docs/ jqu...
用fullcalendar做的日程管理
03-27
用fullcalendar做的日程管理，有代码
使用FullCalendar做日程管理
helloworld的博客
11-06 4821
Github地址：https://github.com/fullcalendar/fullcalendar 官网地址：http://fullcalendar.io/ 由于 FullCalendar 自身是个 JQuery 插件，所以首先要引入 ： script src='jquery.min.js'>script>11 然后是 FullCalendar 的依赖（可以在FullCal
Fullcalendar--日程管理 js组件
08-13
通过Fullcalendar，你可以做出一个完全类似google日历的程序。 它使用起来不难，因为它是基于jQuery UI的，继承了简单用法的特征。
FullCalendar_农历_汉化_最新版_1.6.4_日历控件
01-23
结合FullCalendar，这样的小工具可以让开发人员更高效地构建一个完整的日历系统，无论是在企业内部还是对外服务，都能提供便捷的日程管理功能。 总的来说，FullCalendar 1.6.4的农历和汉化版本，为中文用户提供了更...
日程安排：jQuery的日历插件 FullCalendar Java MySQL.doc
06-11
总结，这个项目展示了如何将 FullCalendar 日历插件与 Java 后端和 MySQL 数据库集成，利用 Servlet 处理 HTTP 请求，返回 JSON 数据，实现日程管理功能。同时，也强调了对开源代码的尊重和正确引用的重要性。
jsp（java）版日历（日程）xgcalendar（比fullcalendar效果更好）
06-13
最近项目组要做一个日程管理，原先使用fullcalendar，后面使用xgcalendar，感觉效果更好，而且日历容易定位。 因每个java项目使用的框架不一样，所以我只提取出html，没有后台java的action、service的代码。html复制...
日程安排：jQuery的日历插件 FullCalendar Java MySQL
02-20
FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。...
基于Java Web的日程管理小实例：使用FullCalendar插件
通过上述分析，可以看出该实例是一个简单但实用的Java Web应用程序，通过结合JSP和Servlet技术以及FullCalendar插件，提供了一个基本的日程管理功能。这种结合不仅演示了如何实现Web上的日历应用，还展示了如何在...
日程管理(Java)
12-01
日程管理。自己参考写的一个。功能不是很完善，欢迎交流，一起学习改进。
Fullcalendar带日程安排的日历
11-13
FullCalendar 是一个jQuery插件，它提供一个全尺寸，像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 （如单击或拖动事件） 挂钩。
ManageSchedule:用 Java 管理日程
06-17
管理时间表 帕拉伊巴外科骨科临床标志中心 帕拉伊巴骨科诊所拥有一批骨科医生，他们的专长如下：膝、髋、踝、肩和腕。 医生交替在坎皮纳格兰德和若昂佩索阿工作，但非常有组织。 除了医生，手术前后也有物理治疗师在场，他们同样暴露于上述专业。 从 code.google.com/p/projetop22010 自动导出
Java日程demo
11-21
运用Java开发的日程管理功能！
JAVA日历（带日程安排）
07-13
JAVA日历（带日程安排），直接新建项目，将源码导入就可以使用。
Javaweb-日程管理
最新发布
小番茄没有酱的csdn
01-04 505
File -> Project Structure -> 左侧点 modules 找到 schedule-system 右侧点 Dependencies -> 点+ -> Library 选tomcat。打开navicat -> 左上角连接 -> 输入连接名 密码(mysql的密码) 保存 -> 双击左侧边栏新建的连接（绿色就是连上了）右键navicat新建的连接 -> 创建数据库 -> 字符集选择utf8mb4。然后点击新建查询 -> 输入sql语句。显示apache页面代表启动成功。
java fullcalendar,fullcalendar的简单实用
weixin_29938387的博客
03-19 260
1.Title$('#ename1').change( function(){var eid = $("#ename1 option:selected").val()var events = {url: "/appoint/selectTids",type: 'post',data: {"eid":eid}}$('#calendar').fullCalendar( 'removeEventSour...
利用FullCalendar做简单的日程管理，以及后台动态更新数据出现的问题。
WEISHENGHUAN的博客
02-12 8269
第一：总体效果。 1、初始化日历： 2、点击某一天可以添加日程： 3、点击已添加的日程可以进行修改、删除、分享： 4、点击分享，可以选择系统内的人员进行日程的分享： 5、如果是上级，可以通过日历左上角的选择，来选择查看自己下级的人员的日程安排和业绩查看：（右上角的颜色用来标识那个颜色代表谁的日程，客户信息需要打码嘻嘻） 第二：过程中出现的问题与代码实现。（代码太多了有点乱） 1、过程中出现...
fullcalendar在java/web的应用
pingchagnxin007的专栏
07-31 5836
fullcalendar做了一个日程管理总结一下用法 怕忘了 1.需要将fullcalendar插件导入项目 2.页面引入css和js文件 '> '>'>' />'media='print' />皮肤css' />3.js控制fullcalendar插件 $(document).ready(function() { //系统时间 var nowdate = new Date();
JSP实现xgcalendar日程管理效果优于fullcalendar
而xgcalendar是一种日历组件，能够与Java Web应用集成，并提供日程管理功能。fullcalendar是另一种流行的日历插件，经常用于网页中实现日程安排与管理。现在，我们开始从文件信息中提取相关知识点。 ### 知识点一：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值