JQuery Full Calendar Вопросы - Цвет группы событий и нескольких источников событий - PullRequest
4 голосов
/ 09 апреля 2011

Я смотрю полный календарь 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 ]

11 голосов
/ 20 апреля 2011

Чтобы справиться с несколькими источниками, вы правы, просто добавьте больше в массив 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.

3 голосов
/ 08 августа 2011

что я сделал:

$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

}

и это работает .... не нужно сложных кодов !!

0 голосов
/ 02 апреля 2012

То, что я делаю, чтобы установить разные цвета, это получить из объекта события, возвращенного из 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);
        }
    });

Это работает как шарм

0 голосов
/ 22 апреля 2011

Я знаю, что вы уже говорили об этом, но я решил выбросить предложение.

Если у вас есть предопределенный набор цветов, из которых пользователь может выбирать, вы можете настроить предопределенныйКлассы CSS, а затем просто используйте свойство className fullcalendar.

В моем календаре я в основном окрашиваю события, если они либо в будущем, либо уже в прошлом, а прошлые события используют этот CSS.

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

где .past относится к моему className.

Затем, когда я компилирую свой JSON в jsp, это выглядит так:

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

Я пытался игратьс вариантами цвета и так далее, но этот метод работал лучше всего для меня.

...