Effortlessly moving through each day on Fullcalendar by utilizing the resourceTimeline feature

I have been using the Fullcalendar plugin and I am wondering if there is a way to navigate from day to day instead of in 3-day increments when using the resourceTimeline view with a duration set to 3 days.

Thank you

calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'fr',
    height: '95%',
    timeZone: 'Europe/Paris',
    initialView: 'resourceTimelineDay',
    views: {
        resourceTimelineDay: {
            buttonText: 'Calendrier',
            titleFormat: {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'}
        },
        listDay: {
            buttonText: 'Liste',
            titleFormat: {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'}
        },
        resourceTimelineTenDay: {
            type: 'resourceTimeline',
            duration: { days: 3 },

            buttonText: '3 days'
        }
    },                      
    aspectRatio: 1.5,
    headerToolbar: {
        left: 'prev,next',
        center: 'title',
        right: 'resourceTimelineDay,listDay,resourceTimelineTenDay'
    },
    validRange: {
        start: data.jourMin,
        end: data.jourMax
    },
    slotMinTime: '08:00:00',
    slotMaxTime: '24:00:00',
    slotMinWidth: 38,
    selectable: true,
    editable: true,
    eventOverlap: false,
    slotDuration: data.dureeSlot,
    resourceAreaHeaderContent: 'Lieux',
    resources: './assets/json/salles.php',
    events: './assets/json/events.php',
    resourceAreaWidth: "10%",
    resourceOrder: 'title'
});

EDIT : I have experimented with visibleRange but it did not achieve the desired result. I followed the documentation and added this code to my custom view:


visibleRange: function(currentDate) {
        // Generate a new date for manipulation
        var startDate = new Date(currentDate.valueOf());
        var endDate = new Date(currentDate.valueOf());

        // Adjust the start & end dates
        startDate.setDate(startDate.getDate() - 1); // One day before
        endDate.setDate(endDate.getDate() + 2); // Two days ahead

        return { start: startDate, end: endDate };
      }

Answer №1

Discover how to easily achieve this using the dayCount option, which ensures a specific number of days will be displayed in your view without setting a fixed duration. This allows the navigation buttons to progress one day at a time:

  resourceTimelineTenDay: {
    type: "resourceTimeline",
    buttonText: "3 days",
    dayCount: 3,
  }

View live demonstration here: https://codepen.io/ADyson82/pen/YzgxBYe

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node JS Client.query not returning expected results

Currently, I am developing a Web Application that interacts with my PostgreSQL database. However, when I navigate to the main page, it should display the first element from the 'actor' table, but unfortunately, nothing is being retrieved. Below i ...

Having trouble with less.modifyVars not functioning properly in Visual Studio?

I attempted to dynamically change the LESS variable using HTML within an AngularJS function. The code worked fine on XAMPP with simple HTML and CSS, but when I transferred it to an enterprise app in Visual Studio, it stopped functioning properly. While the ...

Please display the Bootstrap Modal first before continuing

Currently, I'm facing a challenge with my JS code as it seems to continue running before displaying my Bootstrap Modal. On this website, users are required to input information and upon pressing the Save button, a function called "passTimeToSpring()" ...

What's the best way to process a string array using iteration in Typescript?

I have an array of colors: colors = ['red','blue','purple']; I would like to display the following message: colors in ('red','blue','purple') When I tried to achieve this using forEach metho ...

'Error: The type is missing the 'previous' property - Combining TypeScript with ReactJS'

I am quite new to using reactjs and ts. While I understand the error that is occurring, I am unsure of the best solution to fix it. Currently working with reactjs, I have created an: interface interface IPropertyTax { annul: { current: number; p ...

Is your angularjs localstorage giving you trouble?

I am encountering an issue with local storage on my webpage. Upon initial visit, I am seeing an outdated value from local storage. However, upon refreshing the page, I am able to access the current value. How can I prevent this error and ensure that I only ...

NodeJS unexpectedly exhibiting peculiar array functions

Within my NodeJS code, I have the following implementation: /* server.js */ 'use strict'; const http = require('http'), url = require('url'); METHODS = ['GET','POST','PUT','DELETE&a ...

"Combining the power of Node.js, mysql, and socket.io

As a beginner with socket.io, I am facing an issue. How can I update and display real-time data from a table in my database without having to restart the node.js server? The table receives new data every 10 seconds. I have followed several tutorials but h ...

The code attempted to use `app.set`, but received a TypeError because `app.get` is

While working with express 4.x, I encounter an issue with setting the port in my server.js file like this: var express = require('express'); var app = express(); ... var port = process.env.PORT || 8080; app.set('port', port); ... modul ...

The angular controller function is failing to set $scope.value

I've been facing an issue with setting an Angular variable value in a controller function that is created by a directive. For some reason, it doesn't seem to work when I try to assign the value within the controller function, even though it displ ...

Determine the exact beginning and ending positions of a word when dividing it using Javascript

After creating a special function that breaks down a word based on spaces while keeping punctuation marks intact, I was able to achieve the desired result. function tokenizeUtterance( utterance ) { let spilittedUserText = utterance.toString().match( /[& ...

The expected behavior is not displayed when using Async.waterfall within a promise queue

In our software implementation, we have utilized a promise queue feature using the q library. The sequence of functions is structured as follows: PQFn1 -(then)- PQFn2 - .... Within PQFn1, an array of values is passed to a callback function implemented wi ...

How to retrieve nested menu items within the scope by utilizing JSON and AngularJS

I have recently started working with angular and am facing difficulty in accessing the submenu items within my angular application. While I can successfully access the top level menu items, I am struggling to retrieve the second level items. Here is a sni ...

initiating an event within a modal controller

I have a $scope.$on callback function in my mainController. It works perfectly whenever I call it from each controller, but when I call it from a modalController after opening the modal, it doesn't work: define(['app', 'jquery'], ...

How to give focus to a div in IE 8 after pressing the tab key, no jQuery required

We are facing a challenge with our datagrid where we have implemented navigation using the tab key. In IE 7 & 8, pressing the tab key shifts the focus away from the grid to the next element on the page. While in other browsers, we were able to prevent thi ...

JavaScript innerHTML not functioning properly when receiving a response from a servlet

Can someone help me troubleshoot the code below? I'm receiving a response from the servlet, but I can't seem to display it inside the div. Here is the response: lukas requests to be your friend &nbsp <button value="lukas"onclick="accfr(th ...

Retrieve combination values through an AJAX request using ExtJS

My UI is developed using ExtJS, and I have a specific set of tasks that need to be executed when the page loads: Initiate an ajax call to the server to fetch a HashMap. Create a combobox within the main Panel on the page. var combo = Ext.create(' ...

Nuxt's axios is encountering difficulties in managing the server's response

Having just started working with Nuxt.js, I encountered an unusual issue. There is an endpoint in my backend API that allows users to reset their password by sending a token along with a new password. Although the request is being sent correctly and the s ...

Automatically tally up the pages and showcase the page numbers for seamless printing

I've been tackling a challenge in my Vue.js application, specifically with generating invoices and accurately numbering the pages. An issue arose when printing the invoice – each page was labeled "Page 1 of 20" irrespective of its actual position in ...

Create specification for the properties of the child component

I am interested in working with the props of a parent element's children and validating those props. Can I achieve this using prop-types? export default function MyComponent(props) { return ( <div> {React.Children.map(props.chil ...