jadwal widget

@extends('layouts.master')

@section('css')
<style>
* {
  font-size: 100%;
}
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0.5em;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  min-width: 800px;
}
@media (max-width: 800px) {
  table .time {
    display: none;
  }
}
summary {
  padding-bottom: 0.25em;
  font-size: 1.5em;
  font-weight: 100;
  text-align: right;
}
tr {
  position: relative;
}
th {
  text-align: right;
  color: #999;
  font-weight: normal;
  font-size: 0.85em;
}
td {
  width: 14.285714286%;
}
.date {
  text-align: right;
  display: block;
  height: 0;
  font-size: 0.8em;
  padding: 0.25em;
  padding-bottom: 73%;
  position: relative;
  border-bottom: 1px solid #dedbdb;
  margin-left: 0.25em;
  margin-right: 0.25em;
}
tr:first-child:not(.current-week) .date {
  border-top: 1px solid #dedbdb;
}
.date ul,
.date li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #333;
}
.date ul {
  text-align: left;
  font-size: 0.9em;
  width: 100%;
  overflow: hidden;
  position: absolute;
  font-weight: normal;
}
.date li {
  color: #222;
  width: 100%;
  height: 1.4em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}
.date li:before {
  content: '\2022';
  color: inherit;
  display: inline-block;
  padding-right: 0.25em;
}
.time {
  float: right;
  text-align: right;
  color: #999;
}
.event {
  color: #333;
}
.previous-week .date {
  border: none;
}
.current-week {
  border-top: 4px solid #fed6d7;
}
.current-day {
  background: #fed6d7;
  border-top: 4px solid #cb6c6b;
}
.current-day .date {
  font-weight: bold;
  color: #cb6c6b;
}
.weekend {
  background-clop: padding-box;
  background: #f5f5f5;
}
.date .different-calendar {
  color: #00c800;
}

</style>
@endsection

@section('title')
    Daftar Jadwal
@endsection

@section('content')
<div>
    <table>
    <summary><strong>February</strong> 2014</summary>
    <thead>
        <tr>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
        </tr>
    </thead>
    <tr>
        <td>
        <span class="date">
            27
            <ul>
            <li>
                <span class="event">Bus Stop</span>
                <span class="time">4 pm</span>
            </li>
            </ul>
        </span>
        </td>
        <td>
        <span class="date">28</span>
        </td>
        <td>
        <span class="date">29</span>
        </td>
        <td>
        <span class="date">30</span>
        </td>
        <td>
        <span class="date">31</span>
        </td>
        <td class="weekend">
        <span class="date">February 1</span>
        </td>
        <td class="weekend">
        <span class="date">
            2
            <ul>
            <li>
                <span class="event">Super Bowl</span>
                <span class="time">6:30 pm</span>
            </li>
            </ul>
        </span>
        </td>
    </tr>
    <tr class="previous-week">
        <td>
        <span class="date">3</span>
        </td>
        <td>
        <span class="date">4</span>
        </td>
        <td>
        <span class="date">5</span>
        </td>
        <td>
        <span class="date">6</span>
        </td>
        <td>
        <span class="date">7</span>
        </td>
        <td class="weekend">
        <span class="date">8</span>
        </td>
        <td class="weekend">
        <span class="date">9</span>
        </td>
    </tr>
    <tr class="current-week">
        <td>
        <span class="date">10</span>
        </td>
        <td>
        <span class="date">11</span>
        </td>
        <td>
        <span class="date">12</span>
        </td>
        <td>
        <span class="date">13</span>
        </td>
        <td class="current-day">
        <span class="date">
            14
            <ul>
            <li class="different-calendar"><span class="event">Valentines Day</span></li>
            </ul>
        </span>
        </td>
        <td class="weekend">
        <span class="date">15</span>
        </td>
        <td class="weekend">
        <span class="date">16</span>
        </td>
    </tr>
    <tr>
        <td>
        <span class="date">17</span>
        </td>
        <td>
        <span class="date">18</span>
        </td>
        <td>
        <span class="date">19</span>
        </td>
        <td>
        <span class="date">20</span>
        </td>
        <td>
        <span class="date">21</span>
        </td>
        <td class="weekend">
        <span class="date">22</span>
        </td>
        <td class="weekend">
        <span class="date">23</span>
        </td>
    </tr>
    <tr>
        <td>
        <span class="date">24</span>
        </td>
        <td>
        <span class="date">
            25
            <ul>
            <li class="different-calendar">
                <span class="event">Breakfast with Joe Smchoe The Baker Man</span>
                <span class="time">10 am</span>
            </li>
            <li>
                <span class="event">Code Review</span>
                <span class="time">Noon</span>
            </li>
            <li>
                <span class="event">Project X Kickoff</span>
                <span class="time">5 pm</span>
            </li>
            </ul>
        </span>
        </td>
        <td>
        <span class="date">26</span>
        </td>
        <td>
        <span class="date">27</span>
        </td>
        <td>
        <span class="date">28</span>
        </td>
        <td class="weekend">
        <span class="date">March 1</span>
        </td>
        <td class="weekend">
        <span class="date">2</span>
        </td>
    </tr>
    </table>
</div>
@endsection

@section('js')
<script>
    // Script Javascript Disini
</script>
@endsection