DayPilot
Products
Support

DayPilot HTML5 Scheduler - Show Only Empty rooms

Asked by Sharon
6 years ago.

Hi.

I need to be able to filter bookings to only show "Empty Rooms". I have code in place to "hide empty" rooms (as provided by you - thank you) 

dp.onRowFilter = function(args) {
  var query = args.filter.query;
  var hideEmpty = args.filter.hideEmpty;

  if (args.row.name.toUpperCase().indexOf(query.toUpperCase()) === -1) {
    args.visible = false;
  }
  else if (hideEmpty && args.row.events.isEmpty()){
    args.visible = false;
  }
};

... and then...

$(document).ready(function() {	
 function filter() {
        dp.rows.filter({
          query: $("#filter").val(),
          hideEmpty: $("#hideEmpty").is(":checked")
        });
    }

    $("#filter").keyup(function() {
        filter();
    });

    $("#hideEmpty").change(function() {
        filter();
    });

    $("#clear").click(function() {
        $("#filter").val("");
        dp.rows.filter(null);
        return false;
    });
  

});

... so we can currently see all bookings on screen (filtered by name, or room, or dates etc ) with empty rooms hidden, which is wonderful.

I would now like to be able to only show "empty rooms" via a checkbox to hide all booked rooms.

So I would select my dates on the nav calendar, then select (for example) "double rooms" then click a checkbox to hide all booked rooms (the opposite to hiding empty rooms) so it will only show all available rooms for these dates. I hope this makes sense.

Is this possible? Thank you once again in advance.

how-tojavascripthidebookedroomsfilter
Comment posted by Sharon
6 years ago.

Hi Dan
Yes. I did see this when I was researching to see if I could find the solution code or if someone else had previously asked. However, I cannot swap formats now, as I have spent months customising to suit on the html5 booking version.

I was hoping that the html5 version would also support only showing "empty" slots as it does hiding them. Hiding the empty rooms is useful for viewing who is staying that night/weekend/week only, or quickly finding an existing booking, but being able to see what rooms are empty for any period is also important from an actual making a booking point of view.

When there is lots of rooms and bookings on the system, and a customer is enquiring for dates of availability , and the screen is very full and can be rather hard to spot a 1-2 night availability for a suitable room, so the function to only show rooms with that availability would be very, very useful indeed. (I already have implemented multiple filters to select room features (e.gto only show doubles, with ensuite, disabled access etc), so to be able to only show availability also at this point would be important from a usability point of view.

This functionality would also be useful if you needed to move a booking, I have implemented the copy/paste (but have changed this to copy/update) so one could copy a booking, filter to only show empty rooms for the same dates, then quickly paste it in there so it would be easier to move a booking if need be, rather than scouring through to try to visually spot a suitable alternative.

Thank you

Answer posted by Dan Letecky [DayPilot]
6 years ago.

Hi Sharon,

This is a bit more complex scenario that can't be implemented using a simple snippet.

Please take a look at the following tutorial:
https://code.daypilot.org/76399/javascript-html5-scheduler-filtering-rooms-by-availability

It's basically a JavaScript version of the row filtering functionality from the Angular restaurant tutorial. It uses the Navigator free-hand selection feature to select the date range.

It may not be a simple copy and paste solution but you should get the idea on how to integrate it into your application.

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.