fullcalendar 的帮助文档 可见地址:http://arshaw.com/fullcalendar/docs/
jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排
里有3种显示events的方式
1 events (as an array) 这种课见帮助
2 events (as a json feed) 此时
$('#calendar').fullCalendar({
events: {
url: '<%=request.getContextPath()%>/displayAction.do?method=testJson' //你的controller的地址
type: 'POST',
error: function() {
alert('there was an error while fetching events!');
},
color:'yellow',// 背景色
textColor:'black'// 文字颜色
}
});
java代码
public ModelAndView testJson(HttpServletRequest request, HttpServletResponse response) {
String strvalue = "[{\"id\":111,\"title\":\"Event1\",\"start\":\"2012-03-10\",\"url\":\"http:\\/\\/yahoo.com\\/\"},{\"id\":222,\"title\":\"Event2\",\"start\":\"2012-03-20\",\"end\":\"2012-03-22\",\"url\":\"http:\\/\\/yahoo.com\\/\"}]";
response.setCharacterEncoding("UTF-8");
System.out.println("strvalue="+strvalue);
try {
response.getWriter().print(strvalue);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
3 events (as a function)
$('#calendar').fullCalendar({
events:function(start, end, callback) {
$.ajax({
url:"<%=request.getContextPath()%>/displayAction.do?method=getTitle",
cache:false,
success:function(doc) {
eval("var j=" + doc);
var events = [];
var info = j.eventinfo;
for (var i = 0; i < info.length; i++) {
var ev = info[i];
var title = ev.title;
var evtstart = new Date(Date.parse(ev.start));
var evtend = new Date(Date.parse(ev.end));
events.push({
title:title,
start:evtstart,
end:evtend,
id:1
});
}
callback(events);
},
error:function() {
alert('sdf')
}
})
}
})
java代码
public ModelAndView getTitle(HttpServletRequest request, HttpServletResponse response) {
String strvalue = "{ 'eventinfo':[{day: '3/3/2012',eventtitle:'test1'},{day: '3/8/2012',eventtitle:'test2'} ]} ";
response.setCharacterEncoding("UTF-8");
System.out.println("strvalue="+strvalue);
try {
response.getWriter().print(strvalue);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
分享到:
相关推荐
4. **日期格式**:`dateFormat`和`timeFormat`可以定制日期和时间的显示格式。 5. **事件渲染**:`eventRender`回调函数允许你自定义事件的渲染方式。 此外,fullCalendar还提供了事件处理方法,例如: - `...
此外,FullCalendar还支持JSON格式的数据源,使得从服务器获取或更新事件变得简单。 **JSON**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本...
FullCalendar支持多种方式提供事件数据,如JSON格式的服务器数据、静态JSON文件,甚至可以是JavaScript数组。在中国节日和节气的场景下,这些事件数据可能已经内置了中国的节日信息,开发者无需额外处理。 5. **...
3. **Java 和 MySQL 集成**:在描述中提到的项目中,FullCalendar 与 Java 后端和 MySQL 数据库进行了集成。Java 用于处理服务器端逻辑,包括数据的读取、处理和返回。MySQL 则作为数据库存储日程事件的数据。 4. *...
我们可以创建一个JSON数据结构,列出一年中的所有节假日,并在初始化FullCalendar时加载这些数据。然后,通过比较当前日期与节假日列表,我们可以为节假日添加特定的样式或标记。例如,使用`.fc-holiday`类来高亮...
5. **数据源集成**:FullCalendar可以与各种数据源集成,如Google Calendar、JSON、数据库等,方便数据的获取和更新。 6. **互动性**:用户可以通过拖放操作调整事件的时间和日期,增强了交互体验。 针对“农历...
FullCalendar可以接收JSON格式的数据源,这使得它能轻松地与后端API或本地数据进行交互。例如,你可以通过`events`属性设置数据源: ```javascript data() { return { events: [ { title: '会议', start: '...
在Vue.js应用中,FullCalendar是一个非常流行的开源库,用于创建功能丰富的日历组件,能够显示事件、进行日程管理。这个项目示例提供了一种方法来集成FullCalendar到Vue项目中,帮助开发者构建出交互性强的日程安排...
FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。...
通过对原版fullCalendar进行改造,我们可以实现更加个性化的功能,如改变事件背景色、自定义事件标题、去除星期显示以及调整导航按钮等。下面,我们将深入探讨这些改造的技术细节。 一、事件背景色自定义 在...
events: '/path/to/events.json', // 事件数据源,可以是JSON文件或API接口 eventColor: '#378006' // 事件颜色 }); ``` 5. **事件数据源**:FullCalendar可以通过多种方式获取事件数据,包括静态JSON文件、...
开发者通过JavaScript调用FullCalendar的API来实现日历的显示、事件处理等功能。例如,使用`eventSources`属性加载事件数据,`eventRender`回调函数定制事件的渲染,以及`eventClick`等事件监听器处理用户与日历的...
- **JSON格式**:可以通过`events`选项提供JSON格式的数据,包括`title`(事件标题)、`start`(开始时间)、`end`(结束时间)等字段。 - **函数回调**:也可以提供一个函数,该函数会为FullCalendar动态生成事件...
你可以通过`events`属性指定数据源,它可以是JSON URL、数组或者回调函数。例如,从服务器获取数据并动态加载到全历中。 8. **样式自定义**: 为了使FullCalendar符合你的网站设计,可以使用CSS来调整其样式。...
2. `fullcalendar.css`:用于显示日历样式的CSS文件。 3. `yearview.js`或类似的文件:扩展`fullCalendar`以支持年视图的JavaScript代码。 4. `example.html`或其他示例文件:演示如何在实际项目中使用年视图的代码...
其次,FullCalendar支持通过JSON格式的数据源来动态加载事件。这意味着你可以将数据库中的事件信息与日历组件无缝连接,实现数据的实时更新。例如,可以结合后端API,将用户的预约、会议或其他日程活动实时显示在...
1. `event.php`:通常用于提供初始的事件数据,通过查询数据库生成JSON格式的事件列表,返回给FullCalendar展示。 2. `do.php`:处理添加、编辑和删除事件的逻辑。当用户在日历上进行操作时,FullCalendar会发送...
1. **多视图显示**:fullcalendar提供了日、周、月、年等多种视图,用户可以根据需要快速切换,查看不同时间范围的日程。 2. **动态加载**:支持按需加载数据,减少初始页面加载负担,提高用户体验。 3. **事件...
1. **事件源**:在FullCalendar的初始化配置中,`events`属性可以是一个URL,FullCalendar会自动向这个URL发送请求,获取JSON格式的事件数据。 2. **数据格式**:返回的JSON数据应遵循FullCalendar的事件数据结构,...
`events`属性用于定义日历中的事件数据,可以是静态数组,也可以是动态加载的JSON数据。 FullCalendar的可定制性极强,可以通过设置各种选项来自定义日历的外观和行为。比如,可以改变默认的日期格式、颜色主题,...