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