Jquery Full Calendar Questions - Color on group of events & multiple event sources

Question

I am looking at jquery full calendar 1.5 and have a couple questions.

How would multiple source look like?

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...

        ]

    });

from: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Would you just put a comma and then copy basically the first one?

My second question is. I am going to have one event source(since they all come from the same source) but I will have groups of events in there and each group needs a different color.

So I could have this

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

Now these colors are set by the user so I will never know what color group one will be. One user might set it red one might set it blue.

So I thinking that I need to send the color with each event. So Item 1 would have a color associated with it and Item 2 would have a color associated and etc.

How would do this? I am thinking I need to do something once I get the events back. I am just not sure what.

Thanks

Answer 1

To handle multiple sources, you're right, just add more to the eventSources array:

$('#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...

    ]

});

As far as different colors for multiple groups, fullCalendar only allows one color per event source. So you'll have to add one source to eventSource for each group you have. And as far as letting the user customize their colors, using the example above, you can have something like this:

$('#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...

    ]

});

---

Edit

If you want individual properties for each of your events from a json feed like a individual color do something like this.

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

fill in the string with the color you want make a collection of what I have for each event and then send it back a a json result and each task should use whatever you set in the color property.

Answer 2

what i did was:

$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

}

and it works.... no need of complicated codes!!

Answer 3

I know you've had quite the conversation about this already but I figured I'd throw out a suggestion.

If you have a predefined set of colors that the user can choose from you could setup predefined CSS classes and then just use the className property of fullcalendar.

On my calendar I basically color events if they're either in the future or already past and the past events use this css.

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

where .past refers to my className.

Then when I'm compiling my JSON in a jsp it looks like this.

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

I tried playing with the color options and whatnot but this method worked best for me.

Answer 4

What I do to set different colors is get from event object returned from the json generated by my source. In the events i put something like this:

 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);
        }
    });

It works like charm