Question

I’m currently working with a jQuery ui datepicker and I’m trying to figure out if it is at all possible to combine the calendar with the isotope plugin, more specifically the data-filter, i.e. selecting a date from the datepicker and filtering out the relevant events (on that date).
Here’s some of my html:

<div id="datepicker"></div>

<div id="block-wrap">
    <div class="blocks">1</div>
    <div class="blocks">3</div>
    <div class="blocks">2</div>
    <div class="blocks">2</div>
    <div class="blocks">3</div>
    <div class="blocks">1</div>
    <div class="blocks">3</div>
    <div class="blocks">2</div>
    <div class="blocks">1</div>    
</div>

Also a working demo on jsfiddle here too
So is it at all possible to filter out the numbered blocks using the datepicker?
Any help would be greatly appreciated!

Answer 1

I did look at this again.

You can use the datepicker’s onSelect() method and attach this:

onSelect: function (dateText, inst) {
  var date = $(this).datepicker('getDate');
  //var dayValue = date.getDate(); // or
   var dayValue = inst.selectedDay;


  $blocks.show();

  $blocks.filter(function () {
    if (this.innerHTML != dayValue) {
      $(this).hide();
    }
  });
}

You can use the first function parameter which holds a string version of the date you clicked or you can use the second parameter which is an instance of the datepicker object with useful properties values for the date elements.

---

DEMO 01 – Only show boxes matching the number clicked in calendar

---

I had a play around and the filter option of the isotop must be a selector. As far as I know you cannot generate a jQuery selector interrogation the value or innerHTML.

However, you can add a custom attribute to each block containing the same value, similar to this:

<div class="blocks" data-value="1">1</div>
<div class="blocks" data-value="3">3</div>
<div class="blocks" data-value="2">2</div>

Now, you can generate a valid selector for the filter in the OnSelect method of the datepicker, like this:

onSelect: function (dateText, inst) {
  var date = $(this).datepicker('getDate');
  var dayValue = inst.selectedDay;

  $container.isotope({
    filter: '[data-value="' + dayValue + '"]'
  });
}

---

DEMO 02 – Using data attributes to connect datepicker to isotope filter

---

Code from the DEMOs in case of link-rot:

---

DEMO-01: HTML

<div id="datepicker"></div>
<div id="block-wrap">
  <div class="blocks">1</div>
  <div class="blocks">3</div>
  <div class="blocks">2</div>
  <div class="blocks">2</div>
</div>

DEMO-01: Script

var $blocks = $("div.blocks", "#block-wrap");

$(function () {
  $('#datepicker').datepicker({
    inline: true,
    //nextText: '→',
    //prevText: '←',
    showOtherMonths: true,
    //dateFormat: 'dd MM yy',
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    //showOn: "button",
    //buttonImage: "img/calendar-blue.png",
    //buttonImageOnly: true,
    onSelect: function (dateText, inst) {
      var date = $(this).datepicker('getDate');
      var dayValue = date.getDate();

      $blocks.show();

      $blocks.filter(function () {
        if (this.innerHTML != dayValue) {
          $(this).hide();
        }
      });
    }
  });
});


var $container = $('#block-wrap');

$container.imagesLoaded(function () {
  $container.isotope({
    itemSelector: '.blocks',
    animationEngine: 'css',
    masonry: {
      columnWidth: 5
    }


  });
});

DEMO-02: HTML

<div id="datepicker"></div>
<div id="block-wrap">
  <div class="blocks" data-value="1">1</div>
  <div class="blocks" data-value="3">3</div>
  <div class="blocks" data-value="2">2</div>
  <div class="blocks" data-value="2">2</div>
  <div class="blocks" data-value="1">1</div>
</div>

DEMO 02 – Script (only onSelect changed when compared to DEMO 01 script)

onSelect: function (dateText, inst) {
  var date = $(this).datepicker('getDate');
  var dayValue = inst.selectedDay;
  $container.isotope({
    filter: '[data-value="' + dayValue + '"]'
  });
}

CSS same for both DEMOs

#datepicker {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 9999;
}
#block-wrap {
  position: absolute;
  padding-left: 230px;
  top: 10px;
  width: auto;
}
.blocks {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: silver;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  z-index: 1;
}
.isotope, .isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}