`
thjjava
  • 浏览: 27001 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

FullCalendar学习笔记

阅读更多
这两天发现jQuery一个很好的日历插件--fullcalendar,于是就从网上搜集了一些资料,自己写了个小demo。
1、jsp也没代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>fullcalendar test</title>
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='jquery/jquery-1.9.1.min.js'></script>
<script src='jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() { 
$('#calendar').fullCalendar({
header: { 
                left: 'prev,next today', 
                center: 'title', 
                right: 'month,basicWeek,basicDay' 
            },
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],   
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],   
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],   
            today: ["今天"], 
/* buttonText:{ 
                prev:     '上一页', 
                next:     '下一页', 
                prevYear: '去年', 
                nextYear: '明年', 
                today:    '今天', 
                month:    '月', 
                week:     '周', 
                day:      '日' 
                },  */
            editable: true,
currentTimezone: 'Asia/Beijing',
            events:"servlet/GetJsonServelt"
         });
     })
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

2、Java代码(servlet中doPost的方法)

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String returnValue ="[{\"id\":1,\"title\":\"Event1\",\"start\":\"2014-08-10\",\"url\":\"http:\\/\\/yahoo.com\\/\"},{\"id\":2,\"title\":\"Event2\",\"start\":\"2014-08-20\",\"end\":\"2014-08-22\",\"url\":\"http:\\/\\/yahoo.com\\/\"}]";
   System.out.println(returnValue);
   response.getWriter().print(returnValue);
out.flush();
out.close();
}
  • 大小: 17.5 KB
分享到:
评论

相关推荐

    FullCalendar的使用demo

    10. **学习与进阶**: 了解完基础使用后,可以进一步探索FullCalendar的高级特性,如资源管理、时间区设置、时间分割粒度调整、多日程冲突检测等。 这个"FullCalendar的使用demo"是一个很好的起点,通过它,你可以...

    fullCalendar 增加年视图版

    **全历组件fullCalendar介绍** `fullCalendar`是一款开源的JavaScript日历插件,它能够帮助开发者在网页上创建交互式、功能丰富的日程管理器。这个插件以易用性和灵活性著称,支持多种视图,如日视图、周视图、月...

    fullcalendar例子

    此外,FullCalendar还支持事件插件和自定义扩展,你可以通过这个示例学习如何利用这些特性来满足特定的业务需求。例如,集成第三方提醒服务、实现多用户协作功能等。 总的来说,FullCalendar是一款强大的日程管理...

    jquery的fullcalendar使用案例

    通过学习和掌握它的使用,开发者能够快速创建出美观且实用的交互式日历界面,提升项目的用户体验。在实际开发过程中,可以结合标签“源码”和“工具”,与其他前端框架和后端服务协同工作,实现更复杂的功能。

    fullcalendar支持农历 年历

    全历插件FullCalendar是一款广泛使用的JavaScript日历库,它为网页应用提供了强大的日程管理功能。这个插件以其灵活性和可定制性而受到开发者们的青睐。标题提及的"fullcalendar支持农历 年历"意味着它不仅限于公历...

    FullCalendar扩展双击事件

    全历组件FullCalendar是一款强大的JavaScript库,用于在网页上展示日程、事件和时间管理的交互式日历。它以其灵活性、丰富的定制选项以及对多种数据源的支持而受到开发者的欢迎。本文将深入探讨如何在FullCalendar中...

    fullcalendar-4.3.1.zip

    总的来说,"fullcalendar-4.3.1.zip"提供了完整的FullCalendar库和丰富的示例,是开发者学习和应用FullCalendar的宝贵资源,通过深入研究这个压缩包,开发者能够熟练掌握这个强大的日历库,并在实际项目中灵活运用。

    fullcalendar教程

    1. 学习曲线陡峭:FullCalendar 的配置选项较多,需要开发者花费时间学习和掌握。 2. 需要 jQuery 库:FullCalendar 基于 jQuery 库开发,需要 jQuery 库的支持。 FullCalendar 是一个功能强大且灵活的日程控件,...

    用fullcalendar做的日程管理

    本项目是利用FullCalendar实现的日程管理系统,提供了完整的代码,方便开发者参考和学习。 首先,FullCalendar的核心特性在于其强大的事件管理能力。它支持多种事件类型,如单次事件、重复事件、全天事件等,且可以...

    fullcalendar的js和css文件

    FullCalendar是一款功能强大的JavaScript日历库,用于在网页上展示事件和日程安排。它具有高度可定制性,能够轻松地与各种数据源集成,包括JSON、Google Calendar、Microsoft Exchange等。这款库的设计目的是提供一...

    fullcalendar 官网API 原文

    从给定的文件内容中,我们可以提取出关于FullCalendar的几个关键知识点,以下是详细说明: ...对于想要深入学习如何显示事件、自定义日历头部和其他高级功能的开发者,FullCalendar的官方文档将是一个宝贵的学习资源。

    fullcalendar改造后插件

    全历日程插件改造详解:融入农历与工作时间设定 FullCalendar是一款广泛使用的JavaScript日程管理库,它提供了一种优雅的方式来展示和管理事件。...通过不断学习和创新,我们可以让技术更好地服务于我们的生活。

    FullCalendar应用——增删改数据操作

    2. 初始化FullCalendar:在JavaScript代码中,创建一个`$('#calendar')`的选择器,调用`fullCalendar()`函数进行初始化。在此过程中,可以设置各种配置项,如初始日期、默认视图、时间格式等。 **二、数据交互** ...

    fullcalendar-1.6.4 中文版

    **全历插件 FullCalendar 1.6.4 中文版** FullCalendar 是一个非常流行的JavaScript库,专门用于创建交互式、响应式的日历视图。这个1.6.4版本是针对中文用户的一个优化版本,它包含了丰富的文档、JS依赖包以及多个...

    fullcalendar2.0中文汉化版

    全历(FullCalendar)是一款非常流行的JavaScript日历插件,主要用在Web应用程序中,用于展示和管理事件日程。2.0版本是其一个重要里程碑,引入了诸多新特性和改进,同时也支持了中文汉化,使得国内用户使用起来更加...

    fullCalendar实例及Api

    在IT领域,特别是在网页开发中,日程管理是一个常见的需求,而fullCalendar是一款功能强大的JavaScript库,专门用于创建交互式的、可自定义的日历视图。这个库提供了丰富的API,允许开发者根据项目需求进行高度定制...

    前端日历插件fullcalendar

    **全栈前端开发中的日历插件:FullCalendar** 在Web开发中,日历插件是一种常见的组件,用于展示和管理日期相关的事件。FullCalendar是一款功能强大的JavaScript库,专为前端开发者设计,它能帮助创建交互式的、...

    fullcalendar_lunar+农历实例

    总结来说,"fullcalendar_lunar+农历实例"是一个展示如何在FullCalendar中集成农历显示的实践案例,通过学习这个实例,开发者可以了解到如何在自己的项目中实现类似功能,提高用户体验,尤其是对于需要农历信息的...

    JS日程管理插件FullCalendar简单实例

    首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...

    fullcalendar 日历 控件 知识点集合

    fullcalendar 日历控件知识点集合 以下是对 fullcalendar 日历控件的详细知识点的总结和概览: 基本语法 fullcalendar 的基本语法可以分为两种:一种是利用 fullcalendar 提供的方法来进行字符串和日期间的转换,...

Global site tag (gtag.js) - Google Analytics