Determine event type

Event calendars & schedulers
1

Hello - trialing user here but soon to be paid customer.

  1. How do I determine the view type from within the onPageLoading function? I have a view that the user can switch from a month calendar, a week calendar or a day agenda. In the function, I have tried using the second (instance) argument to determine what view is currently in place. I can see the calendar type views (month or week) by looking at instance_calendarType. However, I don’t see where I can see that the agenda is the current view type. (to bypass this, I am keeping track of the current view type myself (var Stable.EventsCalendar.calendarType) - but is there a way to avoid having to do that?).

  2. When the view type is agenda, the onPageLoading function is receiving an event that specifies a 2-day span from firstDay to lastDay for instance:

firstDay: Mon Jan 31 2022 00:00:00 GMT-0500 (EST)
lastDay: Tue Feb 01 2022 00: 00:00 GMT-0500 (EST)

even though I am only showing one day in the agenda. This causes the server to load events for two days instead of just one day.

I correct for this in the onPageLoading function - but is there I way I can prevent the need to do this?

Here is my JS code:

Stable.EventsCalendar = {
firstDay: null,
lastDay: null,
calendar: null,
calendarType: null,
horseId: null,
eventType: null,
monthViewHeight: 600,
weekViewHeight: 600,

init: function() {

Stable.EventsCalendar.calendarType = 'month';

Stable.EventsCalendar.calendar = ($('#eventcalendar').mobiscroll().eventcalendar({

  renderHeader: function () {
    return '<div mbsc-calendar-nav class="cal-header-nav"></div>' +
           '<div mbsc-segmented-group>' +
             '<label>Month<input type="radio" mbsc-segmented name="group1" value="month" class="cal-view-change" checked></label>' +
             '<label>Week<input type="radio" mbsc-segmented name="group1" value="week" class="cal-view-change"></label>' +
             '<label>Day<input type="radio" mbsc-segmented name="group1" value="day" class="cal-view-change"></label>' +
           '</div>' +
           '<div class="ml-auto d-inline-flex d-print-none">' +
             '<div mbsc-calendar-prev class="cal-header-prev"></div>' +
             '<button mbsc-calendar-today></button>' +
             '<div mbsc-calendar-next class="cal-header-next"></div>' +
           '</div>';
  },

  renderEvent: function (data) {
    html = '<div class="my-title">' + data.html.__html + '</div>';

    record_type = data.original.record_type
    if (record_type) {
      html += '&nbsp;' + data.original.record_type + '</div>';
    }
    return html;
  },

  onPageLoading: function (event, inst) {

    var firstDay;
    var lastDay;
    var calendarType = Stable.EventsCalendar.calendarType;

    if (calendarType === 'month') {
      // Do NOT show events in preceding or following month
      var year = event.month.getFullYear();
      var month = event.month.getMonth();
      firstDay = event.month;
      lastDay  = new Date(year, month + 1, 0);
    } else if (calendarType === 'day') {
      firstDay = event.firstDay;
      lastDay  = firstDay;
    } else {
      firstDay = event.firstDay;
      lastDay  = event.lastDay;
    }

    Stable.EventsCalendar.firstDay = firstDay;
    Stable.EventsCalendar.lastDay = lastDay;

    Stable.EventsCalendar.fetchEvents();

    $('.mbsc-segmented').addClass('d-print-none');
  }
})).mobiscroll('getInst');

$('.cal-view-change').change(function (ev) {
    switch (ev.target.value) {
      case 'month':
          Stable.EventsCalendar.calendar.setOptions({
              view: {
                calendar: { type: 'month' }
              },
              height: Stable.EventsCalendar.monthViewHeight
          })
          Stable.EventsCalendar.calendarType = 'month';
          break;
      case 'week':
          Stable.EventsCalendar.calendar.setOptions({
              view: {
                calendar: { type: 'week' }
              },
              height: Stable.EventsCalendar.weekViewHeight
          })
          Stable.EventsCalendar.calendarType = 'week';
          break;
      case 'day':
          Stable.EventsCalendar.calendar.setOptions({
              view: {
                agenda: { type: 'day' }
              }
          })
          Stable.EventsCalendar.calendarType = 'day';
          break;
    }
});

$('#show-all-horses-events-calendar').on('click', function() {
  Stable.EventsCalendar.horseId = null;

  Stable.EventsCalendar.fetchEvents();

  $('#show-all-horses-events-calendar').addClass('d-none');
  $('#horse_id').val('');
});

$('#horse_id').on('change', function() {

  var horseId  = $('#horse_id').val();
  if (horseId === '') {
    horseId = null;
    $('#show-all-horses-events-calendar').addClass('d-none');
  } else {
    $('#show-all-horses-events-calendar').removeClass('d-none');
  }
  Stable.EventsCalendar.horseId = horseId;

  Stable.EventsCalendar.fetchEvents();
});

$('#show-all-types-events-calendar').on('click', function() {
  Stable.EventsCalendar.eventType = null;

  Stable.EventsCalendar.fetchEvents();

  $('#show-all-types-events-calendar').addClass('d-none');
  $('#event-type').val('');
});

$('#event-type').on('change', function() {

  var eventType  = $('#event-type').val();
  if (eventType === '') {
    eventType = null;
    $('#show-all-types-events-calendar').addClass('d-none');
  } else {
    $('#show-all-types-events-calendar').removeClass('d-none');
  }
  Stable.EventsCalendar.eventType = eventType;

  Stable.EventsCalendar.fetchEvents();
});

},

fetchEvents: function() {
var pathParams = { first_day: Stable.EventsCalendar.firstDay,
last_day: Stable.EventsCalendar.lastDay,
horse_id: Stable.EventsCalendar.horseId,
event_type: Stable.EventsCalendar.eventType };

var path = Routes.events_calendar_events_path(pathParams);

$.getJSON(path, function (events) {
  Stable.EventsCalendar.calendar.setEvents(events);
});

}
}

2

Hi @Patrick :wave:

See the answers below:

  1. To determine the current view type, you need to use the inst.props.view :

     onPageLoading: function (event, inst) {
     const viewType = inst.props.view;
     if (viewType.calendar) {
         console.log(viewType.calendar.type);
     } else if (viewType.agenda) {
         console.log(viewType.agenda.type);
     }
 }

  2. If you want to use just one day instead of two, the easiest way is to subtract one millisecond from the lastDay property. For example:

    event.lastDay = new Date(event.lastDay - 1);