Event Calendar - Alternatives to Dots for Calendar?

Originally Posted 6 July 2017, 1:29 pm EST

  • Originally Posted 6 July 2017, 1:29 pm EST

    Out of curiosity, are there any alternatives to using the dots that identify the calendar that an event belongs to?

    I'm asking because one of my coworkers is color blind, so we are always thinking about things that we can adjust without adversely affecting the UX for our users. In this case, we usually try to combine shapes with colors.

    The first screenshot I've attached was done with the control explorer sample on the main website. The second screenshot shows how we are using the calendar control in our web application. The screenshot shows we are using six different calendars. So, I see several choices:

    • Shapes: square, circle, triangle, diamond, rectangle (like a minus sign), and maybe a hexagon or octagon.

    • Glyphs: check, question, ban circle, etc. Could be bootstrap glyphicons or something else

    • Icons: Graphic icons to represent the different calendars

    One very easy way this could be accomplished is to allow a css class string to be specified in the calendar config, and have the widget assign that class to the appropriate element when the markup is generated. I'm probably going to take a shot at doing this with jquery after the event data has been loaded, but I thought I would post here and see if anyone else has tried this, or in case this is a good idea for an enhancement.

  • Reply

    We are investigating on this.

    Manish Kumar Gupta
  • Marked as Answer


    You can change the shape of the event by changing the corresponding class definition. Glyph icon can be used using class and javascript by manipulating DOM.
    Please refer to the attached sample that shows how different shape can be used.

    Manish Kumar Gupta
  • Reply

    Using the provided example as a starting point, I was able to come up with CSS to use different shapes for the calendars.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels