Styling Your Tasks – Part 1: Built In Styling

This post is the first in a two part series on task bar styling. It describes how to use the built in options for task bar styling, the second post will show how to do custom styling using the eventRenderer and CSS.

Task colors

The Scheduler includes a predefined set of color schemes that can be used for rendered task bars (referred to as events throughout our API). While the colors have the same names across themes the actual color used vary slightly depending on the theme. These are the colors for the material theme:

  • red
  • pink
  • purple
  • violet
  • indigo
  • blue
  • cyan
  • teal
    green
  • lime
  • yellow
  • orange

By default the Scheduler uses “green” for the background color of its task bars. The default value can easily be changed by configuring Scheduler with the eventColor config:

const scheduler = new Scheduler({
  // your other configs...
  ...,
  
  eventColor : 'blue'
});

The default color can also be changed on the fly and since the Scheduler’s API is reactive, the change will be reflected in the UI immediately:

scheduler.eventColor = 'violet';

When setting an eventColor value, the Scheduler also changes the text color to a suitable value. It is also possible to assign a color to a ResourceModel (affecting all assigned tasks) or directly to an EventModel instance. Either specify it in your data:

{
  id : 1,
  name : 'Resource 1',
  eventColor : 'orange'
}

Or set it programmatically at any time:

scheduler.resourceStore.getAt(2).eventColor = 'indigo';
scheduler.eventStore.first.eventColor = 'yellow';

The priority order for specified colors are high to low: EventModel ResourceModel Scheduler. Try moving the tasks around in this demo to see the different color priorities in effect:

Task styles

You can also specify a predefined task bar style on the Scheduler, ResourceModel and EventModel levels. This works very similar to how you specify colors. The built in styles are:

plain
colored
border
hollow
line
dashed
minimal

By default Scheduler uses “plain” as the style for its tasks. The default value can easily be changed when configuring the Scheduler, using the eventStyle config:

const scheduler = new Scheduler({
  // your other configs...
  ...,
  
  eventStyle : 'border'
});

And as with the task color, you can change it on the fly programmatically:

scheduler.eventStyle = 'hollow';

The same principles apply to resources and their tasks:

scheduler.resourceStore.getAt(2).eventStyle = 'dashed';
scheduler.eventStore.first.eventStyle = 'line';

The priority order for specified style are high to low: EventModel ResourceModel Scheduler. Try moving the tasks around in this demo to see the different style priorities in effect:

Learn more

You can experiment with the different styles and colors in the ‘eventstyles’ demo found here.

A few useful links:

Happy styling!

Leave a Comment