Add colour to events.

src/Calendar.tsx

@@ -33,6 +33,14 @@ class Calendar extends React.Component {
       }
     });
 
+    function eventPropGetter(event: EventType) {
+      return {
+        style: {
+          backgroundColor: event.color,
+        }
+      };
+    }
+
     return (
       <div style={{width: '100%', height: 500, padding: 10}}>
         <BigCalendar
@@ -41,6 +49,7 @@ class Calendar extends React.Component {
             this.props.onItemClick(event);
           }}
           {...{culture: 'en-GB'}}
+          eventPropGetter={eventPropGetter}
           date={this.state.currentDate}
           onNavigate={(currentDate: Date) => { this.setState({currentDate}); }}
         />

src/Journal.tsx

@@ -66,10 +66,12 @@ class Journal extends React.Component {
     let itemsTitle: string;
     let itemsView: JSX.Element;
     if (collectionInfo.type === 'CALENDAR') {
-      itemsView = <JournalCalendar journal={journal} entries={syncEntriesToCalendarItemMap(syncEntries)} />;
+      itemsView =
+        <JournalCalendar journal={journal} entries={syncEntriesToCalendarItemMap(collectionInfo, syncEntries)} />;
       itemsTitle = 'Events';
     } else if (collectionInfo.type === 'ADDRESS_BOOK') {
-      itemsView = <JournalAddressBook journal={journal} entries={syncEntriesToItemMap(syncEntries)} />;
+      itemsView =
+        <JournalAddressBook journal={journal} entries={syncEntriesToItemMap(collectionInfo, syncEntries)} />;
       itemsTitle = 'Contacts';
     } else {
       itemsView = <div>Unsupported type</div>;

src/Pim.tsx

@@ -61,9 +61,9 @@ class Pim extends React.Component {
       });
 
       if (collectionInfo.type === 'ADDRESS_BOOK') {
-        syncEntriesAddressBook.push(syncEntriesToItemMap(syncEntries));
+        syncEntriesAddressBook.push(syncEntriesToItemMap(collectionInfo, syncEntries));
       } else if (collectionInfo.type === 'CALENDAR') {
-        syncEntriesCalendar.push(syncEntriesToCalendarItemMap(syncEntries));
+        syncEntriesCalendar.push(syncEntriesToCalendarItemMap(collectionInfo, syncEntries));
       }
 
     }

src/journal-processors.tsx

@@ -4,7 +4,7 @@ import { EventType, ContactType } from './pim-types';
 
 import * as EteSync from './api/EteSync';
 
-export function syncEntriesToItemMap(entries: EteSync.SyncEntry[]) {
+export function syncEntriesToItemMap(collection: EteSync.CollectionInfo, entries: EteSync.SyncEntry[]) {
   let items: {[key: string]: ContactType} = {};
 
   for (const syncEntry of entries) {
@@ -23,9 +23,32 @@ export function syncEntriesToItemMap(entries: EteSync.SyncEntry[]) {
   return items;
 }
 
-export function syncEntriesToCalendarItemMap(entries: EteSync.SyncEntry[]) {
+function colorIntToHtml(color: number) {
+  if (color === undefined) {
+    return '#8BC34A';
+  }
+
+  // tslint:disable:no-bitwise
+  const blue = color & 0xFF;
+  const green = (color >> 8) & 0xFF;
+  const red = (color >> 16) & 0xFF;
+  const alpha = (color >> 24) & 0xFF;
+  // tslint:enable
+
+  function toHex(num: number) {
+    let ret = num.toString(16);
+    return (ret.length === 1) ? '0' + ret : ret;
+  }
+
+  return '#' + toHex(red) + toHex(green) + toHex(blue) +
+    ((alpha > 0) ? toHex(alpha) : '');
+}
+
+export function syncEntriesToCalendarItemMap(collection: EteSync.CollectionInfo, entries: EteSync.SyncEntry[]) {
   let items: {[key: string]: EventType} = {};
 
+  const color = colorIntToHtml(collection.color);
+
   for (const syncEntry of entries) {
     let comp = new EventType(new ICAL.Component(ICAL.parse(syncEntry.content)).getFirstSubcomponent('vevent'));
 
@@ -33,6 +56,8 @@ export function syncEntriesToCalendarItemMap(entries: EteSync.SyncEntry[]) {
       continue;
     }
 
+    comp.color = color;
+
     const uid = comp.uid;
 
     if ((syncEntry.action === EteSync.SyncEntryAction.Add) ||

src/pim-types.tsx

@@ -1,6 +1,8 @@
 import * as ICAL from 'ical.js';
 
 export class EventType extends ICAL.Event {
+  color: string;
+
   get title() {
     return this.summary;
   }