CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-schedulerfullcalendar-4
moto_geek
moto_geek

Reputation: 580

FullCalendar Resource View - Week View w/Previous 3 Days Shown

I have provided a TimelineResourceView below as a reference as an example current setup.

Example: If Week View Sun-Sat Then anytime navigating forward/backward, always show week view with previous 3 days from week range. Then anytime navigating forward/backward, always show week view with previous 3 days from week range.

FullCalendar Example Timeline ResourceWeekView https://codepen.io/motogeek/pen/yLLpjLV

I tried many different things from docs such as "visiblerange" and forcing dates with no success.

https://fullcalendar.io/docs/visibleRange

[Sun Oct 27 – Sat Nov 2] but they want to see [Thurs Oct 24 – Sat Nov 2] to show the previous 3 days.

calendar.setOption('visibleRange', {
  start: '2019-10-24',
  end: '2019-11-02'
});

Upvotes: 1

Views: 3082

Answers (2)

Lars Olafsson
Lars Olafsson

Reputation: 1

For anyone else coming across this. v5 now supports this as visible range.

https://fullcalendar.io/docs/visibleRange

Upvotes: 0

moto_geek
moto_geek

Reputation: 580

Persistence paid off. I achieved a custom view using VisibleRange and with Moment javascript library. I answer this myself knowing this could be helpful for others formulating a custom view. Mine was focused on the timelineResourceViewm but should be able to apply to the other day/week views etc.

See CodePen: Working Example Week View with Previewing Last 3 days (10 Day View)

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'resourceTimeline' ],
    timeZone: 'UTC',
    header: {
      left: 'today',
      center: 'title',
      right: 'resourceTimeline'
    },        
    defaultView: 'resourceTimeline',
                    views: {
                        resourceTimeline: {
                            visibleRange: function (currentDate) {
                                // Generate a new date for manipulating in the next step
                                var startDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
                                var endDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));

                                // Adjust the start & end dates, respectively

                                //10 Day WeekView PREV Thurs -> Sun-Sat
                                startDate.setDate(startDate.getDate() - 3); //Set Past (show back Thur)
                                endDate.setDate(endDate.getDate() + 7); // Set Future (standard week from Sun)
                                return { start: startDate, end: endDate };
                            }
                        }
                    },
     slotLabelFormat: [{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }],
                slotLabelInterval: { days: 1 },
    editable: true,
    resourceLabelText: 'Rooms',
    resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
  });

  calendar.render();

  document.getElementById('prev').addEventListener('click', function() {
    calendar.incrementDate({ days: -7 });  
  });

  document.getElementById('next').addEventListener('click', function() {
    calendar.incrementDate({ days: 7 });  
  });

});

Upvotes: 2

Related Questions