Jquery完整日历问题 - 关于一组事件的颜色&多个事件来源

时间:2011-04-08 22:02:47

标签: jquery jquery-plugins fullcalendar

我正在查看jquery完整的日历1.5并且有几个问题。

多个来源怎么样?

jQuery $.ajax options

You can also specify any of the jQuery $.ajax options within the same object! This allows you to easily pass additional parameters to your feed script, as well as listen to ajax callbacks:

    $('#calendar').fullCalendar({

        eventSources: [

            // your event source
            {
                url: '/myfeed.php',
                type: 'POST',
                data: {
                    custom_param1: 'something',
                    custom_param2: 'somethingelse'
                }
                error: function() {
                    alert('there was an error while fetching events!');
                },
                color: 'yellow',   // a non-ajax option
                textColor: 'black' // a non-ajax option
            }

            // any other sources...

        ]

    });

来自:http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

您是否只是放一个逗号,然后基本上复制第一个?

我的第二个问题是。我将有一个事件源(因为它们都来自同一个来源)但我会在那里有一组事件,每个组都需要不同的颜色。

所以我可以拥有这个

Item 1 - group 1 (color red)
Item 2 - group 1 (color red)
Item 3 - group 2  (color green)
Item 4 - group 3 (color black)

现在这些颜色是由用户设置的,所以我永远不会知道一个颜色组。一个用户可能将其设置为红色,可能将其设置为蓝色。

所以我认为我需要为每个事件发送颜色。因此,第1项将具有与之关联的颜色,而第2项将具有关联的颜色等。

怎么会这样?我想,一旦我把事件发回来,我需要做点什么。我只是不确定是什么。

由于

4 个答案:

答案 0 :(得分:11)

要处理多个来源,你是对的,只需在eventSources数组中添加更多:

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            url: '/myfeed.php',
            type: 'POST',
            data: {
                custom_param1: 'something',
                custom_param2: 'somethingelse'
            }
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        },

        // your second event source
        {
            url: '/myfeed.php',
            type: 'POST',
            data: {
                custom_param3: 'somethingelseelse',
                custom_param4: 'somethingelseelseelse'
            }
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'red',   // a non-ajax option
            textColor: 'white' // a non-ajax option
        }

        // any other sources...

    ]

});

对于多个组的不同颜色,fullCalendar仅允许每个事件源使用一种颜色。因此,您必须为每个组添加一个源到eventSource。至于让用户自定义颜色,使用上面的例子,你可以这样:

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            url: '/myfeed.php',
            type: 'POST',
            data: {
                custom_param1: 'something',
                custom_param2: 'somethingelse'
            }
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: settings.customBackgroundColors(userId, groupX),   // a non-ajax option
            textColor: settings.customTextColors(userId, groupX) // a non-ajax option
        },

        // your second event source
        {
            url: '/myfeed.php',
            type: 'POST',
            data: {
                custom_param3: 'somethingelseelse',
                custom_param4: 'somethingelseelseelse'
            }
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: settings.customBackgroundColors(userId, groupY),   // a non-ajax option
            textColor: settings.customTextColors(userId, groupY) // a non-ajax option
        }

        // any other sources...

    ]

});

<小时/> 的修改

如果您希望json供稿中的每个事件的个别属性(如单个颜色)执行此类操作。

public int id { get; set; }
public string title { get; set; }
public bool allDay { get; set; }
public string start { get; set; }
public string end { get; set; }
public string color { get; set; }
public string textColor { get; set; }

用您想要的颜色填充字符串,然后将每个事件的内容集合起来,然后将其发送回json结果,每个任务都应该使用您在color属性中设置的任何内容。

答案 1 :(得分:3)

我做的是:

$color = '#000';

if($i == even){
  $color = '#fff';
}

{

"title": "your title",
"start": date('Y m d'),
"end": date('Y m d', strtotime("+1 day")),
"color": $color

}

它有效......不需要复杂的代码!!

答案 2 :(得分:0)

我知道你已经就此进行过相当多的谈话,但我想我会抛出一个建议。

如果您有一组用户可以选择的预定义颜色,您可以设置预定义的CSS类,然后只使用fullcalendar的className属性。

在我的日历上,如果他们将来或已经过去并且过去的事件使用此CSS,我基本上会为事件着色。

.fc-event,
.fc-agenda .past .fc-event-time,
.past a {
    background-color: green;
    boarder-color: green;
    color: white;
 }

其中.past指的是我的className

然后,当我在jsp中编译我的JSON时,它看起来像这样。

{
    "title": "<%=e.getName()%>",
    "start": "<%=startString %>",
    "end": "<%=endString%>",
    "allDay": false
    <%if(e.isFinished()){%>,"className": "past"<%}%> 
}

我尝试过使用颜色选项等等,但这种方法最适合我。

答案 3 :(得分:0)

我设置不同颜色的方法是从我的源生成的json返回的事件对象中获取。在事件中我提出了这样的事情:

 events: function(start, end, callback) {
    $.ajax({
        url: GlobalAjax.ajaxurl+'calendar/events',
        data: {
            // our hypothetical feed requires UNIX timestamps
            start: Math.round(start.getTime() / 1000),
            end: Math.round(end.getTime() / 1000)
        },
        success: function(doc) {
            var events = [];
            $(doc).each(function() {
                events.push({
                    title: $(this).attr('title'),
                    start: $(this).attr('start'), // will be parsed
                    end: $(this).attr('end'), // will be parsed
                    color: $(this).attr('color') // will be parsed
                });
            });
            callback(events);
        }
    });

它像魅力一样