带有coldfusion的jquery fullcalendar答案

【问题标题】：jquery fullcalendar with coldfusion带有coldfusion的jquery fullcalendar
【发布时间】：2014-03-13 17:44:49
【问题描述】：

我正在尝试将事件日历添加到我的 Coldfusion 应用程序中。我想为此使用 jquery fullcalendar 插件。我做了一些研究，我知道我需要编写一个必须以 json 格式返回数据（事件）的 CFC。

我有点不知道从哪里开始。我有来自 wbsite http://arshaw.com/fullcalendar/download/ 的完整日历代码。我需要将来自coldfusion查询的事件添加到日历中。我以前从未使用过 jquery 或 json，也找不到任何文档。所以，请指导我开始。提前谢谢你。

【问题讨论】：

你试过什么？你能显示一些代码吗？你尝试了什么？你甚至用谷歌搜索过任何东西吗？当我用谷歌搜索 JQUERY COLDFUSION 时，这是我得到的第一页 ja.mesbrown.com/2009/10/…

标签： jquery json coldfusion

【解决方案1】：

我在从数据库中导入事件时遇到了同样的问题。但我终于找到了解决办法。它基于 Raymond Camden 的 fullCalendar 插件，但不如他的插件复杂。你可以在这里找到原始插件http://www.raymondcamden.com/2011/6/17/FullCalendar-jQuery-Plugin

在此版本中，您必须添加一个额外的脚本以及完整日历所需的其余脚本。将其写在您想要日历的页面中。然后调用存储在 cfc 页面中的 cfcomponent（我的位于 components 文件夹内，名为 calendarEvents.cfc）。 cfc 用于从数据库中获取数据并将其转换为全日历事件所需的数组格式。

先在cfm页面调用日历

<div class="block">
    <div class="navbar navbar-inner block-header"></div>
    <div class="span10">
        <div id='calendar'></div>
    </div>
</div>

与 fullcalendar 所需的其余 javascript 导入一起，添加此脚本。在 fullcalendar 调用后写入。

$(document).ready(function() {
    $("#calendar").fullCalendar({
        //Formating
        header: {
            right: 'prev,next today',
            left: 'title',
            center: 'month,agendaWeek,agendaDay'
        },
        titleFormat: {
            month: 'MMMM yyyy',
            week: 'MMMM d[ yyyy] - {[ MMM] d, yyyy}',
            day: 'dddd, MMMM dd, yyyy'
        },
        columnFormat: {
            month: 'dddd',
            week: 'dddd <br> MM/dd',
            day: 'dddd, MMMM dd, yyyy'
        },
        timeFormat: {
            '': 'H(:mm) TT \n '
        },
        //Click function to switch to daily agenda
        dayClick: function(date, view) {
            $('#calendar')
            .fullCalendar('changeView', 'agendaDay')
            .fullCalendar('gotoDate', date);
        },
        //Data Feed
        events:'components/projectManagerEvents.cfc?method=getEvents&returnformat=json',
        editable: false,
        weekMode:'variable',
        ignoreTimezone:false        
    });
});

现在是 cfc 页面。

component {
    url.returnformat="json";
    remote function getEvents()
    {
        var q=new query();
        q.setDatasource("bugTracking"); 
        q.setSQL("select projectName, estimatedEndDate from projects");
        var dbresults=q.execute().getResult();
        var results=[];
        for(var i=1;i<= dbresults.recordCount;i++)
        {
            arrayAppend(results,{
                "title"=dbresults.projectName[i],
                "start"=dbresults.estimatedEndDate[i]
            });
        }
        return results;
    }
}

我希望这对某人有所帮助。

【讨论】：

【解决方案2】：

http://arshaw.com/fullcalendar/docs/

<script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        aspectRatio: 1.45,
        weekMode: 'variable',
        editable: false,
        header: {
            right: 'today basicWeek month prev,next'
        },
        eventSources: [
            { color: 'green', url: '/webservice.cfc?method=myMethod&Parameters=Maybe' },
            { url: '/anotherwebservice.cfc?method=myOtherMethod' }
        ], // eventSources
        eventClick: function(calEvent, jsEvent, view) {

        }, // eventClick
            eventMouseover: function( event, JsEvent, view ) {

        }, // eventMouseover
        eventRender: function( event, element ) {

            } // eventRender
    }); // $#calendar.fullCalendar      
}); // ready
</script>

让您的 Web 服务 CFC 以 JSON 格式返回，事件对象必须包含标题和开始日期（UNIX 时间戳）。

【讨论】：