Add colour to events.

master
Tom Hacohen 7 years ago
parent 802b994a6f
commit 64e13f4ec8

@ -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}); }}
/>

@ -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>;

@ -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));
}
}

@ -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) ||

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

Loading…
Cancel
Save