Calendar color codes - Same list - Jquery

I'm working on my first SharePoint project and I have patched together this code referencing a few different blogs.
There are two different actions here:
Calendar color coding using the same list, based on div titles.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push('colorCalendarEventLinkIntercept')
function colorCalendarEventLinkIntercept()
if (SP.UI.ApplicationPages.CalendarNotify.$4a)
var OldCalendarNotify =
SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
OldCalendarNotify();
colorCalendarEventLinks();
if (SP.UI.ApplicationPages.CalendarNotify.$4b)
var OldCalendarNotify =
SP.UI.ApplicationPages.CalendarNotify.$4b;
SP.UI.ApplicationPages.CalendarNotify.$4b = function ()
OldCalendarNotify();
colorCalendarEventLinks();
function colorCalendarEventLinks()
$('div.ms-acal-item[title*="Alberta -"]').css('background-color', '#FF0000');
$('div.ms-acal-item[title*="Vacation -"]').css('background-color', '#FF0000');
$('div.ms-acal-item[title*="Acreage -"]').css('background-color', '#FF0000');
$('div.ms-acal-item[title*="British Columbia -"]').css('background-color', '#0000FF');
$('div.ms-acal-item[title*="Courses -"]').css('background-color', '#0000FF');
$('div.ms-acal-item[title*="Expiry -"]').css('background-color', '#0000FF');
$('div.ms-acal-item[title*="Manitoba -"]').css('background-color', '#228B22');
$('div.ms-acal-item[title*="Rental -"]').css('background-color', '#228B22');
$('div.ms-acal-item[title*="Saskatchewan -"]').css('background-color', '#A9A9A9');
$('div.ms-acal-item[title*="Conversion -"]').css('background-color', '#A9A9A9');
</script>
Modal popups for the separate calendars and views.
<script type="text/javascript">
function showModal(title, url)
var options = SP.UI.$create_DialogOptions();
options.title = title;
options.width = 1100;
options.height = 600;
//autosize=true;
options.url = url;
SP.UI.ModalDialog.showModalDialog(options);
</script>
This is a snippet of how i reference the modals
<table>
<tr>
<th>
<a href="#" onclick="javascript:showModal('Land Sales', '/matt/Land/Lists/LandSales/calendar.aspx');">Land Sales</a>
</th>
<th>
<a href="#" onclick="javascript:showModal('Events', '/matt/Land/Lists/Events/calendar.aspx');">Events</a>
</th>
<th>
<a href="#" onclick="javascript:showModal('Obligations', '/matt/Land/Lists/Obligations/calendar.aspx');">Obligations</a>
</th>
</tr>
It works for the most part except for two things:
One it loses the formatting when you expand a day with more then 3 events. This isn’t that big of a problem the client accepted that it would take
a while to code and we decided we would spend time elsewhere on the site.
Now for the real problem
It applies the colors to the primary calendar (Obligations) that displays on the page.
It only applies the colors to
Land Sales in the modal windows, none of the others. (Including
Obligations)
All of the titles look similar to this:
<div title="1/23/2013 - 6/6/2013 Rental - Rental Due Date" class="ms-acal-item" style="...
At this point I have stared at it for a while and can't find the issue.
Any help would be appreciated
Matt

Hey guys, I thought I would update the situation. I was something simple, I neglected to put the JQuery/JScript on the View I linked in the modal pop up.
I also ended up using removeClass + addClass to change the color of the event text to improve the visiablity.
Here is my working code.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
.cal-text A:Link {
text-align: center;
color: #FFFFFF !important;
.cal-text {
text-align: center;
color: #FFFFFF !important;
</style>
<head>
<script type="text/javascript">
function colorCalendarEventLinkIntercept()
if (SP.UI.ApplicationPages.CalendarNotify.$4a)
var OldCalendarNotify =
SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
OldCalendarNotify();
setInterval(function(){colorCalendarEventLinks()},2000);
if (SP.UI.ApplicationPages.CalendarNotify.$4b)
var OldCalendarNotify =
SP.UI.ApplicationPages.CalendarNotify.$4b;
SP.UI.ApplicationPages.CalendarNotify.$4b = function ()
OldCalendarNotify();
setInterval(function(){colorCalendarEventLinks()},2000);
function colorCalendarEventLinks()
jQuery('div.ms-acal-mdiv').removeClass('ms-acal-mdiv').addClass('cal-text');
jQuery('div.ms-acal-sdiv').removeClass('ms-acal-sdiv').addClass('cal-text');
jQuery('div.ms-acal-item[title*="Alberta - "]').css('background-color', '#FF0000');
jQuery('div.ms-acal-item[title*="Vacation - "]').css('background-color', '#FF0000');
jQuery('div.ms-acal-item[title*="Acreage - "]').css('background-color', '#FF0000');
jQuery('div.ms-acal-item[title*="British Columbia - "]').css('background-color', '#0000FF');
jQuery('div.ms-acal-item[title*="Courses - "]').css('background-color', '#0000FF');
jQuery('div.ms-acal-item[title*="Expiry - "]').css('background-color', '#0000FF');
jQuery('div.ms-acal-item[title*="Manitoba - "]').css('background-color', '#228B22');
jQuery('div.ms-acal-item[title*="Rental - "]').css('background-color', '#228B22');
jQuery('div.ms-acal-item[title*="Saskatchewan - "]').css('background-color', '#A9A9A9');
jQuery('div.ms-acal-item[title*="Conversion - "]').css('background-color', '#A9A9A9');
_spBodyOnLoadFunctionNames.push('colorCalendarEventLinkIntercept')
</script>
</head>

Similar Messages

How to Color code the list items if Issue Tracking lists in Sharepoint 2010 SP1

Hi, Can any one guide me in making the list tasks color coded according to the status of the issue.
as if issue is Resolved ( green line ), Active ( red line ) etc.
example as following:
I have read a lot of blogs, but none have step by step guide. a step by step guide will be excellent. Thanks in advance.
http://blog.pathtosharepoint.com/2009/02/26/highlight-rows-in-sharepoint-lists/
http://blog.pathtosharepoint.com/2008/09/01/using-calculated-columns-to-write-html/
etc
Thanks.

Do you have SharePoint Designer 2010 installed?
Open your site in sharepoint designer
click lists and libraries
click the name of your list
in "views" on the right, click "new..." and give it a name.
in this new view of the list, click in one of the cells of the actual list of issues, so that the contextual ribbon at the top will give you all the options you need.
Click "Conditional Formatting" in the ribbon. This will let you pick "row".
Then you just have to define your conditions:
if priority is equal to (3) Low, then pick yellow as the background color. Do the same type of thing to create the other 2 conditions.
Laura Rogers
SharePoint911: SharePoint Consulting
Blog: http://www.sharepoint911.com/blogs/laura
Twitter: WonderLaura
Books:Beginning SharePoint 2010: Building Business Solutions with SharePoint
Using InfoPath 2010 with Microsoft SharePoint 2010 Step by Step

HT1660 Is there anyway you can color code playlist, so when you go to the list you know red is mine, green is Bob's, blue is Bill's and so on! What is the best way to do this? Help!!!!

Can I color code play
list?

No, you cannot colour-code a Playlist.
Why don't you simply add the name (Bill or Bob) to the Playlist name, or add an asterisk for one person's and the ampersand for the other person's lists?

Best Calendar App to connect to Google Calendar and color code appointments

I am looking for a replacement calendar app that will connect to Google Calendar and allow me to color code individual appointments. I have looked at a ton of apps in the app store but none of them talk about the color coding option I am looking for. I don't want to do the trial and error thing and waste my time and money.

Download Gmail app. itunes.apple.com/us/app/gmail/id422689480?mt=8

Calendar colors not the same...

In iCal, I have four different calendars each with their own color: blue, green, red, and orange. The calendar colors on the iPhone are all scrambled. How do I fix this? What am I missing? Thanks!

After playing around for some time and reading many blogs and posts with suggestions, I tried MobileMe as well.
It did not solve the color problem for me and on top of that if gave me a new problem with not syncing ical subscriptions.
The problems are so massive and wide spread that Apple has to fix them, and I'm pretty confident they will. We will probably see a round of updates and all of a sudden it will work like we all expect from a premium product like the iPhone and MobileMe.
The disappointing part is that Apple gave us a service which has a bunch of little problems and is basically not quite ready yet. And I bet that's exactly what it is, they simply ran out of time and had to push a product into the marked, before they were quite finished with it.
This is disappointing but not uncommon with everything computer. However, they should keep us informed so that we can stop guessing! "Sorry folks, we have a bunch of problems here. We will subsequently fix them over the next couple of weeks and we apologize for the inconvenience!" This is the least I would expect as a loyal customer.

ICal Calendar Colors Changing On Their Own; iCloud Connection

AGGRAVATING PROBLEM:
Many in this forum have written recently about a problem ongoing for people with multiple iCal calendars where iCal calendar colors change "automatically" when you haven't selected those colors, or even "change back" before your eyes to some color your DIDN'T select after you select a new one. If you log into iCloud on the Web and try to change the color of certain calendars, they refuse to change. Try as you might, the color you want for your calendar won't "stick" and it is forced to be the wrong color on all your devices. In some cases, even the names of some of the calendars cannot be changed. On other calendars in your list, the colors and names will change fine.
Related symptoms: Calendars you have deleted "come back."   Or, calendars you did not create yourself show up in your calendars list, such as "Calendar" or "Home" or even "Untitled." Note that the problem seems to be most prevalent with calendars with names "Home," "Work," OR either of these words in the NAME of the calendar. For instance, "Bob's Work" might get snagged (it can't be deleted without coming back or its color is stuck and "comes back").
I spent a long time on the phone with a helpful Apple senior advanced specialist on this problem today. We conducted a very large number of "experiments". Our family has two iPads, 2 iPhones, and 2 iMacs, so it was easy to rule things in or out. I will present some information that may help.
SOME OF WHAT APPEARS TO BE GOING ON:
First, Apple has not resolved this. But the problem appears to be related to iCloud, and NOT to individual devices. After de-linking all of my individual devices from iCloud, I could change any of the colors or names at will on any given device, create new calendars and then change their colors to whatever I wish, delete calendars, change names...no problem. However, after re-linking calendars to iCloud, all the problems mentioned above returned. The chances that my iMacs, iPhones, and iPads are all causing the problem independently is very low. They also have slightly different OS versions on them, so it is not likely an a particular device OS, though that could be indirectly related. Also, the colors "change back" within about the same time (usually a few seconds to up to 30 seconds) that it takes to do a "refresh" (i.e. an update) to the iCloud servers. This when iCloud is turned on, and the absence of it when iCloud is turned off (for calendars), strongly suggests that it is the iCloud server and its interaction with your devices that the fundamental cause of the problem.
Apple has said that they are aware of this problem and their engineers are working on a fix. Historically, this can mean just a few days, or it could be a few months, years, or "whenever." They don't give estimates of when it will be fixed. Exactly WHY this is happening is unclear, but my guess is that it is a modification to the iCloud server code that Apple implemented without testing it thoroughly enough to discover this problem. Apple does not admit to that, of course and I don't know if I am correct.
A WORKAROUND SOLUTION THAT WORKED FOR ME:
Please note this is a workaround and not a full fix. Apple needs to run a patch on their iCloud server code. Until then, I did the following which seems to have worked for me for now. Read the whole list before deciding whether to proceed. I don't guarantee it will work in all situations.
Note...I found I was stuck for now with the color of ONE of my calendars. If you are like me, you want to keep that one and work around it....
Backup first... Make sure that your iCloud copy of your calendar data has the calendar event information you want to save - even if the color is wrong. Log in at www.icloud.com and do a refresh to sync to the Cloud. Check over your calendars online to make sure the event data appears to be there for all of your calendars (even if their color or name is not what you want).
Steps:
1.     Go to every device that you have linked to iCloud separately. Go into Settings, iCloud, and then uncheck the "Calendars" option. This delinks your calendars for that device to iCloud. As you do this on each device, when prompted, select "Keep On My" ..iPAD...iPhone...iMac... etc. This will preserve the calendar information on the device so it won't be deleted. I think this is safer, but you can click on "Delete" if you want, too. Note - if one of your devices is an iMac, with OSX Lion and before, you may be forced (I was) to delete the iCloud calendars from the iMac. So again, make sure they are backed up to the Cloud first (or somewhere else).
3.     With the iCloud Calendars Option on all your devices still turned off, go to the WEB and log into iCloud.com. You need to figure our which calendar iCloud won't let you change the color for. You probably already know. On iCloud.com, click on "Calendars," then click open your calendar list and select "EDIT" at the bottom of the dialog box. One at a time, click on the color dots next to each calendar name and try to change the color (you can put any back after the test if you want). You will probably see a certain one that just goes right back to what you don't want. This is the one for which the color is stuck, but you may be able to change the name of it now that your devices are unlinked from iCloud.
4.     Still in iCloud.com, change the names and colors of any of the other calendars you wish to change. Delete any empty calendars that mysteriously appeared without your wanting them. Take note of all the calendars, names, and colors that are on the final list of calendars.
5.     On EVERY device, BEFORE turning iCloud back on on ANY of them: Change the colors and/or names of calendars, delete calendars, etc. so that the calendar names and colors on the device are exactly the same as what you left in iCloud.com in the last step.
6.   One at a time on each device, go back to Settings and then "iCloud" and check again the box for "Calendars." You will be asked whether you want to "MERGE" your data with iCloud. I selected MERGE to ensure I didn't lose anything. Link each device again into iCloud one at a time.
7. When each device is back, go back to iCloud on the Web, or go into iCAL on one of your devices. Set to view ALL calendars. Look for duplicates of some of your events. I found quite several as an artifact of "merging", but in my case it only took me about 5 minutes to go through quickly and delete the duplicates. It deleted the duplicates on all of the devices at once, so I only needed to delete dups on one device. I did not find that I lost any events as long as I kept one valid copy.
Again, no guarantees...hope this works for others. Good luck.

I'm getting the same thing and it's really bugging me! Keeps changing colour to one I do not want and I have tried everything to get it to stay the colour I have chosen!!

Calendar colors

I feel like this is a stupid question, but I can't figure it out. When I use iCal on my computer, I have three event categories, and each has a color. When I sync it to iCal on my ipod, there are the same 3 event categories, but with the colors reversed! This is really annoying. I've tried a bunch of trick type things to try to fix it, like changing the order and which is the default, but I can't get it to change. Anyone know how to make them match up?

There is a trick, but it's a bit of a pain. The iPod Touch will apply calendar colors in the following order: red, orange, blue, green, purple. (If you only sync one calendar, it's blue).
Depending on the colors you want, you first need to create 'blank' calendars in iCal to 'use up' unwanted colors. Then, you need to sync the calendars, one at a time, in color order.
Go to the Info tab (in iTunes with the iPod Touch connected and selected in the devices list. With the Sync iCal calendars box checked, UNcheck all the boxes and sync. Then, check the box for the calendar you want to be red. Then sync (if you look on the iPod Toouch at this point, that calender will be blue, since it's the only one). Then, check the box for the calendar you want to be orange, then sync. Repeat for blue, then green, then purple.
For example, if I want to have two calendars, Home colored blue and Work purple, I would create three new calendars - empty1, empty2, empty3 - then check the boxes in the following order, syncing between each: empty1, empty2, Home, empty3, Work.
Hope this helps...

Ical calendar colors changing birthday calendar color

Okay, I've been using iCal for well perhaps ever ever since it started shipping in the OS. I'd like to be able to change the colors codes of calendars on an iPad 2 running the app. So far haven't found a place to do that. Suspecting it might be a mobileme thing. I've even tried that, nope no good. Seems like the iCal app on the iPad pulls colors from somewhere as some match others don't. I looking for a consistent look for all calendars across different devices, i.e. Ipad/iPhone/Laptop desktop version of iCal. Going to repost this same question on the iCal discussion group. Should I get a response I'll repost it here.
Thanks,

Mikael,
I also used to sync to my Palm handheld. I used The Missing Sync. I still had the problem of colors changing. But, they just changed. The colors on my iPod touch calendar don't relate at all to the colors in iCal.
Since it occasionally happened with my Palm, I don't mind having to adjust the calendars. What I don't like is that there is no way, on the iPod, to change the colors. And a few of the frequently-used calendars have ended up with the same color on my touch.
-fred
I expect that will come with time.

Background color of a list item implemented as Tlist

Hi,
I have one form with 3 blocks each holding one list item. The list item that has the focus should have a different background color from the other 2 list items. I thought to implement this with visual attributes I assign in the when-new-block-instance trigger. This however only partially works.
What happens is the following :
At startup focus is in the first block. This block's when-new-block-instance trigger is fired :
SET_ITEM_PROPERTY('BK_LIST.LIST',VISUAL_ATTRIBUTE ,'VA_INDICATOR');
SET_ITEM_PROPERTY('BK_LIST2.LIST',VISUAL_ATTRIBUTE ,'VA_ENABLED_LIST');
SET_ITEM_PROPERTY('BK_LIST3.LIST',VISUAL_ATTRIBUTE ,'VA_ENABLED_LIST2');
and the list correctly gets it's yellow background. (defined in va_indicator)
Va_enabled_list and va_enabled_list2 both have a white background, difference between them is the font size)
Now when we move focus to the 2nd block we get a different behaviour. This is the trigger defined on the 2nd block :
SET_ITEM_PROPERTY('BK_LIST.LIST',VISUAL_ATTRIBUTE ,'VA_ENABLED_LIST');
SET_ITEM_PROPERTY('BK_LIST2.LIST',VISUAL_ATTRIBUTE ,'VA_INDICATOR');
SET_ITEM_PROPERTY('BK_LIST3.LIST',VISUAL_ATTRIBUTE ,'VA_ENABLED_LIST2');
So I except the first block to get a white background again and the second block to get it's yellow background. However only the selected row in the tlist changes it's background color. (this in both blocks)
I do not understand why the first time (at form startup) the background color is set for the whole item and the second time only for the selected record.
I tried to use the property background_color but the colors are different from what I see in my color palette in that case. If I use the same color codes I also use in my visual_attributes the final result on the screen is different...
Secondly the result is the same, at form startup the item's background is set, as from the second call only the current salected record in the tlist will change from background color.
Forms are running C/S and are developed in Forms 6i. One way to get the result I need is by navigating back & forward to my application in Windows using Alt-Tab. At that moment the correct background colors are suddenly applied... Is there a way to force a similar sort of screen refresh ?
Thanks for any hints, workarounds, tips or solutions !
Kris
Message was edited by:
[email protected]

Hi,
I still don't have a clue how I could solve this one.
It works leaving the block (so making it white again) but it does not work entering the block. (giving the list item another background color). The problem is not about the whithe color. If I do my tests with other colors (red-yellow) the problem remains.
Best Regards,
Kris

Calendar colors across multiple devices

Okay, I've been using iCal for well perhaps ever ever since it started shipping in the OS. I'd like to be able to change the colors codes of calendars on an iPad 2 running the app. So far haven't found a place to do that. Suspecting it might be a mobileme thing. I've even tried that, nope no good. Seems like the iCal app on the iPad pulls colors from somewhere as some match others don't. I looking for a consistent look for all calendars across different devices, i.e. Ipad/iPhone/Laptop desktop version of iCal. Going to repost this same question on the iCal discussion group.
Thanks,

I have the same setup here for me any my wife. We each have a separate apple ID used for iCloud (but share one ID for iTunes).
We each have personal calendars but we also have a shared one (named shared). On icloud.com we have that calendar shared where we can each add/edit the events. And it is shared accross our iPad and iPhones.

Inserting colors into a list

Hi,
How do I display colors in a list, I tried using ArrayCollection and all but it didnt work. I got a list with [object Object] displayed in it.
Can any one give me the code for the same?

Hi averghese,
Check out the below code..It may help you..
<?xml version="1.0"?>

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
import mx.events.DropdownEvent;
public function openEvt(event:DropdownEvent):void {descriptBox.text=
public function changeEvt(event:ColorPickerEvent):void {descriptBox.text=event.currentTarget.selectedItem.cName
+
": " + event.currentTarget.selectedItem.cDescript;}
]]>
</mx:Script>
<mx:Style>
.myStyle {
swatchWidth:25;
swatchHeight:25;
textFieldWidth:95;}
</mx:Style>
<mx:VBox>
<mx:TextArea id="descriptBox" width="
150" height="50"/>
<mx:ColorPicker id="cp" height="
50" width="150"labelField="
cName" colorField="
cVal"change="changeEvt(event)"
open="openEvt(event)"
swatchPanelStyleName="
myStyle"editable="
false">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:Object cName="Yellow" cVal="0xFFFF00" cDescript="
A bright, light color."/>
<mx:Object cName="Hot Pink" cVal="0xFF66CC" cDescript="
It's HOT!"/>
<mx:Object cName="Brick Red" cVal="0x990000" cDescript="
Goes well with warm colors."/>
<mx:Object cName="Navy Blue" cVal="0x000066" cDescript="
The conservative favorite."/>
<mx:Object cName="Forest Green" cVal="0x006600" cDescript="
Great outdoorsy look."/>
<mx:Object cName="Grey" cVal="0x666666" cDescript="
An old reliable."/>
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ColorPicker>
</mx:VBox></mx:Application>
Thanks,
Bhasker Chari

Why doesn't ical add all of my google calendars on the same page?

why doesnt ical add all of my google calendars on the same page.
like in gmail, i have different calendars that all show up together on the same page.
i see that they are there in ical when i click window. but the are not all see together on one page.

If the box next to each calendar in the list is checked, it should show the contents of the calendars on the page. Unchecking the box hides the calendar.

Changing calendar colors

A client of mine uses a specific color code for his ical on his computer, but on his iphone, the colors are different. I see no way to change the colors on the iphone. How do I do this?
Thanks,

Cashman, this is actually possible. I just did it after searching for an answer.
how i did it:
go to iphone "Settings"
Mail contacts calendars
The exchange account he wants to change the color of.
Switch calendars to off wait till it says off then switch back on.
go and check if one of his calendars colors have changed to the color he likes.
I had to do it up to 4x on a couple just to get it to the right color, i have 4 accounts to keep track of so colors are important to me, It wont have to be changed again. Ahh.....relief!

ICloud changes my calendar colors. I am no longer able to pick my own calendar colors. This is due to some bug on iCloud. FIX THIS PROBLEM IMMEDIATELY APPLE!!! THIS IS RIDICULOUS. iCloud should not force us to pick calendar colors.

iCloud changes my calendar colors. I am no longer able to pick my own calendar colors. This is due to some bug on iCloud. FIX THIS PROBLEM IMMEDIATELY APPLE!!! THIS IS RIDICULOUS. iCloud should not force us to pick calendar colors. We should be able to pick our own!!!!!

Same here, Calender keeps reverting to Purple a color I never ever even picked, screw you iCloud, you continue to annoy me and baffle me with your inadequecies

Color Code is not working, please help

I am using the color code 080808 from adobe photoshop as my background for my template. When i put the JPG file into dreamweaver and try to set the page properties in dreamweaver (background) to 080808 it is putting me at pure black. please help me.080808 is not a pure black its a shade of it. I need a color code that matches 080808 correctly. thanks
I am using adobe CS3

I'm not quite sure I understand exactly what you are doing, but I ran into something like this myself. I was creating GIFs in Photoshop -- type on a background color. I then created DW pages. I used the same color code for the background color in PS and again for the background color in DW, but when I inserted the images in the page, they did not match. It turned out that when I created a new file in PS, I was creating it in my default color space, Adobe RGB. I assumed that when Save For Web converted the file to sRGB, the colors would convert perfectly. What I found is that I should have been creating my PS files by starting with a new file in sRGB color space. Once I did that, the background color of my images identically matched the background color of my DW page.
Hope this helps.
John

Calendar color codes - Same list - Jquery

Similar Messages

Maybe you are looking for