LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

December 2017

S M T W T F S
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

January 2018

S M T W T F S
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
             

February 2018

S M T W T F S
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28      
             
CSS
/* Changes the way the box model works so you can set padding between columns */
* {
  box-sizing: border-box;
}

table {
  width: 100%;
  background-color: white;
}

td {
  border: 1px solid black;
}

[class*="calendar-"] {
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.calendar-col {
  width: 33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.calendar-container {
  margin: 10px;
  width: 100%;
}

.calendar-col.mobile{
    display: none;
  }

/* I add this for all my images so they're responsive */

@media screen and (max-width: 600px) {
  .calendar-col{
    width: 100%;
  }
  
  .calendar-col.second, .calendar-col.third {
    display:none;
  }
  
  .calendar-col.mobile{
    display: block;
  }

  /*  Remove this you don't usually want to set fixed widths on responsive sites */
  /*     .card-col-img > img{width: 100px;} */
}
JS
$( document ).ready(function() {
  
  $('#action-december').click(function(e){
      e.preventDefault();
      $('.calendar-col').hide();
      $('.calendar-col.first').show();
      $('.calendar-col.mobile').show();
  })
  
  $('#action-january').click(function(e){
      e.preventDefault();
      $('.calendar-col').hide();
      $('.calendar-col.second').show();
      $('.calendar-col.mobile').show();
  });
  
    $('#action-february').click(function(e){
      e.preventDefault();
      $('.calendar-col').hide();
      $('.calendar-col.third').show();
      $('.calendar-col.mobile').show();
  });
  
  
  
  
});
Term
Wed, 12/27/2017 - 06:56

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv