3 Replies Latest reply on Jun 28, 2016 10:12 AM by Alex Nassi

    Why does the Key Dates tile show the wrong date?

    Alex Nassi

      I have two Key Dates tiles on a page in one of my space in a Jive-N cloud instance. The dates show correct for me, but a user alerted me today that the dates all show off by one day for him. I confirmed this behavior with another user. For me, a meeting shows as tomorrow (5/12), but for him, it shows today (5/11)

       

      My initial thought was that something was wrong with our time zones. Mine is set to America/Denver and his is America/Los_Angeles. I checked with another Denver user and she shows the same as the other user.

       

      I deleted and recreated one of the dates, but there was no change.

       

      Is this a known defect? Has anyone else experienced this before?

       

      Screenshots:

      My viewOther user's (incorrect) view
      Screen Shot 2016-05-11 at 12.19.00 PM.png00000081.png
        • Re: Why does the Key Dates tile show the wrong date?

          Hi Alex,

           

          Reviewing through your description, you might be running into JIVE-63788, which is set to be resolved starting with the 2016.2 release of the Jive Cloud platform ( Jive Release Schedule ). However, to confirm and track this issue I would recommend submitting a case in your secret customer group here in the Jive Community for further review by the next available support engineer.

           

          Thanks!

          • Re: Why does the Key Dates tile show the wrong date?
            Alex Nassi

            Since this bug was causing some confusion for my users, I started playing with the HTML tile to see if I could recreate this Key Date tile manually. The additional advantages of creating this were:

            • Flexibility over the color and design of the date icon (I made it red to better fit my place's color scheme instead of the OOB blue)
            • Add as many events you would like (no hard limit)
            • No concern about time zone, just the dates as they stand.

            The drawbacks are:

            • Needs to be manually modified for every holiday (same as the OOB tile), but this takes an extra few actions compared to the tile.
            • Took a little while to get fonts/colors/styles to appear properly. The "Inherent" value was not consistent, so I had to inspect the page to pull some values

             

            This tile is (now) being used to show our Support and Company holidays so that Support team members know when other global teams (US, APAC, EMEA) are closed, but could be modified to other needs as well.

             

            The html code is:

            <!--date image icon code from http://cssdeck.com/labs/css3-calendar-icon-2-->
            <html>
            <head>
            <style>
            .date {
              display: inline-block;
              width: 50px;
              height: 55px;
              margin: 15px auto;
              background: #fff;
              text-align: center;
              font-family: 'Helvetica', sans-serif;
              position: relative;
            }
            
            
            .date .binds {
              position: absolute;
              height: 7.5px;
              width: 30px;
              background: transparent;
              border: 1px solid #999;
              border-width: 0 2.5px;
              top: -3px;
              left: 0;
              right: 0;
              margin: auto;
            }
            
            
            .date .month {
              background: #E61718;
              text-transform: uppercase;
              display: block;
              padding: 4px 0;
              color: #fff;
              font-size: 10px;
              font-weight: bold;
              border-bottom: 1px solid #333;
              box-shadow: inset 0 -.5px 0 0 #666;
            }
            
            
            .date .day {
              display: block;
              margin: 0;
              padding: 5px 0;
              color: #666;
              font-size: 24px;
              box-shadow: 0 0 1.5px #ccc;
              position: relative;
            }
            
            
            .date .day::after {
              content: '';
              display: block;
              height: 100%;
              width: 96%;
              position: absolute;
              top: 3px;
              left: 2%;
              z-index: -1;
            
            
            }
            
            
            .date .day::before {
              content: '';
              display: block;
              height: 100%;
              width: 90%;
              position: absolute;
              top: 6px;
              left: 5%;
              z-index: -1;
            
            
            }
            
            
            p {
              display: inline-block;
              font-size: inherit;
              color: #666;
              font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;;
              position: relative;
              left: 10px;
              top: 1px;
              font-style: inherit;
              font-weight: inherit;
              ;
            
            
            }
            
            
            h2 {
            font-size: 12px;
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
                font-weight: 500;
                color: inherit;
                text-transform: uppercase;
                overflow: hidden;
                position: relative;
                display: inline-block;
                white-space: nowrap;
                max-width: 280px;
                text-overflow: ellipsis;
                margin: -5 0 0 -5px;
                line-height: 1em;
                color:#666;
                font-style: normal;
              ;
            }
            
            
            
            
            </style>
            </head>
            
            
            <h2>
                Upcoming Support Holidays
            </h2>
            
            
            <!-- Start Event-->
            <div>
            <div class="date">
              <span class="month">jul</span>
              <h1 class="day">4</h1>
            </div>
            <p>
              Independence Day 
            </br>
              (US Holiday)
            </p>
            </div>
            <!-- End Event-->
            
            
            <!-- Start Event-->
            <div>
            <div class="date">
              <span class="month">AUG</span>
              <h1 class="day">15</h1>
            </div>
            <p>
              Assumption Day
            </br>
              (EMEA Holiday)
            </p>
            </div>
            <!-- End Event-->
            
            
            <!-- Start Event-->
            <div>
            <div class="date">
              <span class="month">Sep</span>
              <h1 class="day">5</h1>
            </div>
            <p>
              Labor Day 
            </br>
              (US Holiday)
            </p>
            </div>
            <!-- End Event-->
            <!-- Start Event-->
            <div>
            <div class="date">
              <span class="month">Oct</span>
              <h1 class="day">2</h1>
            </div>
            <p>
              Labor Day 
            </br>
              (APAC Holiday)
            </p>
            </div>
            <!-- End Event-->
            <!-- Start Event-->
            <div>
            <div class="date">
              <span class="month">OCt</span>
              <h1 class="day">3</h1>
            </div>
            <p>
              German Unitiy 
            </br>
              (EMEA Holiday)
            </p>
            </div>
            <!-- End Event-->
            <!-- Start Event-->
            <div>
            <div class="date">
              <span class="month">Nov</span>
              <h1 class="day">11</h1>
            </div>
            <p>
              All Saints' Day 
            </br>
              (EMEA Holiday)
            </p>
            </div>
            <!-- End Event-->
            <!-- Start Event-->
            <div>
            <div class="date">
              <span class="month">Nov</span>
              <h1 class="day">11</h1>
            </div>
            <p>
              Veteran's Day 
            </br>
              (US Holiday)
            </p>
            </div>
            <!-- End Event-->
            
            </html> 
            

            My HTML skills are pretty lacking, so there may be formatting/best practice errors above, but the code still works

            This appears as:

            Screen Shot 2016-06-28 at 11.11.13 AM.png

             

            I hope this can help someone else who comes across this!

             

            -Alex

            2 people found this helpful