`
957803796_1
  • 浏览: 124053 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

关于fullcalendar里显示json格式的events(java)

 
阅读更多

fullcalendar 的帮助文档 可见地址:http://arshaw.com/fullcalendar/docs/

jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排

Event Data

里有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;
    }


分享到:
评论

相关推荐

    fullCalendar实例及Api

    4. **日期格式**:`dateFormat`和`timeFormat`可以定制日期和时间的显示格式。 5. **事件渲染**:`eventRender`回调函数允许你自定义事件的渲染方式。 此外,fullCalendar还提供了事件处理方法,例如: - `...

    PHP+Mysql+FullCalendar日历拖动与数据保存

    此外,FullCalendar还支持JSON格式的数据源,使得从服务器获取或更新事件变得简单。 **JSON**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本...

    fullcalendar-2.7.3带中国节日节气

    FullCalendar支持多种方式提供事件数据,如JSON格式的服务器数据、静态JSON文件,甚至可以是JavaScript数组。在中国节日和节气的场景下,这些事件数据可能已经内置了中国的节日信息,开发者无需额外处理。 5. **...

    日程安排:jQuery的日历插件 FullCalendar Java MySQL.doc

    3. **Java 和 MySQL 集成**:在描述中提到的项目中,FullCalendar 与 Java 后端和 MySQL 数据库进行了集成。Java 用于处理服务器端逻辑,包括数据的读取、处理和返回。MySQL 则作为数据库存储日程事件的数据。 4. *...

    fullcalendar改造后插件

    我们可以创建一个JSON数据结构,列出一年中的所有节假日,并在初始化FullCalendar时加载这些数据。然后,通过比较当前日期与节假日列表,我们可以为节假日添加特定的样式或标记。例如,使用`.fc-holiday`类来高亮...

    fullcalendar支持农历 年历

    5. **数据源集成**:FullCalendar可以与各种数据源集成,如Google Calendar、JSON、数据库等,方便数据的获取和更新。 6. **互动性**:用户可以通过拖放操作调整事件的时间和日期,增强了交互体验。 针对“农历...

    fullcalendar日程组件

    FullCalendar可以接收JSON格式的数据源,这使得它能轻松地与后端API或本地数据进行交互。例如,你可以通过`events`属性设置数据源: ```javascript data() { return { events: [ { title: '会议', start: '...

    Vue中使用Fullcalendar日历开发日程安排代码完整版 (项目示例)

    在Vue.js应用中,FullCalendar是一个非常流行的开源库,用于创建功能丰富的日历组件,能够显示事件、进行日程管理。这个项目示例提供了一种方法来集成FullCalendar到Vue项目中,帮助开发者构建出交互性强的日程安排...

    日程安排:jQuery的日历插件 FullCalendar Java MySQL

    FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。...

    改造之后的fullCalendar(改事件背景、标题自定义、无星期、左右按钮)

    通过对原版fullCalendar进行改造,我们可以实现更加个性化的功能,如改变事件背景色、自定义事件标题、去除星期显示以及调整导航按钮等。下面,我们将深入探讨这些改造的技术细节。 一、事件背景色自定义 在...

    fullcalendar利用html显示出来而且是最新的3.2.0

    events: '/path/to/events.json', // 事件数据源,可以是JSON文件或API接口 eventColor: '#378006' // 事件颜色 }); ``` 5. **事件数据源**:FullCalendar可以通过多种方式获取事件数据,包括静态JSON文件、...

    fullCalendar 制作的仿谷歌日历demo java oracle

    开发者通过JavaScript调用FullCalendar的API来实现日历的显示、事件处理等功能。例如,使用`eventSources`属性加载事件数据,`eventRender`回调函数定制事件的渲染,以及`eventClick`等事件监听器处理用户与日历的...

    jQuery.FullCalendar相关文档

    - **JSON格式**:可以通过`events`选项提供JSON格式的数据,包括`title`(事件标题)、`start`(开始时间)、`end`(结束时间)等字段。 - **函数回调**:也可以提供一个函数,该函数会为FullCalendar动态生成事件...

    FullCalendar的使用demo

    你可以通过`events`属性指定数据源,它可以是JSON URL、数组或者回调函数。例如,从服务器获取数据并动态加载到全历中。 8. **样式自定义**: 为了使FullCalendar符合你的网站设计,可以使用CSS来调整其样式。...

    fullCalendar 增加年视图版

    2. `fullcalendar.css`:用于显示日历样式的CSS文件。 3. `yearview.js`或类似的文件:扩展`fullCalendar`以支持年视图的JavaScript代码。 4. `example.html`或其他示例文件:演示如何在实际项目中使用年视图的代码...

    fullcalendar-4.1.0.zip

    其次,FullCalendar支持通过JSON格式的数据源来动态加载事件。这意味着你可以将数据库中的事件信息与日历组件无缝连接,实现数据的实时更新。例如,可以结合后端API,将用户的预约、会议或其他日程活动实时显示在...

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

    1. `event.php`:通常用于提供初始的事件数据,通过查询数据库生成JSON格式的事件列表,返回给FullCalendar展示。 2. `do.php`:处理添加、编辑和删除事件的逻辑。当用户在日历上进行操作时,FullCalendar会发送...

    fullcalendar日历控件

    1. **多视图显示**:fullcalendar提供了日、周、月、年等多种视图,用户可以根据需要快速切换,查看不同时间范围的日程。 2. **动态加载**:支持按需加载数据,减少初始页面加载负担,提高用户体验。 3. **事件...

    fullcalendar日历插件C#实例

    1. **事件源**:在FullCalendar的初始化配置中,`events`属性可以是一个URL,FullCalendar会自动向这个URL发送请求,获取JSON格式的事件数据。 2. **数据格式**:返回的JSON数据应遵循FullCalendar的事件数据结构,...

    jquery的fullcalendar使用案例

    `events`属性用于定义日历中的事件数据,可以是静态数组,也可以是动态加载的JSON数据。 FullCalendar的可定制性极强,可以通过设置各种选项来自定义日历的外观和行为。比如,可以改变默认的日期格式、颜色主题,...

Global site tag (gtag.js) - Google Analytics