0

I wonder if there's an alternative way to select a range of dates in month view, without click + drag?

My idea would be:

  • 1st. click: Sets start date.
  • On mousemove, date ranges highlight (up to the date the mouse pointer is over).
  • 2nd. click: Sets end date.

Should I do this triggering manually dragstart on dayClick callback? I cannot find a way on the docs to hook to events there. What I'm missing?

Somehow related but different behavior I want to add, is to "highlight" a range of dates (in the fiddle are 4 days), from the selected start date. I've tried calling the select method via dayClick callback, but if I invoke select method programatically, only the start and end date highlights (and I would like to highlight also the ones inbetween).

(See Fiddle: https://jsfiddle.net/xeezawaki/qrjpv7w5/)

zedee
  • 419
  • 1
  • 4
  • 15

1 Answers1

1

Doing something like the following would give you a starting point for clicking one date and then another to highlight the first, last and all cells between. Mouseover is set up in the viewRender to ensure the elements you want to attach to are in the DOM.

Looking at the docs the only dragstart I can see is the eventDragStart, this is no use since at this point you don't have an event yet. 

var startDate, endDate

viewRender: function( view, element ) {
  $( ".fc-row .fc-bg .fc-day" ).mouseover(function() {
    if (startDate != null && endDate == null){
      var hoverDate = moment($(this).data("date"));
      bookingCalendarSelector.fullCalendar('select', startDate, hoverDate.add(1, 'd'));
    }
  });
},
dayClick: function(date, jsEvent, view) {
  if (startDate == null) {
      startDate = date;
      bookingCalendarSelector.fullCalendar('select', startDate);
  } else if (endDate == null) {
      endDate = date;
      bookingCalendarSelector.fullCalendar('select', startDate, endDate.add(1, 'd'));
  } else {
      startDate = endDate = null;
      bookingCalendarSelector.fullCalendar('unselect');
  }
}

https://jsfiddle.net/ally_murray/2b7s3dj1/

Ally Murray
  • 599
  • 1
  • 6
  • 16
  • Many thanks for your time and answer! I didn't thought of add mouseover listeners directly on `.fc-row .fc-bg .fc-day` ... Unfortunately I cannot take your idea as a base for my code :( Out of frustration, I decided to switch the library to `flatpickr`, which had this behavior implemented out-of-the-box. – zedee Sep 27 '18 at 16:19
  • 1
    Ah right no worries, thanks for still accepting the answer now you no longer need it. – Ally Murray Sep 27 '18 at 16:43
  • 1
    Of course! I got answered with a correct solution anyway and you invested some time to answer it. Even if I no longer need it now, still had learnt an idea to tackle a problem of this kind :) – zedee Sep 28 '18 at 12:13