将彩色事件添加到日历

时间:2017-01-18 22:28:57

标签: coldfusion fullcalendar

我有以下工作日历页面(lqCalendar.cfm),它将MySQL中的事件放到日历中。

<html>
<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>

<script> 
$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: true,
        events: "getLeaveRequests.cfc?method=getMyData",
        eventDrop: function(event, delta) {
            alert(event.title + ' was moved ' + delta + ' days\n' +
                '(should probably update your database)');
        }           
    });

});
</script> 
</head>
<body>
<div id='calendar'>
</div>
</body> 
</html>

这是我工作的CFC(getLeaveRequests.cfc)查询数据:                             

    <!--- Don't forget to VAR scope all local variables. --->
    <cfset var getEvents = "">
    <cfset var row = "">
    <cfset var result = "">

    <cfquery name="getEvents" datasource="care">
        SELECT lqID AS id, 
            lqStartDate AS myStart, 
            lqEndDate AS myEnd, 
            CONCAT(lqUser, " (",lqTotalHours,") ",    (COALESCE(lqDescription,'')),"") AS title
        FROM tblleaverequest
    </cfquery>

    <cfset result = []>
    <cfloop query="getEvents">
        <!--- start new structure. must use array notation to preserve case  of structure keys--->
        <cfset row = {}>
        <cfset eventurl ="leave_request_a01z.cfm?id=" & "id">
        <cfset row["id"] = id>
        <cfset row["title"] = title>
        <cfset row["start"] = myStart>
        <cfset row["end"] = myEnd>

        <!--- append to results --->
        <cfset arrayAppend(result, row)>
    </cfloop>

    <!--- convert to json --->
    <cfreturn serializeJSON(result)>

   <!---
    <cfreturn getEvents>
    --->
</cffunction>
</cfcomponent>

根据“lqUser”的值“着色”日历项目的最佳方法是什么? - 颜色可以动态分配,或者如果需要,我可以为每个用户的User表添加一个颜色字段,但是如何将其分配给FullCalendar?

这是我更新的CFC试图让颜色起作用:(使用Raymond Camden网站上“dwayne anderson”帖子中的代码) - 我在我的User表中添加了一个名为“category_id”的字段,然后为颜色分配了值1到9。 该页面没有错误,只是一个空白日历?

<!--- Component to get all of the Leave Request Dates and place on FullCalendar page--->
<cfcomponent>
<cfsetting showDebugOutput='No'>
<cffunction name="getMyData" output="false" access="remote" returntype="any" returnformat="JSON">
        <cfargument name="filter" type="string" required="no" default="">

<cfquery name="getallevents" datasource="care">
SELECT lqID AS id, 
                lqStartDate AS event_start_datetime, 
                lqEndDate AS event_end_datetime, 
                IF(category_id IS NULL, '1', category_id) AS color_id,
                CONCAT(lqUser, " (",lqTotalHours,") ", (COALESCE(lqDescription,'')),"") AS title
FROM      tblusers RIGHT OUTER JOIN tblleaverequest ON tblusers.username = tblleaverequest.lqUser
</cfquery>

<cfquery name="getallcolors" dbtype="query">
Select distinct color_id
from getallevents
</cfquery>

<cfset colorlist="red,green,blue,yellow,black,brown,aqua,orange,darkred">
<cfset colorpos=1>
<cfset colors = []>

<cfloop query = "getallcolors"> 
<cfset thecolor='#listgetat(colorlist,colorpos)#'>
<cfif colorpos eq listlen(colorlist)>
<cfset colorpos=0>
</cfif>
<cfset colorpos=colorpos+1> 
<cfset colors[#color_id#] = thecolor>
</cfloop>

<cfset url.returnformat="json">
<cfset results = []>
<cfloop query = "getallevents"> 
<cfset eventurl ="eventdetails.cfm?id=" & "id">
<cfset eventcolor   ="#colors[color_id]#">
<cfset s = structnew()>
<cfset s["id"] = id>
<cfset s["title"] = title>
<cfset s["start"] = getEpochTime(event_start_datetime)>
<cfset s["end"] = getEpochTime(event_end_datetime)>
<cfset s["url"] = eventurl>
<cfset s["color"] = eventcolor>
<cfset s["allDay"] = false> 
<cfset arrayappend(results, s)>
</cfloop>

<cfreturn results>
</cffunction>

<cffunction access="private" name="getEpochTime" returntype="date">
<cfargument name="thedatetime" type="date"/>
<cfif (ArrayLen(Arguments) is 0)>
<cfset thedatetime = Now() />
<cfelseif IsDate(Arguments[1])>
<cfset thedatetime=Arguments[1] />
<cfelse>
return NULL;
</cfif>
<cfreturn DateDiff("s", DateConvert("utc2Local", "January 1 1970 00:00"), thedatetime) />
</cffunction>

</cfcomponent>

2 个答案:

答案 0 :(得分:1)

  

根据“lqUser”的值“着色”日历项目的最佳方法是什么?   如果我理解正确的话,你有两个选择。

  1. 您可以在查询中设置用户的颜色,以便通过案例陈述或任何其他逻辑更容易在查询级别进行管理

  2. 您可以为特定用户或用户类型的类做div。

  3. HTH。

答案 1 :(得分:0)

搞定了!这是最后的&amp;工作CFC,包括着色日历事件。谢谢你的帮助。

<!--- Component to get all of the Leave Request Dates and place on FullCalendar page--->
<cfcomponent>
    <cfsetting showDebugOutput='No'>

    <cffunction name="getMyData" output="false" access="remote" returntype="any" returnformat="JSON">
        <cfargument name="filter" type="string" required="no" default="">

        <!--- Don't forget to VAR scope all local variables. --->
        <cfset var getEvents = "">
        <cfset var row = "">
        <cfset var result = "">
        <cfset var getallcolors = "">

        <!--- Query the Leave Requests table and get data for all employees --->
        <cfquery name="getEvents" datasource="care">
         SELECT lqID AS id, 
                lqStartDate AS myStart, 
                lqEndDate AS myEnd, 
                IF(category_id IS NULL, "", category_id) AS color_id,
                CONCAT(lqUser, " (",lqTotalHours,") ", (COALESCE(lqDescription,'')),"") AS title
         FROM      tblusers RIGHT OUTER JOIN tblleaverequest ON tblusers.username = tblleaverequest.lqUser
        </cfquery>

        <!--- Do a Query of Queries to get all of the users color values --->
        <cfquery name="getallcolors" dbtype="query">
         Select distinct color_id
         FROM getEvents
        </cfquery>

        <cfset result = []>
        <!--- Assign colors to be used by the FullCalendar variable --->
        <cfset colorlist="red,green,blue,black,gray,brown,orange,darkred,darkgreen,darkblue,darkgrey,purple,darkorange,">
        <cfset colorpos=1>
        <cfset colors = []>

        <cfloop query = "getallcolors"> 
         <cfset thecolor='#listgetat(colorlist,colorpos)#'>
         <cfif colorpos eq listlen(colorlist)>
         <cfset colorpos=0>
         </cfif>
         <cfset colorpos=colorpos+1>    
         <cfset colors[#color_id#] = thecolor>
        </cfloop>




        <cfloop query="getEvents">
            <!--- start new structure. must use array notation to preserve case of structure keys--->
            <cfset row = {}>
            <cfset eventcolor ="#colors[color_id]#">
            <cfset eventurl ="leave_request_a01z.cfm?id=" & "id">
            <cfset row["id"] = id>
            <cfset row["title"] = title>
            <cfset row["start"] = myStart>
            <cfset row["end"] = myEnd>
            <cfset row["color"] = eventcolor>
            <!--- append to results --->
            <cfset arrayAppend(result, row)>
        </cfloop>

        <!--- convert to json --->
        <cfreturn serializeJSON(result)>

       <!---
        <cfreturn getEvents>
        --->
    </cffunction>
</cfcomponent>