Creating Clickable Circle Dates for Webpage

Question

I am in the process of creating a page (using html, css, javascript and php).

I wanted to make a page where displayed would 7 circles showing the current date and the 6 following days and then the user could click an arrow to see the next 7 subsequent days.

I managed to figure out how to make a simple circle using CSS (thanks to Easier way to create circle div than using an image?) but I don't think it would be efficient to continue in the direction I'm going so any help would be greatly appreciated.

(More or less how I want the clickable circle to be but without "date" and the date displayed as Day of week
Month
Date) https://s-media-cache-ak0.pinimg.com/originals/c5/29/48/c529482834077a7d9b49320424d244f7.jpg

Edit: Something like this but instead of boxes, it would be circles.

Please see [*How do I ask a good question?*](http://stackoverflow.com/help/how-to-ask) Your question should include a specific issue and your attempt at a solution. — RobG, Aug 10 '17 at 04:59

Donald Powell · Accepted Answer · 2017-08-18T15:40:28.280

You can use html and css, instead of images. Adjusting the border-radius, width and height on the .circle css will change size and they all must be same number of pixels.

$('.circle').click(function(){
   console.log($(this).children('.date').text() + ' was clicked');
});

.circle {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    border: 5px solid #000000;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
}
.date {
  position: relative;
  top: 55px;
  color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
  <div class="date">09/08/2017</div>
</div>
<div class="circle">
  <div class="date">09/09/2017</div>
</div>
<div class="circle">
  <div class="date">09/10/2017</div>
</div>
<div class="circle">
  <div class="date">09/11/2017</div>
</div>

Eugine Joseph · Answer 2 · 2017-08-10T04:55:51.120

$(function() {
  $("#datepicker").datepicker();
});

.date-circle {
  width: 120px;
  height: 120px;
  background: pink;
  border-radius: 100px;
  border: 3px solid pink;
}

.date-circle .title {
  text-align: center;
  width: 50%;
  margin: 10px auto;
  padding-top: 10px;
  background: pink;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.date-circle input,
.date-circle input:focus {
  width: 93%;
  position: relative;
  /* margin-top: -110px; */
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  height: 62px;
  border-color: transparent;
  margin: 2px;
  text-align: center;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="date-circle">
  <div class="title">Date</div>
  <input type="text" id="datepicker">
</div>

Check this one. Maybe you may wanna update a little more.

Creating Clickable Circle Dates for Webpage

2 Answers2