---
title: eventColor
---

Sets the color for all foreground events on the calendar. It does NOT apply to [background events](background-events).

<div class='spec'>

String

</div>

You can change the color of all foreground events on the calendar like so:

```js
var calendar = new Calendar(calendarEl, {
  events: [
    // my event data
  ],
  eventColor: '#378006'
});
```

You can use any of the CSS color formats such `#f00`, `#ff0000`, `rgb(255,0,0)`, or `red`.

The [eventContrastColor](eventContrastColor) option can be used to set the contrast color for text and other elements rendered on top of the event.

This option can be overridden on a per-source basis with the `color` [Event Source Object](event-source-object) option or on a per-event basis with the `color` [Event Object](event-object) option.