Team Calendars: Unable to change event color on Confluence 8.4.1

XMLWordPrintable

    • 1
    • Severity 3 - Minor

      Problem

      It is not possible to change event color in Team Calendars on Confluence 8.4.1

      Environment

      Confluence 8.4.1

      Steps to Reproduce

      Install Confluence 8.4.1
      Create a calendar and add an event

      Expected Results

      You can change event colors:

      Actual Results

      The color drop-down is missing:

      Workaround

      Option A:
      Following this guide and add the below custom CSS.

      .child-subcalendar.subcalendar-gray .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-gray {
          background-color: #091E42;
          border: 1px solid #091E42;
      }
      
      .child-subcalendar.subcalendar-green2 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-green2 {
          background-color: #00875A;
          border: 1px solid #00875A;
      }
      
      .child-subcalendar.subcalendar-purple .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-purple {
          background-color: #5243AA;
          border: 1px solid #5243AA;
      }
      
      .child-subcalendar.subcalendar-green3 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-green3 {
          background-color: #36B37E;
          border: 1px solid #36B37E;
      }
      
      .child-subcalendar.subcalendar-yellow .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-yellow {
          background-color: #FFC400;
          border: 1px solid #FFC400;
      }
      
      .child-subcalendar.subcalendar-orange2 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-orange2 {
          background-color: #FF5630;
          border: 1px solid #FF5630;
      }
      
      .child-subcalendar.subcalendar-turquoise .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-turquoise {
          background-color: #00A3BF;
          border: 1px solid #00A3BF;
      }
      
      .child-subcalendar.subcalendar-green .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-green {
          background-color: #006644;
          border: 1px solid #006644;
      }
      
      .child-subcalendar.subcalendar-bronze .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-bronze {
          background-color: #FFAB00;
          border: 1px solid #FFAB00;
      }
      
      .child-subcalendar.subcalendar-pink .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-pink {
          background-color: #DE350B;
          border: 1px solid #DE350B;
      }
      
      .child-subcalendar.subcalendar-purple2 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-purple2 {
          background-color: #403294;
          border: 1px solid #403294;
      }
      
      .child-subcalendar.subcalendar-blue .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-blue {
          background-color: #0052CC;
          border: 1px solid #0052CC;
      }
      
      .child-subcalendar.subcalendar-blue2 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-blue2 {
          background-color: #0049B0;
          border: 1px solid #0049B0;
      }
      
      .child-subcalendar.subcalendar-gray2 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-gray2 {
          background-color: #0065FF;
          border: 1px solid #0065FF;
      }
      
      .child-subcalendar.subcalendar-purple3 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-purple3 {
          background-color: #253858;
          border: 1px solid #253858;
      }
      
      .child-subcalendar.subcalendar-green4 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-green4 {
          background-color: #008DA6;
          border: 1px solid #008DA6;
      }
      
      .child-subcalendar.subcalendar-red .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-red {
          background-color: #BF2600;
          border: 1px solid #BF2600;
      }
      
      .child-subcalendar.subcalendar-purple4 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-purple4 {
          background-color: #8777D9;
          border: 1px solid #8777D9;
      }
      
      .child-subcalendar.subcalendar-green5 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-green5 {
          background-color: #00B8D9;
          border: 1px solid #00B8D9;
      }
      
      .child-subcalendar.subcalendar-green6 .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-green6 {
          background-color: #42526E;
          border: 1px solid #42526E;
      }
      
      .child-subcalendar.subcalendar-orange .child-subcalendar-color, #com-atlassian-confluence .subcalendar-dropdown-menu .subcalendar-orange {
          background-color: #FF8B00;
          border: 1px solid #FF8B00;
      }
      

      Option B:
      Install team-calendars-8.3.11.jar via UPM.

              Assignee:
              Zac Xu
              Reporter:
              Diego Patrignani
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: