Question

有没有办法为具有特定于不同Google日历的事件的天数设置背景颜色？即：我希望所有日历中日历1的事件都有蓝色背景，所有日期都有来自日历2的事件有绿色背景。我知道如何一起更改所有事件的背景颜色，但不知道如何通过Google日历分隔它们。我目前使用qTip2和Fullcalendar进行设置：

jQuery(document).ready(function(c){
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var tooltip = $('<div/>').qtip({
    id: 'fullcalendar',
    prerender: true,
    content: {
        text: ' ',
        title: ' ',
        button: true
    },
    events: {
        render: function(event, api) {
            var elem = api.elements.bgiframe;
        }
    },
    position: {
        my: 'bottom center',
        at: 'top center',
        target: 'event',
        viewport: $(window),
        adjust: {
            mouse: false,
            scroll: true,
            method: 'shift',
            resize: true
        }
    },
    show: {
        modal: {
            on: false,
            blur: true,
            stealfocus: false
            }
        },
    hide: false, 
    style: {
        classes: 'qtip-bootstrap qtip-shadow qtip-contact',
        border: {
            radius: 2
        }
    }
}).qtip('api');

$('#fullcalendar').fullCalendar({

    eventSources: ["https://www.google.com/calendar/feeds/emailaddress1%40gmail.com/public/basic",
        "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"],

    header: {
        left: 'title',
        center: '',
        right: 'today prev,next'
    },

    selectable: true,
    eventClick: function(data, event, view) {
        var title = '<h5 style="margin:0;padding:0;">'+data.title+'</h5>'; 
        var content = '<p style="margin:0;padding:2px;"><b>Start:</b> '+data.start+'<br />' + 
            (data.end && '<p style="margin:0;padding:2px;"><b>End:</b> '+data.end+'</p>' || '');

        tooltip.set({
            'content.title': title,
            'content.text': content
        })
        .reposition(event).show(event);
    },
    dayClick: function() { tooltip.hide() },

    eventResizeStart: true,
    eventDragStart: false,
    viewDisplay: function() { tooltip.hide() }

});
}());

Answer 1

解决了它。

的Javascript：

eventSources: [{
    url:"https://www.google.com/calendar/feeds/email_address%40gmail.com/public/basic",
    className: 'organizationevents'
    },
    {
    url:"http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
    className: 'holidaysevents'
    }]

CSS：

/*  Colors for events  */
.organizationevents {background:#15BAD3;color:#fff;}
.holidaysevents {background:#9D25F8;color:#fff;}

Answer 2

根据我的经验，我没有使用Google Feed，但我认为您可以在之前获取事件，服务器端应用程序，将Feed分成不同的Feed，然后使用它：

var mygooglefeeds = {
                    googlefeedcolorblack: {            
                         url:urltogooglefeedserverside,
                         type: 'POST',                              
                         data:{'googlefeedflag':'black'}, //you don´t actually need this but, you could wrap this multifeed array in a function and use this flag to get the different feed using the same function, your choice, just ignore this line. 
                         cache: false,              
                         color: '#000000', // Its here that you manage the color for this specific events
                         textColor: 'white'//and text color                            
                                        },
                  googlefeedcoloryellow: {            
                     url:urltogooglefeedserverside,
                     type: 'POST',                              
                     data:{'googlefeedflag':'yellow'}, //you don´t actually need this but, you could wrap this multifeed array in a function and use this flag to get the different feed using the same function, your choice, just ignore this line. 
                     cache: false,              
                     color: 'yellow', // Its here that you manage the color for this specific events
                     textColor: 'white'//and text color                            
                                    }  

 }

然后使用

 ...
 eventSources: [mygooglefeeds.mygooglefeedsblack,mygooglefeeds.mygooglefeedsyellow],
 ...

您将获得每种类型事件的不同颜色。

为每个链接的日历设置单独的背景颜色

2 个答案: