Geek Answers Handbook

JQuery / JavaScript Calendar Slider

I am currently programming the Calender and have the idea of ​​creating it as a slider.

Something like: http://wisestartupblog.com/wp-content/uploads/2008/02/itunes-cover-flow1.png

The selected day should be centered in the viewing window and should be displayed below in different events.

I created a flex-box and created a rounded div-container for each day and set a parent overflow container to hide non-relevant days.

HTML with JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <section id="top_container">
    <div id="date_rotation">
    </div>
    </section>
    <nav id="menu_bar">
    </nav>
    <section id="event_container">
      jj
    </section>
    <script>

      // Variables

      var date = new Date();
      var daynames = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"]
      var monthnames = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober",
          "November","Dezember"];
      var calStart = new Date(2015, 4, 28);
      var selectedYear = calStart.getFullYear();
      var selectedMonth = calStart.getMonth();
      var selectedDay = calStart.getDate();
      var calLength = 2000;

      //Functions

      function daysofMonths(myyear,mymonth) {  
        var monthStart = new Date(myyear, mymonth, 1);
        var monthEnd = new Date(myyear, mymonth + 1, 1);
        var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
        return monthLength;
        }

      // Creating Calender

          for (var i=0; i <= calLength; i++) {
            currentDate = new Date(selectedYear, selectedMonth, selectedDay);
            if (selectedDay > daysofMonths(selectedYear,selectedMonth)) {
              selectedDay = 1;
              selectedMonth ++;
                if (selectedMonth > 11) {
                  selectedMonth = 0;
                  selectedYear ++;
                }
              $("#date_rotation").append('<div class="date_picker" id="' + selectedDay + selectedMonth + selectedYear + '"><p>' + selectedDay + monthnames[selectedMonth] + '<br>' + daynames[currentDate.getDay()] + ' ' + selectedYear + '</p></div>');
              console.log("First");
            } else {
              $("#date_rotation").append('<div class="date_picker" id="' + selectedDay + selectedMonth + selectedYear + '"><p>' + selectedDay + monthnames[selectedMonth] + '<br>' + daynames[currentDate.getDay()] + ' ' + selectedYear + '</p></div>');
              selectedDay ++;
              console.log("Secound");
            }
          }

      // Rotate Calender

      // Get Position relative to Container

      $(".date_picker").click(function( event ) {
        var thisPos = $(this).position();
        var parentPos = $(this).parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        var width = $("#date_rotation").width();
        $("#menu_bar").text(x + "px, " + y + "px," + width + "px"); 
    </script>
  </body>
</html>

SCSS

#top_container {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.75);
  border-bottom: 2px solid black;
}

#event_container {
  margin: 0 auto 0;
  height: 100%;
  width: 70%;
  background-color: rgba(0, 0, 0, 0.5);
}

#menu_bar {
  width: 70%;
  margin: 302px auto 0;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
}

#date_rotation {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  position: fixed;
  top: 75px;
  z-index: 101;
}
#date_rotation .date_picker {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 0 25px;
  width: 150px;
  height: 150px;
  background-color: white;
  border-radius: 50%;
  text-align: center;
  font-size: 1em;
}
#date_rotation .date_picker p {
  line-height: 50px;
}
#date_rotation .date_picker:hover {
  cursor: pointer;
  transform: scale(1.5);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

What I'm trying to archive is to center the selected div with the date_picker class and therefore move the full parent container with overflow.

I'm completely stuck and don't want me to have an animated solution or hints how I can archive my goal.

/ =)

:

$(".date_picker").click(function( event ) {
        var thisPos = $(this).position();
        var parentPos = $(this).parent().position();
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        var width = $("#date_rotation").width();
        $("#menu_bar").text(x + "px, " + y + "px," + width + "px");

        //Center Selected child-items

        var selectedDate = $(document).width() / 2;
        var selectedLeft = $(this).position().left
        console.log(selectedLeft);
        var dateCentering = selectedLeft - selectedDate;
            dateCentering += 150;
        $("#date_rotation").animate({
          'left' : -dateCentering
          });
      });

Cab

+4
1

(l-cen), (l-curr) = l-cen-l-curr; ( , ... , , , , ). #date_rotation ( , , div ). . datepicker.

, , , .

0

More articles:


All Articles