JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary weekend-button" data-toggle="modal" data-target="#exampleModalCenter">
  Schedule an Appointment
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">About Scheduling</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquam lectus eget diam laoreet laoreet. Maecenas placerat tristique nisi id sagittis. Etiam luctus elit at vestibulum tincidunt. Nulla facilisi. Nullam porttitor maximus convallis. Nulla vehicula magna vel elit sagittis finibus.</p>
      </div>
      <div class="modal-footer">

        <a type="button" class="btn btn-primary" href="https://mychart.nghs.com/MyChart/SignupAndSchedule/EmbeddedSchedule?id=117122&dept=1001301193,1001301192,1001301018,1001301024,1001301020,1001301114&vt=1170001945&_ga=2.180682023.1272318915.1611152924-145005868.1599062172" target="_blank">View Available Appoinments</a>
      </div>
    </div>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.weekend-button,
.modal .btn.btn-primary {
  background: #eb6100 !important;
  border-color: #a74500;
  padding: 15px 25px;
}

.weekend-button {
  display: none;
}

JavaScript

$(document).ready(function() {

  var dayofweek = new Date().toLocaleDateString('en', {
    weekday: 'long'
  });


  if (dayofweek == "Wednesday") {
    $(".weekend-button").show();
    $(".side-button").hide();
  } else {

  }

});