Scheduler

Make or Delete appointments anywhere in the week

by Adam M

HTML

<div class="row" id="control-panel">
        <button onclick="addAppt()" id="add-appt" title="Add Appointment">+</button>
        <p>= Add Appointment</p>
        <button onclick="delAppt()" id="del-appt" title="Delete Appointment">-</button>
        <p>= Delete Appointment</p>
</div>

<table>
          <thead>
            <tr class="days-of-the-week">
              <th scope="col" class="time-col"></th>
              <th scope="col">Sunday</th>
              <th scope="col">Monday</th>
              <th scope="col">Tuesday</th>
              <th scope="col">Wednesday</th>
              <th scope="col">Thursday</th>
              <th scope="col">Friday</th>
              <th scope="col">Saturday</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">7:30 AM</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
            </tr>
            <tr>
              <th scope="row">8:00 AM</th>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5" class="appt-text"></textarea></td>
              <td rowspan=""><textarea cols="20" rows="5"...

CSS

/* Control Panel Styling */

#control-panel {
  height: 50px;
  margin-top: -20px;
  margin-bottom: 20px;
  border: 2px dotted silver;
  border-radius: 6px;
  line-height: 50px;
  margin-top: 10px;
}

#add-appt {
  height: 30px;
  width: 30px;
  border: 2px solid black;
  border-radius: 30px;
  background-color: #FFF;
  color: #43E818;
  margin-left: 10px;
}

#del-appt {
  height: 30px;
  width: 30px;
  border: 2px solid black;
  border-radius: 30px;
  background-color: #FFF;
  color: #FF1000;
  margin-left: 10px;
}

#control-panel p {
  display: inline;
  font-size: 14px;
}

button:focus {
  outline: none;
}

#add-appt:hover, #del-appt:hover {
  background-color: gray;
}

#add-appt:active, #del-appt:active {
  background-color: black;
}

/* Schedule/Table Style */

table {
  font-family: Arvo, Arial, sans-serif;
  border-collapse: separate !important;
  border-top: 2px solid #4DC7E8;
  border-left: 2px solid #4DC7E8;
  border-radius: 6px;
}

.days-of-the-week th {
  width: 160px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
  border-radius: 6px;
}

tr td, th {
  border-right: 2px solid #4DC7E8;
  border-bottom: 2px solid #4DC7E8;
  border-radius: 6px;
}

td {
  height: 50px;
}

.days-of-the-week .time-col {
  width: 80px;
}

tbody th {
  text-align: right;
  padding: 5px 3px;
}

.highlight {
  background-color: rgba(255, 108, 78, 0.3); 
}

.appt-text {
   background-color: inherit;
   border: 0px;
   width: 100%;
   height: 100%;
   outline: none;
   cursor: default;
}

JavaScript

function addAppt() {
    $('td').css('cursor', 'cell');
    $('textarea').css('cursor', 'cell');
    var spanCount = 1; 
    $('td').mousedown(function(){
          $('td').hover(function(){
            $(this).addClass('highlight');
          });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}

function delAppt() {
    $('td').css('cursor', 'not-allowed');
    $('textarea').css('cursor', 'not-allowed');
    $('td').click(function(){
      $(this).removeClass('highlight');
    });
    $('td').mousedown(function(){
          $('td').hover(function(){
            $(this).removeClass('highlight');
          });
    });
    $('td').mouseup(function(){
      $('td').off('mouseenter mouseleave');
    });
}