jQuery fullcalendar带有冷灌注

Question

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

我有点像从哪里开始。我有WBSITE http://arshaw.com/fullcalendar/download/的FullCalendar代码。我需要将来自ColdFusion查询的事件添加到日历中。我以前从未使用过jQuery或json，也找不到任何文档。因此，请指导我开始。预先感谢您。

Answer 1

i从数据库导入事件也有同样的问题。但是我终于找到了解决方案。它基于Raymond Camden的FullCalendar插件，但不如他的插件那么复杂。您可以在此处找到原始插件http://www.raymondcamden.com/2011/6/17/fullcalendar-jquery-jquery-plugin

在此版本中，您必须添加一个额外的脚本以及FullCalendar所需的休息脚本。将其写入您想要日历的页面。然后调用存储在CFC页面中的CFCOMPONEN（Mine位于组件中的文件夹中，称为calendarevents.cfc）。CFC用于从数据库中获取数据，并将其转换为FullCalendar事件所需的数组格式。

首先在CFM页面中调用日历

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

以及FullCalendar所需的其余JavaScript导入，添加此脚本。全面呼叫后写。

$(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;
    }
}

我希望这对某人有帮助。

Answer 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 TIMESTAMP）。