Fluent Design Calendar UI

fluent-design-calendar-ui.markdown

Fluent Design Calendar UI

A Pen by Nick Bair on CodePen.

License.

index.html

<header>
  <h1>Fluent Design Calendar</h1>
  <p>
    The upcoming Windows 10 Spring Creators Update features some cool new fluid design elements. One of my favorites is the calendar in the notification area with a cool hover effect.
  </p>
</header>
<table class="calendar" cellpadding="0" cellspacing="0">
  <tbody>
    <thead>
      <th>Su</th>
      <th>Mo</th>
      <th>Tu</th>
      <th>We</th>
      <th>Th</th>
      <th>Fr</th>
      <th>Sa</th>
    </thead>
    <tr>
      <td><a href="#">1</a></td>
      <td><a href="#">2</a></td>
      <td><a href="#">3</a></td>
      <td><a href="#">4</a></td>
      <td><a href="#">5</a></td>
      <td><a href="#">6</a></td>
      <td><a href="#">7</a></td>
    </tr>
    <tr>
      <td><a href="#">8</a></td>
      <td><a href="#">9</a></td>
      <td><a href="#" class="current active">10</a></td>
      <td><a href="#">11</a></td>
      <td><a href="#">12</a></td>
      <td><a href="#">13</a></td>
      <td><a href="#">14</a></td>
    </tr>
    <tr>
      <td><a href="#">15</a></td>
      <td><a href="#">16</a></td>
      <td><a href="#">17</a></td>
      <td><a href="#">18</a></td>
      <td><a href="#">19</a></td>
      <td><a href="#">20</a></td>
      <td><a href="#">21</a></td>
    </tr>
    <tr>
      <td><a href="#">22</a></td>
      <td><a href="#">23</a></td>
      <td><a href="#">24</a></td>
      <td><a href="#">25</a></td>
      <td><a href="#">26</a></td>
      <td><a href="#">27</a></td>
      <td><a href="#">28</a></td>
    </tr>
    <tr>
      <td><a href="#">29</a></td>
      <td><a href="#">30</a></td>
      <td><a href="#" class="disabled">1</a></td>
      <td><a href="#" class="disabled">2</a></td>
      <td><a href="#" class="disabled">3</a></td>
      <td><a href="#" class="disabled">4</a></td>
      <td><a href="#" class="disabled">5</a></td>
    </tr>
    <tr>
      <td><a href="#" class="disabled">6</a></td>
      <td><a href="#" class="disabled">7</a></td>
      <td><a href="#" class="disabled">8</a></td>
      <td><a href="#" class="disabled">9</a></td>
      <td><a href="#" class="disabled">10</a></td>
      <td><a href="#" class="disabled">11</a></td>
      <td><a href="#" class="disabled">12</a></td>
    </tr>
  </tbody>
</table>
<footer>
    <p>
    This pen recreates that hover effect using a radial gradient background image on the containing table, positioned dynamically using a bit of JavaScript. The effect is completed by applying an opaque border to the table and cells, then using transparent borders on the &lt;a&gt; tags within the cells.
  </p>
</footer>

script.js

$(function(){
  var $calendar = $(".calendar");
  var bgColor = $calendar.css("background-color");

  $('body').mousemove(function(e) {
    var x = e.pageX - $calendar[0].offsetLeft;
    var y = e.pageY - $calendar[0].offsetTop;
    var pos = x + "px " + y + "px";    

    var gradient = "radial-gradient(circle 70px at " + pos + ", #939393, " + bgColor + ")"

    $calendar.css({ background: gradient });
  });

  $(".calendar a").click(function(e) {
    e.preventDefault();
    $(".calendar a").removeClass("active");
    $(this).addClass("active");
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

$color__white: #fff;
$color__black: #000;
$color__blue: #0078d7;
$color__charcoal: #464646;
$color__gray: lighten($color__charcoal, 30%);

$table__border: 2px solid $color__charcoal;

html {
  font-size: 62.5%;
}
body {
  margin: 0;
  padding: 2rem;
  width: 100%;
  min-height: 100vh;
  font-size: 1.6rem;
  background: $color__charcoal;
  color: $color__white;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  box-sizing: border-box;
}
header {
  max-width: 30em;
  margin: 0 auto 6rem auto;
}
footer {
  max-width: 30em;
  margin: 6rem auto 0 auto;
}
h1 {
  font-weight: 300;
  font-size: 4rem;
  margin: 0;
}
p {
  margin: 0 0 2rem 0;
}

.calendar {
  margin: 2rem auto;
  width: 30rem;
  border-collapse: separate;
  border: $table__border;
  border-right: none;
  border-bottom: none;
  line-height: 1;
}
th {
  margin: 0;
  padding: .8rem 1rem;
  text-align: center;
  font-weight: normal;
  font-size: 1.2rem;
  background: $color__charcoal;
  border: $table__border;
  border-top: none;
  border-left: none;
}
td {
  margin: 0;
  text-align: center;
  border: $table__border;
  border-top: none;
  border-left: none;

  a {
    display: block;
    margin: 0;
    padding: .8rem 1rem;
    background: $color__charcoal;
    background-clip: padding-box;
    border: 2px solid transparent;
    color: $color__white;
    text-decoration: none;

    &:hover {
      border-color: $color__gray;
      background: lighten($color__charcoal, 5%);
    }      
    &.current {
      background: $color__blue;
      color: $color__white;

      &:hover {
        background: $color__blue;
        border-color: lighten($color__blue, 20%);
      }
    }
    &.active {
      border-color: $color__blue;

      &:hover {
        border-color: darken($color__blue, 5%);
      }
    }
    &.current.active {
      box-shadow: inset 0 0 0 2px $color__black;

      &:hover {
        border-color: lighten($color__blue, 20%);
      }
    }
    &.disabled {
      color: $color__gray;

      &:hover {
        background: $color__charcoal;
      }
    }
  }
}