1

I am working with SharePoint Online Calendar, i am trying to change the color of the cell based on the event category.

While searching on web i found this post but this uses Calendar Overlay and i don’t want to use Calendar Overlay as it open the event in new window rather than opening into the dialog box.

Later on i found some CSS tricks like using

<style type="text/css">
div.ms-acal-item {
 background-color: #288054;
}
</style>

The above code is partially working. It means it shows me the color code which i have kept and suddenly overwrite with the default color.

I tried following things

  • Created a css file in which i created a class and in that class i am trying to set the css and i am applying that class using JS. But the class does not shown in the HTML page source

  • Added !important after the css

But still the issue remains the same. It always overwrite my custom color with default color.

If any one have gone through the same requirement and solved without using Calendar Overlay then please suggest me the way that how can i achieve this.

Thanks

Improve this question
6
  • what's the approach of applying the css, I tried the style with CEWP, looking ok to me.
    – Shawn
    Apr 29, 2016 at 6:10
  • I am filtering calendar based on the category, so i am having multiple calendar webparts on single page so i can't use CEWP. the approach which i have used i am updating in the question
    – Aakash Maurya
    Apr 29, 2016 at 6:32
  • Maybe that could also help: afrait.com/blog/color-calendar-and-icons-in-10-easy-steps-en
    – Patrick
    Apr 29, 2016 at 6:39
  • You can write down script logic to apply specific class to the calendar based on your category selected, and in CSS you can refer that specific class and apply css. Refer this link for more: davidlozzi.com/2012/06/20/…
    – Pradip R.
    Apr 29, 2016 at 9:34
  • @PradipR. I am doing the same thing. But it is overwriting my custom css with default css
    – Aakash Maurya
    Apr 30, 2016 at 5:25

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.